当前位置：首页 > news >正文

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

news 2026/4/1 4:27:05

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

毒舌时刻

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

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

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

为什么你需要这个？

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

反面教材

# 反面教材：手动部署 # 1. 本地构建 npm run build # 2. 手动上传文件 ftp ftp://example.com > put -r dist/* # 3. 手动清除缓存 ssh user@example.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/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/' });