完整示例：前端构建加 Nginx
前端静态站的常见两段式写法：构建阶段用 Node 编译出静态产物，运行阶段用 Nginx 提供服务。配置文件、健康检查与启动命令一并固化进镜像，部署时只依赖镜像本身，环境差异被压到最小。
基本信息
| 阶段划分 | Node 构建阶段与 Nginx 运行阶段 |
|---|---|
| 配置注入 | 把 nginx 配置复制到 conf.d 目录 |
| 端口 | EXPOSE 80，是否映射到宿主由运行时决定 |
| 健康检查 | 用镜像内可用的工具探测本地首页 |
| 启动命令 | 保留 nginx 前台运行，否则容器启动即退出 |
典型使用场景
- 前端单页应用镜像化：产物与运行环境一起打包，部署只需拉镜像
- 统一多环境配置：nginx 配置随镜像版本管理，减少现场手工改动
- 排查单页应用刷新 404：确认配置里有前端路由回退规则
- 排查容器启动即退出：确认启动命令没有把 nginx 切成后台模式
- 为静态资源设置缓存策略：区分入口文件与带指纹的资源文件
- 与反向代理配合时统一上游地址与超时设置，减少环境间差异
示例
示例
FROM node:20-alpine AS build
WORKDIR /site
COPY package.json package-lock.json ./
RUN npm ci
COPY . .
RUN npm run build
FROM nginx:1.27-alpine
COPY nginx/default.conf /etc/nginx/conf.d/default.conf
COPY --from=build /site/dist /usr/share/nginx/html
EXPOSE 80
HEALTHCHECK --interval=30s --timeout=3s \
CMD wget -qO- http://localhost/ >/dev/null || exit 1
CMD ["nginx", "-g", "daemon off;"]
# default.conf 里要有前端路由回退，单页应用刷新才不报 404
# location / { try_files $uri $uri/ /index.html; }各部分的分工
| 部分 | 职责 | 产物去向 |
|---|---|---|
| build 阶段 | 装依赖并编译前端 | /site/dist |
| runtime 阶段 | 提供静态文件服务 | /usr/share/nginx/html |
| 运行配置 | nginx 配置与缓存策略 | /etc/nginx/conf.d/ |
| 健康检查 | 探测本地首页 | 容器健康状态 |
| 启动命令 | 前台运行主进程 | 容器主进程 |
nginx 官方镜像默认已经带前台运行的启动命令；自定义 CMD 时要保留这一点，否则 nginx 转入后台后容器前台没有进程，启动即退出。
构建产物目录名随框架不同（dist、build、out），复制路径要与实际产出一致，否则镜像里的站点目录是空的。
单页应用刷新 404 靠 nginx 配置里的回退规则解决，只复制产物并不会自动获得这个行为。