前端部署实战:打通开发与生产最后一公里
常见误区
很多开发者认为'我只负责写代码,部署交给运维',结果往往是互相甩锅。直接上传文件到服务器容易导致更新不及时和缓存问题,而使用 FTP 则可能引发文件丢失甚至网站崩溃。
实际上,前端部署是前端开发的重要环节。我们需要关注快速上线、环境一致性、回滚能力以及监控日志。
手动部署的痛点
传统的手动方式风险较高。例如本地构建后,通过 FTP 上传,再 SSH 清除缓存并重启服务,最后检查链接。这一过程不仅繁琐,而且极易出错。
# 示例:手动部署流程(不推荐)
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
自动化部署方案
现代前端工程化要求我们引入 CI/CD 工具。以 GitHub Actions 为例,我们可以定义工作流,在推送到主分支时自动触发构建和测试。
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'
- name: Install dependencies
run: npm ci
- name:

