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

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

引言

传统的部署流程往往繁琐且容易出错。

各位前端同行，咱们今天聊聊前端部署。手动上传文件到服务器效率低下，现代开发应追求自动化。

为什么需要自动化部署

最近看到一个项目，部署时需要手动复制文件到服务器，每次部署都要花上几个小时。自动化能显著提升效率。

手动部署的弊端

# 1. 构建项目
npm run build
# 2. 压缩文件
zip -r build.zip build
# 3. 上传到服务器
scp build.zip user@server:/var/www/html
# 4. 登录服务器
ssh user@server
# 5. 解压文件
unzip build.zip
# 6. 移动文件
mv build/* /var/www/html
# 7. 清理文件
rm -rf build build.zip

点评：此流程累人且慢。

正确姿势

1. CI/CD 流水线

# .github/workflows/deploy.yml
name: Deploy
on:
  push:
    branches: [ main ]
jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: '16'
      - run: npm install
      - run: npm run build
      - name: Deploy to GitHub Pages
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./build

2. Docker 部署

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

# docker-compose.yml
version: '3'
services:
  frontend:
    build: .
    ports:
      - "80:80"
    restart: always

3. 环境配置

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

// 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();
}

4. 缓存策略

# nginx.conf
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;
  }
}

总结：这才是前端部署的正确方式，自动化流程高效可靠。