前端部署:从开发到生产的最后一公里
常见误区
很多前端同学认为'我只负责写代码,部署交给运维'。结果往往是互相甩锅,更新不及时,缓存问题频发。
其实,前端部署是前端开发的重要环节。手动上传 FTP 不仅容易丢文件,还可能导致网站崩溃。
为什么要重视部署
- 快速上线:自动化部署减少人工操作
- 环境一致性:确保开发、测试、生产环境一致
- 回滚能力:出现问题时快速回滚
- 监控和日志:实时监控状态和错误
手动部署的隐患
# 本地构建
npm run build
# 手动上传文件
ftp ftp://example.com > put -r dist/*
# 清除缓存并替换
ssh [email protected] > rm -rf /var/www/html/* > cp -r dist/* /var/www/html/
# 重启服务
systemctl restart nginx
# 检查
curl https://example.com
这种方式效率低且风险高,一旦出错很难追踪。
现代化部署方案
1. CI/CD 自动化
使用 GitHub Actions 可以自动触发构建和部署。当代码推送到 main 分支时,流水线会自动执行。
name: Deploy to Production
on:
push:
branches: [main]
jobs:
build:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- name: Setup Node.js
uses: actions/setup-node@v3
with:
node-version: '18'
cache: 'npm'

