你是不是还在：改完代码，手动打包，然后打开FileZilla，拖拽文件到服务器，再刷新CDN缓存，等5分钟……然后同事说“你刚才上传覆盖了我的代码”？今天我们来搭建一条前端工程化流水线——从代码提交到自动部署，全程一键触发。以后你只需要
git push，剩下的交给机器。
前言
想象你开了一家面馆。以前：客人点单 → 你写单子 → 跑去厨房喊“一碗牛肉面” → 厨师做 → 你端过去。一天下来腿都跑断。后来你装了“点菜系统”：客人手机下单 → 厨房屏幕自动显示 → 厨师做好 → 机器人送餐。你只需要坐在收银台数钱。
前端工程化就是这个“点菜系统”。它把重复、易错的手工操作变成自动化流程：代码检查、打包、测试、部署、通知……一条龙。今天我们就来搭一条基础但完整的流水线，让你摆脱手动FTP的原始时代。
一、工程化到底包含啥？
简单说：用工具和流程，让开发、构建、部署、运维自动化、规范化。
核心环节：
- 代码规范：ESLint + Prettier + Husky，不让烂代码进仓库。
- 构建打包：Vite/Webpack，生产优化。
- 自动化测试：单元测试、E2E测试（可选）。
- 持续集成（CI）：代码推送到Git，自动运行检查、打包。
- 持续部署（CD）：打包后自动上传服务器、刷新CDN。
- 监控报警：Sentry、性能监控。
我们今天重点做CI/CD部分，因为这是让你“一键发布”的关键。
二、基础版：用Git Hooks做本地自动化
先不说服务器，在本地就能省掉很多步骤。
1. Husky + lint-staged：提交前自动格式化
npm install -D husky lint-staged
npx husky install
npx husky add .husky/pre-commit "npx lint-staged"
在package.json里配置：
"lint-staged": {
"*.{js,ts,jsx,tsx}": ["eslint --fix", "prettier --write"],
"*.{css,scss}": ["prettier --write"]
}
现在每次git commit，它会自动格式化你改动的文件，保证代码风格统一。
2. 提交信息规范（Commitlint）
npm install -D @commitlint/cli @commitlint/config-conventional
npx husky add .husky/commit-msg "npx --no -- commitlint --edit $1"
以后提交必须写成feat: 添加登录功能、fix: 修复按钮样式，团队看历史一目了然。
三、进阶版：用GitHub Actions做服务器自动部署
这是核心：当你git push到主分支，GitHub自动拉取代码、安装依赖、打包、上传到服务器。
步骤1：准备服务器
你需要一台服务器（阿里云、腾讯云等），安装好Nginx，并且能通过SSH密钥登录。
步骤2：创建GitHub Actions工作流
在项目根目录创建.github/workflows/deploy.yml：
name: Deploy to Server
on:
push:
branches: [ main ] # 当推送到main分支时触发
jobs:
deploy:
runs-on: ubuntu-latest
steps:
- name: Checkout代码
uses: actions/checkout@v3
- name: 安装Node.js
uses: actions/setup-node@v3
with:
node-version: 18
- name: 安装依赖并打包
run: |
npm ci
npm run build
- name: 上传到服务器（通过rsync）
uses: easingthemes/ssh-deploy@main
env:
SSH_PRIVATE_KEY: ${{ secrets.SERVER_SSH_KEY }}
ARGS: "-rlgoDzvc -i --delete"
SOURCE: "dist/"
REMOTE_HOST: ${{ secrets.REMOTE_HOST }}
REMOTE_USER: ${{ secrets.REMOTE_USER }}
TARGET: ${{ secrets.REMOTE_TARGET }} # 比如 /var/www/html
步骤3：配置GitHub Secrets
在GitHub仓库 → Settings → Secrets and variables → Actions 里添加：
SERVER_SSH_KEY：服务器的私钥（注意是私钥，不是公钥）。REMOTE_HOST：服务器IP或域名。REMOTE_USER：登录用户名（如root或ubuntu）。REMOTE_TARGET：服务器上的部署路径（如/var/www/myapp）。
步骤4：服务器上配置Nginx
把Nginx根目录指向/var/www/myapp。之后每次git push main，GitHub自动打包并同步到服务器，你甚至不用登录服务器。
四、更现代：用Docker + 云平台
如果不想自己配服务器，可以用Vercel、Netlify（前端静态托管），连接你的Git仓库，自动部署，免费。或者用阿里云OSS + CDN，配合GitHub Actions上传。
Docker方式：把项目打包成镜像，推送到阿里云容器镜像服务，然后服务器拉取运行。适合Node后端或需要复杂环境的项目。
五、测试自动化：CI里跑测试
在打包之前，可以先跑一遍单元测试，防止烂代码上线。
- name: Run tests
run: npm test
如果测试失败，流程中断，不会部署。
六、通知：部署成功发消息到钉钉/飞书/企业微信
在最后一步加上Webhook通知：
- name: Send DingTalk notification
run: |
curl -X POST -H "Content-Type: application/json" \
-d '{"msgtype":"text","text":{"content":"部署成功！"}}' \
${{ secrets.DINGTALK_WEBHOOK }}
这样每次部署成功，群里自动收到消息。
七、常见坑点
- 打包产物路径不对：确保
npm run build输出到dist/或build/，和Action里的SOURCE一致。 - SSH权限：私钥不要泄露，不要提交到仓库。服务器公钥要加到
~/.ssh/authorized_keys。 - 环境变量：前端构建时需要API地址等变量，在GitHub Secrets里存，构建时注入。
八、总结：从手工到自动，你只差这套流程
- 本地：Husky + lint-staged 保证代码质量。
- 提交规范：Commitlint。
- CI/CD：GitHub Actions + 服务器部署 / Vercel等平台。
- 通知：钉钉/飞书机器人。
做完这些，你以后的工作流变成：git add . → git commit -m "feat: xxx" → git push。然后去喝杯咖啡，回来页面已经上线。再也不用打开FTP，再也不用担心覆盖同事代码。前端工程化，就是让你把时间花在写代码上，而不是“搬砖”。
