前端部署：从开发到生产的关键环节

前端部署：从开发到生产的关键环节

常见误区

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

'我只负责写代码，部署交给运维'——结果部署失败，互相甩锅； '我直接把文件上传到服务器'——结果更新不及时，缓存问题频发； '我用 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 流程

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 容器化

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 配置

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 优化

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]'
      }
    }
  },
  base: 'https://cdn.example.com/'
});

核心建议

这才是规范的前端部署流程。使用 CI/CD、Docker、CDN 等现代化工具，而非简单地手动上传文件。

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

前端开发者应主动承担部署责任。

总结

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

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