首页/云/Docker 容器速查/完整示例:前端构建 + Nginx 运行镜像
镜像与构建107 条

完整示例:前端构建 + Nginx 运行镜像

前端静态站的常见两段式 Dockerfile:Node 构建产物,Nginx 提供静态服务;把配置、健康检查与启动命令一并固化。

Docker 容器速查云更新于 2026-10-12

完整示例

完整示例
FROM node:20-alpine AS build
WORKDIR /site
COPY package*.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;"]
nginx 官方镜像默认已带 daemon off 的 CMD;自定义 CMD 时保留它,否则容器启动即退出(nginx 后台化后前台无进程)。

易错点

  • SPA 刷新 404 需要在 default.conf 里配 try_files $uri /index.html,光拷产物不够
  • 构建产物目录名(dist/build/out)随框架不同,COPY 路径要与实际产出一致

数据来源与参考

  • Docker 官方文档:Multi-stage builds + nginx 镜像说明(docs.docker.com)
​‌‌​​‌​​​‌‌​‌‌‌‌​‌‌​​​‌‌​‌‌‌​​‌‌​​‌​‌‌‌​​‌‌‌​​​‌​‌‌​‌​​‌​‌‌‌​​​‌​‌‌​‌​​‌​‌‌​​​‌‌​‌‌‌​‌​​​‌‌​‌‌‌‌​​‌​‌‌‌​​‌‌​​​‌‌​‌‌​‌‌‌‌​‌‌​‌‌​‌