前端部署：从开发到生产的全流程指南

# 正确的做法：使用 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]'
      }
    }
  },
  // 配置 CDN
  base: 'https://cdn.example.com/'
});

核心观点

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

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

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

总结

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

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