前端部署与运维 (Deployment & DevOps)
代码构建完成只是第一步，如何将其稳定、高效地交付给用户是工程化的最后一公里。
1. 静态资源部署策略
1.1 Web Server (Nginx)
最常见的反向代理与静态资源服务器。
- 反向代理: 解决跨域，转发 API 请求。
- Gzip/Brotli: 开启压缩，减小传输体积。
- Cache-Control: 配置强缓存 (Hash 文件主要) 和协商缓存 (index.html)。
- SPA 路由重定向: 所有 404 请求指向
index.html(try_files)。
1.2 CDN (内容分发网络)
将静态资源 (.js, .css, 图片) 推送到离用户最近的边缘节点，大幅降低延迟。
- Public Path: 构建时需修改资源的引用路径指向 CDN 域名。
2. 容器化 (Docker)
解决“在我的机器上能跑”的问题。保证开发、测试、生产环境一致。
Dockerfile 示例 (多阶段构建)
dockerfile
# Build Stage
FROM node:18-alpine as builder
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
RUN npm run build
# Production Stage (Nginx)
FROM nginx:alpine
COPY --from=builder /app/dist /usr/share/nginx/html
COPY nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]3. 部署模式
3.1 蓝绿部署 (Blue-Green Deployment)
同时也运行两个版本的生产环境（蓝/绿）。通过切换负载均衡的流量指向，实现零停机部署，并在出问题时瞬间回滚。
3.2 滚动更新 (Rolling Update)
K8s 默认策略。分批次替换 Pod，旧版本逐步下线，新版本逐步上线。
3.3 灰度发布 / 金丝雀发布 (Canary Release)
只让一小部分用户（如 5%）流量访问新版本，观察错误率和指标，确认无误后全量开放。
4. 现代部署平台 (Serverless / Edge)
Vercel / Netlify
- 特点: Git 提交即部署 (Push to Deploy)。
- 优势: 自动配置 CDN、HTTPS、CI/CD，支持 Serverless Functions。
- 场景: 静态网站、Next.js/Nuxt.js 全栈应用。
5. 监控与告警
前端部署上线后，需要监控真实用户体验。
- Sentry: 错误日志监控 (JS Error, API Failures)。
- Performance Monitor: 性能指标监控 (FCP, LCP, CLS)。