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

前端部署从开发到生产的最后一公里毒舌时刻前端部署这不是运维的事吗我只负责写代码部署交给运维——结果部署失败互相甩锅我直接把文件上传到服务器——结果更新不及时缓存问题频发我用FTP上传多简单——结果文件传丢网站崩溃。醒醒吧前端部署是前端开发的重要环节不是别人的事为什么你需要这个快速上线自动化部署减少人工操作环境一致性确保开发、测试、生产环境一致回滚能力出现问题时可以快速回滚监控和日志实时监控网站状态和错误反面教材# 反面教材手动部署 # 1. 本地构建 npm run build # 2. 手动上传文件 ftp ftp://example.com put -r dist/* # 3. 手动清除缓存 ssh userexample.com 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/checkoutv3 - name: Setup Node.js uses: actions/setup-nodev3 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-actionv25 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 --frombuild /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-age2592000; } # Gzip压缩 gzip on; gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xmlrss 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使用内容分发网络提高访问速度缓存策略合理设置缓存减少重复请求监控使用监控工具实时了解网站状态日志收集和分析日志快速定位问题回滚准备回滚方案出现问题时快速恢复环境变量使用环境变量管理不同环境的配置前端部署让你的代码快速、安全地到达用户手中