前端部署最佳实践：从开发到生产

使用 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

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

技术总结

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

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

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

核心要点

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

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