Docker 部署 Nginx：前端部署路径与 nginx.conf 配置详解

原创于 2025-06-13 11:20:25 发布 · 1.2k 阅读

26 ·

CC 4.0 BY-SA版权

文章标签：

#docker #nginx #前端

Nginx 同时被 2 个专栏收录

5 篇文章

订阅专栏

Docker

3 篇文章

订阅专栏

文章目录

在现代 Web 开发中，使用 Docker 部署 Nginx 是非常常见的一种方式。尤其是当我们需要部署一个静态前端项目（如 Vue、React、Angular 打包后的 dist 文件）时，了解如何正确配置和挂载文件是至关重要的。

本文将详细介绍：

前端项目应该放在哪里？
nginx.conf 的位置以及如何自定义？
启动容器时如何指定挂载路径？
已经运行的容器如何查看挂载路径？

一、前端部署文件应该放在哪？

Nginx 默认的网站根目录是：

/usr/share/nginx/html

这是容器内部的路径。如果你要部署一个前端应用，比如打包后的 dist/ 目录，你应该把这个目录的内容放到这个路径下。

推荐做法：使用 `-v` 挂载本地目录

你可以在启动容器时通过 -v 参数将本地的 dist 目录挂载到容器内的 /usr/share/nginx/html，例如：

docker run -d \
  --name mynginx \
  -p 80:80 \
  -v $(pwd)/dist:/usr/share/nginx/html \
  nginx

$(pwd)/dist: 你本地当前目录下的前端打包文件夹
/usr/share/nginx/html: 容器内默认的网站根目录

这样做的好处是：

修改前端代码后只需重新构建 dist，无需重启或重建镜像
方便调试和维护

二、nginx.conf 配置文件的位置及修改方式

Nginx 的主配置文件默认位于：

/etc/nginx/nginx.conf

此外，站点级别的配置一般放在：

/etc/nginx/conf.d/

你可以根据需要添加多个 .conf 文件来管理不同的虚拟主机。

自定义 nginx.conf

如果你想使用自己的配置文件，可以通过 -v 挂载：

docker run -d \
  --name mynginx \
  -p 80:80 \
  -v $(pwd)/dist:/usr/share/nginx/html \
  -v $(pwd)/nginx.conf:/etc/nginx/nginx.conf \
  nginx

这样就可以用你自己写的 nginx.conf 替换默认配置。

使用 conf.d 管理多个站点

你还可以挂载整个 conf.d 目录，方便管理多个站点：

docker run -d \
  --name mynginx \
  -p 80:80 \
  -v $(pwd)/dist:/usr/share/nginx/html \
  -v $(pwd)/conf.d:/etc/nginx/conf.d \
  nginx

然后在宿主机的 conf.d/ 下创建多个 .conf 文件，例如：

conf.d/
├── default.conf
├── admin.conf
└── api.conf

三、启动容器时怎么指定映射路径？

Docker 提供了 -v 参数用于挂载卷（Volume），基本格式为：

-v [宿主机路径]:[容器路径]

示例完整命令：

docker run -d \
  --name mynginx \
  -p 80:80 \
  -v $(pwd)/dist:/usr/share/nginx/html \
  -v $(pwd)/nginx.conf:/etc/nginx/nginx.conf \
  -v $(pwd)/conf.d:/etc/nginx/conf.d \
  nginx

该命令实现了：

将本地 dist/ 挂载为网站根目录
使用本地 nginx.conf 替代默认配置
挂载 conf.d 目录以支持多站点配置

四、已经运行的容器如何查看挂载路径？

如果你已经运行了一个 Nginx 容器，想查看它挂载了哪些路径，可以使用以下方法：

方法一：使用 `docker inspect` 查看挂载信息

docker inspect mynginx

查找 "Mounts" 字段，会显示类似如下内容：

"Mounts": [
    {
        "Source": "/Users/yourname/myproject/dist",
        "Destination": "/usr/share/nginx/html",
        "Driver": "local",
        "Mode": "z",
        "RW": true,
        ...
    }
]

Source 是宿主机路径，Destination 是容器路径

在这里插入图片描述

方法二：进入容器查看文件路径

docker exec -it mynginx ls /usr/share/nginx/html

这会列出你挂载的前端文件是否生效。

也可以查看配置文件是否存在：

docker exec -it mynginx cat /etc/nginx/nginx.conf

方法三：检查当前使用的配置文件

docker exec -it mynginx nginx -t

输出示例：

nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
nginx: configuration file /etc/nginx/nginx.conf test is successful

这说明当前使用的是 /etc/nginx/nginx.conf

五、小技巧：快速验证部署是否成功

你可以使用 curl 来测试页面内容：

curl http://localhost

如果返回的是你的前端 HTML 内容，说明部署成功！

总结

问题	解答
前端部署应该放哪？	放在 `/usr/share/nginx/html`，推荐使用 `-v` 挂载
`nginx.conf` 在哪？	默认路径是 `/etc/nginx/nginx.conf`，可挂载替换
启动时怎么指定挂载？	使用 `-v 宿主机路径:容器路径` 参数
已运行的容器怎么查挂载？	使用 `docker inspect` 查看 `Mounts` 字段
如何确认配置是否生效？	`docker exec -it nginx_container nginx -t`
如何查看日志？	`docker exec -it nginx_container cat /var/log/nginx/error.log`