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

苏承栈

2026-09-25 • 👁 0人浏览过

使用Docker打包前端静态资源和Nginx，核心是编写Dockerfile将dist文件复制至nginx容器并配置路由；支持单阶段（依赖本地构建）和多阶段（内置Node构建、镜像更小）两种方式。直接用 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

，内容如下：

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 Sandbox 创建并管理 Docker 沙箱虚拟机环境以安全执行代理。适用于运行不受信任代码、探索包或隔离代理工作负载。支持 Claude、Codex、Copilot、Gemini 和 Kiro 代理，并提供网络代理控制。下载立即学习 “ 前端免费学习笔记（深入） ”；

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
运行阶段：只保留 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;"]

最终镜像不含 Node、源码、node_modules，通常能缩小 70% 以上体积构建环境与运行环境彻底隔离，更符合生产规范

运行阶段：只保留 Nginx 和静态文件

相关文章