前端部署：别让你的应用在上线后掉链子
毒舌时刻
这部署流程写得跟绕口令似的，谁能记得住？
各位前端同行，咱们今天聊聊前端部署。别告诉我你还在手动上传文件到服务器，那感觉就像在石器时代用石头砸坚果——能用，但效率低得可怜。
为什么你需要自动化部署
最近看到一个项目，部署时需要手动复制文件到服务器，每次部署都要花上几个小时。我就想问：你是在做部署还是在做体力活？
反面教材
# 反面教材：手动部署 # 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 Actions # .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 部署
# 正确姿势：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 [, , ] # dockercompose.yml version: '' services: frontend: build: . ports: restart: always
