前端项目自动化部署流程与最佳实践

2. Docker 部署

通过容器化确保环境一致性。

FROM node:16-alpine AS build
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build

FROM nginx:alpine
COPY --from=build /app/build /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

version: '3'
services:
  frontend:
    build: .
    ports:
      - "80:80"
    restart: always

3. 环境配置

区分不同环境配置，避免硬编码。

// src/api.js
const API_URL = process.env.REACT_APP_API_URL;
export async function fetchData() {
  const response = await fetch(`${API_URL}/data`);
  return response.json();
}

.env 文件示例：

NODE_ENV=production
REACT_APP_API_URL=https://api.example.com
REACT_APP_WEB_URL=https://example.com

4. 缓存策略

配置 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, no-transform";
  }

  # API 代理
  location /api {
    proxy_pass https://api.example.com;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
  }
}

通过上述方案，可实现高效、可靠的自动化部署流程。