Docker中部署Nginx托管静态资源有三种方式：1. 挂载卷快速启动（开发测试）；2. 自定义nginx.conf支持SPA路由；3. Dockerfile构建定制镜像（交付/CI/CD）；4. 反向代理实现多项目共存。
在Docker中部署Nginx托管静态资源，核心是让容器既能稳定运行服务，又能快速、准确地响应对HTML、CSS、JS、图片等文件的请求。关键不在于堆砌命令，而在于路径映射清晰、配置轻量可靠、启动方式贴合实际场景。
用挂载卷方式快速启动（适合开发与测试）
这是最常用也最灵活的方式，无需构建镜像，直接复用官方nginx镜像，把本地静态文件夹挂载进容器指定位置：
- 确保你的静态文件（如 dist/、public/ 或自定义目录）已存在，例如：
/home/user/my-app/dist - 运行命令，将该目录挂载到Nginx默认根目录：
docker run -d --name my-static-site -p 8080:80 -v /home/user/my-app/dist:/usr/share/nginx/html:ro nginx -
:ro表示只读挂载，提升安全性；-p 8080:80把宿主机8080端口映射到容器80端口，避免占用系统80端口 - 访问
http://localhost:8080即可看到首页，Nginx会自动查找index.html或index.htm
用自定义配置支持单页应用（SPA）路由
Vue、React 等前端框架生成的 SPA 应用依赖 HTML5 History API，直接访问子路径（如 /about）会返回 404。需要 Nginx 配置 fallback：
- 新建一个
nginx.conf文件，重点修改location /块：location / {<br> root /usr/share/nginx/html;<br> index index.html;<br> try_files $uri $uri/ /index.html;<br>} - 启动时同时挂载配置和静态文件：
docker run -d --name spa-site -p 3000:80 \<br> -v $(pwd)/dist:/usr/share/nginx/html:ro \<br> -v $(pwd)/nginx.conf:/etc/nginx/nginx.conf:ro \<br> nginx
- 这样所有未匹配到真实文件的请求，都会回退到
index.html，由前端路由接管
通过 Dockerfile 构建定制镜像（适合交付与CI/CD）
当需要版本固化、环境统一或集成进自动化流程时，推荐构建专属镜像：
- 准备一个干净的
Dockerfile：FROM nginx:alpine<br>COPY nginx.conf /etc/nginx/nginx.conf<br>COPY dist/ /usr/share/nginx/html/
- 确保
dist/是已构建好的前端产物目录（如npm run build输出） - 构建并打标签：
docker build -t my-frontend:v1 . - 运行：
docker run -d --name prod-site -p 80:80 my-frontend:v1 - 镜像内含全部静态内容和配置，不依赖宿主机路径，迁移和部署更可靠
多项目共存时用反向代理统一入口
一个服务器托管多个前端项目（如 admin、docs、landing），可通过 Nginx 反向代理按路径区分：
- 在宿主机创建
/etc/nginx/conf.d/admin.conf：location /admin {<br> alias /var/www/admin/;<br> index index.html;<br> try_files $uri $uri/ /admin/index.html;<br>} - 启动容器时挂载整个 conf.d 和各项目目录：
docker run -d --name multi-site -p 80:80 \<br> -v /host/conf.d:/etc/nginx/conf.d:ro \<br> -v /host/admin:/var/www/admin:ro \<br> -v /host/docs:/var/www/docs:ro \<br> nginx
- 访问
http://localhost/admin和http://localhost/docs即可分别加载不同项目
