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

注意这里使用了 secrets 管理敏感信息，不要硬编码 Token。

2. 容器化部署

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;"]

3. Nginx 配置要点

单页应用需要特殊的路由处理，否则刷新页面会报 404。

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 on;
  gzip_types text/plain text/css application/json application/javascript;
}

开启 Gzip 压缩和静态资源缓存能显著提升加载速度。

4. 构建优化与 CDN

配合 Vite 生成带哈希的文件名，便于浏览器缓存管理。

// 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：利用 GitHub Actions 或 GitLab CI 自动化流程
• Docker：容器化确保环境一致性
• CDN：分发网络提高访问速度
• 缓存策略：合理设置缓存减少重复请求
• 监控与日志：实时了解状态，快速定位问题
• 回滚机制：准备方案以便快速恢复
• 环境变量：管理不同环境的配置

让代码安全、快速地到达用户手中，这才是前端开发的完整闭环。