前端进阶 · 第 7 章部署与运维：把网站推上线

布

第 7 章　部署与运维：把网站推上线

Vercel / Nginx / Docker / CI-CD

代码写完了，怎么让全世界访问？静态文件扔 CDN，前后端框架用 Vercel，自托管用 Nginx，要环境隔离用 Docker。这一章把主流路线过一遍。

静态部署：Vercel / Netlify / GitHub Pages

线Vercel 是前端部署的首选

把 GitHub 仓库一连，git push 自动跑 build、自动部署、自动 HTTPS、全球 CDN 边缘节点。免费额度够个人用。Next.js 是 Vercel 亲儿子，部署零配置。

同类：Netlify（类似）、Cloudflare Pages（国内访问快）、GitHub Pages（免费但只支持纯静态）。

Nginx 自托管

公司内网、国内服务器、要自己控制，就用 Nginx。它是最流行的 Web 服务器。

/etc/nginx/conf.d/my-app.conf 关键配置

server {
  listen 80;
  server_name example.com;

  root /var/www/my-app/dist;   # 前端静态文件
  index index.html;

  # SPA 路由：所有前端路径都回退到 index.html
  location / {
    try_files $uri $uri/ /index.html;
  }

  # 反向代理后端 API
  location /api/ {
    proxy_pass http://127.0.0.1:8080;
  }

  # 开 gzip 压缩
  gzip on;
  gzip_types text/css application/javascript application/json;
}

HTTPS 用 Let's Encrypt + certbot 免费签证书，自动续期。HTTP/2 现在默认开。

Docker 容器化

多阶段构建：node 编译 → nginx 跑静态文件

# 构建阶段
FROM node:22-alpine AS build
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
RUN npm run build

# 运行阶段：只留 nginx 和 dist
FROM nginx:alpine
COPY --from=build /app/dist /usr/share/nginx/html
COPY nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 80

CI/CD：GitHub Actions

推代码到 main 分支后，自动跑 lint → test → build → 部署。工作流文件放在 .github/workflows/deploy.yml。环境变量和密钥放在仓库 Settings → Secrets，不要提交进 Git。

监控与回滚

错误监控：Sentry，前端报错实时告警到群。
可用性监控：UptimeRobot，网站挂了邮件通知。
访问统计：Google Analytics / Plausible（隐私友好）。
回滚：每次部署保留上一版镜像，出问题一键切回。

部署平台怎么选

平台	适合
Vercel	Next.js 最佳搭档，Git 一连自动部署、预览部署、环境变量、Serverless/Edge、ISR、Analytics 全免配。
Netlify	静态 + Serverless/Edge Functions，表单/身份/拆分测试。
Cloudflare Pages	静态 + Workers，R2/KV/D1，全球 CDN，免费额度大，国内访问尚可。
GitHub Pages	纯静态，免费，文档/个人博客。
自托管 Nginx	公司内网/国内服务器/要自己控制。

Nginx 自托管关键配置

SPA 回退 + 反向代理 + gzip + HTTPS

server {
  listen 443 ssl http2;
  server_name example.com;
  root /var/www/my-app/dist;
  index index.html;

  # 静态资源缓存：hash 文件名强缓存一年
  location ~* \.(js|css|png|jpg|woff2)$ {
    expires 1y;
    add_header Cache-Control "public, immutable";
  }

  # SPA 路由：刷新 /users 不 404 的关键
  location / {
    try_files $uri $uri/ /index.html;
  }

  # 反向代理后端，绕开 CORS
  location /api/ {
    proxy_pass http://127.0.0.1:8080;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
  }

  gzip on; gzip_types text/css application/javascript application/json;
}

Docker + CI/CD + 监控运维

Docker 多阶段：node:alpine 构建 → nginx:alpine 跑静态，镜像小。配 .dockerignore。
PM2：Node 服务进程管理，集群模式、日志、自动重启。pm2 start ecosystem.config.js。
CI/CD：GitHub Actions push 自动 lint→test→build→部署，密钥放 Secrets。
HTTPS：Let's Encrypt + certbot 免费签证书自动续期，HTTP 强制跳 HTTPS，开 HSTS。
监控：Sentry 错误 + Source Map、UptimeRobot 可用性、web-vitals 性能上报。
灰度：特性开关/灰度比例/A-B 测试/蓝绿部署/一键回滚。

本章面试题

Q1. 为什么 SPA 部署后刷新 /users 会 404？

看答案

history 模式路由是前端路由，服务器收到 /users 找不到对应文件。Nginx 配 try_files $uri /index.html 把所有路径回退到入口 HTML，前端路由接管。

Q2. Docker 多阶段构建好在哪？

看答案

构建阶段装 node 跑 build，运行阶段只拷 dist 到 nginx 镜像，不带 node_modules 和构建工具，镜像更小更安全。

Q3. 静态资源为什么能缓存一年？

看答案

构建产物文件名带 contenthash（如 app.abc123.js），内容变了文件名就变，所以可以设长缓存+immutable，不用担心里程碑更新不生效。

← 上一节：第 6 章性能优化：让页面快到飞起前端进阶 · 总览下一节：第 8 章进阶路线、安全与面试 →

第 7 章 部署与运维：把网站推上线