前端部署：从开发到生产的最后一公里

前端部署：从开发到生产的最后一公里

毒舌时刻

前端部署？这不是运维的事吗？

"我只负责写代码，部署交给运维"——结果部署失败，互相甩锅，
"我直接把文件上传到服务器"——结果更新不及时，缓存问题频发，
"我用FTP上传，多简单"——结果文件传丢，网站崩溃。

醒醒吧，前端部署是前端开发的重要环节，不是别人的事！

为什么你需要这个？

• 快速上线：自动化部署，减少人工操作
• 环境一致性：确保开发、测试、生产环境一致
• 回滚能力：出现问题时可以快速回滚
• 监控和日志：实时监控网站状态和错误

反面教材

# 反面教材：手动部署 # 1. 本地构建 npm run build # 2. 手动上传文件 ftp ftp://example.com > put -r dist/* # 3. 手动清除缓存 ssh [email protected] > rm -rf /var/www/html/* > cp -r dist/* /var/www/html/ > systemctl restart nginx # 4. 手动检查 curl https://example.com 

正确的做法

# 正确的做法：使用CI/CD # .github/workflows/deploy.yml name: Deploy to Production on: push: branches: - main jobs: build: runs-on: ubuntu-latest steps: - uses: actions/checkout@v3 - name: Setup Node.js uses: actions/setup-node@v3 with: node-version: '18' cache: 'npm' - name: Install dependencies run: npm ci - name: Build run: npm run build - name: Test run: npm test - name: Deploy to Vercel uses: amondnet/vercel-action@v25 with: vercel-token: ${{ secrets.VERCEL_TOKEN }} vercel-args: '--prod' vercel-org-id: ${{ secrets.VERCEL_ORG_ID }} vercel-project-id: ${{ secrets.VERCEL_PROJECT_ID }} 

# 正确的做法：使用Docker # Dockerfile FROM node:18-alpine AS build WORKDIR /app COPY package*.json ./ RUN npm ci COPY . . RUN npm run build FROM nginx:alpine COPY --from=build /app/dist /usr/share/nginx/html COPY nginx.conf /etc/nginx/conf.d/default.conf EXPOSE 80 CMD ["nginx", "-g", "daemon off;"] 

# 正确的做法：Nginx配置 # nginx.conf server { listen 80; server_name example.com; root /usr/share/nginx/html; index index.html; # 处理单页应用路由 location / { try_files $uri $uri/ /index.html; } # 静态资源缓存 location ~* \.(js|css|png|jpg|jpeg|gif|ico)$ { expires 30d; add_header Cache-Control "public, max-age=2592000"; } # Gzip压缩 gzip on; gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript; } 

// 正确的做法：使用CDN // vite.config.js import { defineConfig } from 'vite'; import react from '@vitejs/plugin-react'; export default defineConfig({ plugins: [react()], build: { outDir: 'dist', assetsDir: 'assets', // 生成带哈希的文件名，便于缓存 rollupOptions: { output: { entryFileNames: 'assets/[name].[hash].js', chunkFileNames: 'assets/[name].[hash].js', assetFileNames: 'assets/[name].[hash].[ext]' } } }, // 配置CDN base: 'https://cdn.example.com/' }); 

毒舌点评

看看，这才叫前端部署！不是简单地手动上传文件，而是使用CI/CD、Docker、CDN等现代化工具。

记住，前端部署不是一次性的任务，而是一个持续的过程。你需要考虑构建优化、缓存策略、回滚机制等多个方面。

所以，别再觉得部署是运维的事了，它是你作为前端开发者的责任！

总结

• CI/CD：使用GitHub Actions、GitLab CI等自动化部署
• Docker：使用容器化技术，确保环境一致性
• CDN：使用内容分发网络，提高访问速度
• 缓存策略：合理设置缓存，减少重复请求
• 监控：使用监控工具，实时了解网站状态
• 日志：收集和分析日志，快速定位问题
• 回滚：准备回滚方案，出现问题时快速恢复
• 环境变量：使用环境变量管理不同环境的配置

前端部署，让你的代码快速、安全地到达用户手中！