如何利用Docker构建包含前端静态资源与Nginx的一体化镜像-Docker-PHP中文网

使用docker打包前端静态资源和nginx，核心是编写dockerfile将dist文件复制至nginx容器并配置路由；支持单阶段（依赖本地构建）和多阶段（内置node构建、镜像更小）两种方式。

如何利用docker构建包含前端静态资源与nginx的一体化镜像

直接用 Docker 打包前端静态资源和 Nginx，核心就是写好一个 Dockerfile，让 Nginx 容器启动时就自带你的 HTML、JS、CSS 等文件。整个过程不依赖本地 Node 环境，也不需要手动上传文件，镜像构建完就能一键运行。

准备前端构建产物

确保你已有可部署的静态资源目录（通常是 dist 或 build）。若还没生成：

进入项目根目录，执行 npm install（如依赖未安装）
运行构建命令：npm run build（Vue/React/Vite 通用）或 yarn generate（Nuxt 静态站点）
确认产出目录存在，比如 ./dist 下有 index.html 和配套资源

编写最小可用 Dockerfile

在项目根目录（与 package.json 同级）新建文件 Dockerfile，内容如下：

Learn Docker

通过 LabEx 容器基础课程和镜像/编排实验学习 Docker。Docker 课程和实验通过 LabEx MCP 获取，返回 labex.io 链接以继续。

下载

FROM nginx:alpine
COPY dist/ /usr/share/nginx/html/
COPY nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

nginx:alpine 是轻量、安全的基础镜像，适合生产使用
COPY dist/ ... 把本地构建好的文件复制进容器的默认 Web 目录
nginx.conf 是可选但推荐的：解决 SPA 路由刷新 404（加 try_files $uri $uri/ /index.html;）、自定义监听端口或 gzip 压缩等

构建并运行镜像

终端执行以下命令：

docker build -t my-frontend . —— 构建镜像，. 表示当前目录
docker run -d -p 8080:80 --name frontend-app my-frontend —— 启动容器，把宿主机 8080 端口映射到容器 80 端口
浏览器访问 http://localhost:8080 即可看到页面

进阶：多阶段构建减小镜像体积

如果希望构建过程也由 Docker 完成（不依赖本地 npm），可改用多阶段写法：

# 构建阶段：用 Node 环境打包
FROM node:16-alpine AS builder
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build
<h1>运行阶段：只保留 Nginx 和静态文件</h1><p>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;"]</p>