前端自动化部署最佳实践
传统手动部署的局限性
手动上传文件到服务器效率低下,容易出错。典型的错误流程包括构建、压缩、SCP 上传、SSH 登录、解压及清理,耗时且繁琐。
# 反面教材:手动部署
npm run build
zip -r build.zip build
scp build.zip user@server:/var/www/html
ssh user@server
unzip build.zip
mv build/* /var/www/html
rm -rf build build.zip
推荐方案
1. CI/CD 流水线
使用 GitHub Actions 实现自动化构建与部署。
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

