问题背景
在开发 Web 应用时，经常会使用 Docker 容器作为开发环境。在容器中，我们可能需要运行一个 Nginx 服务器来服务我们的应用程序。但是在有些情况下，Nginx 无法访问我们应用程序所依赖的静态资源，通常表现为在页面上无法加载图片、CSS 或 JavaScript 文件，在浏览器的 Console 中会看到 404 错误。
问题原因
这个问题主要是因为 Nginx 默认的配置文件中没有包含我们应用的静态资源路径。Nginx 默认只服务于自己指定的路径下的文件，而对于其他路径下的文件则会返回 404 错误。
解决方案
解决这个问题的方法有很多，具体根据实际情况而定。下面是一些可能的解决方案。
1. 将静态资源文件放到 Nginx 根目录下
这是解决这个问题最简单的方法。将静态资源文件放置在 Nginx 根目录下，这个路径通常是 /usr/share/nginx/html。将这个路径映射到 Docker 容器中，就可以让 Nginx 访问这些静态资源文件了。
FROM nginx COPY ./static /usr/share/nginx/html
2. 修改 Nginx 配置文件
如果静态资源文件不在 Nginx 根目录下，我们可以通过修改 Nginx 配置文件来让 Nginx 访问这些文件。下面是一个简单的配置文件示例，假设静态资源文件在 /app/static 目录下：
-- -------------------- ---- -------
---- -
------ -
------ ---
----------- ------------
-------- - -
---- -----
----- -----------
-
-------- -------- -
----- -------------
-
-
-这个配置指定了一个根目录的路径，然后将静态资源的路径通过别名映射到 Nginx 中。在这个例子中，如果我们访问 http://example.com/static/style.css，Nginx 将会在 /app/static/style.css 路径下寻找该文件。
3. 使用 Docker Volume
为了让容器中的 Nginx 找到应用程序的静态资源文件，我们可以将应用程序的静态资源文件挂载到 Docker 容器中的一个 Volume 中。这样，容器中的 Nginx 就可以访问这些文件了。
下面是一个简单的示例，假设我们的应用程序的静态资源文件在 /app/static 目录下：
FROM nginx VOLUME ["/app/static"] COPY ./nginx.conf /etc/nginx/nginx.conf
这个 Dockerfile 指定了一个 Volume，然后将应用程序的静态资源文件拷贝到该 Volume 中。Nginx 配置文件中也需要改为使用该 Volume，如下所示：
-- -------------------- ---- -------
---- -
------ -
------ ---
----------- ------------
-------- - -
---- -----
----- -----------
-
-------- -------- -
----- -------------
-
-
-这样，当我们启动这个 Docker 容器时，可以使用 --mount 参数将本地的 /app/static 目录挂载到容器的 /app/static 目录中：
docker run -p 80:80 --mount type=bind,source=$(pwd)/static,target=/app/static my-nginx
这个命令将当前目录中的 static 文件夹挂载到容器的 /app/static 目录中，并启动一个名为 my-nginx 的容器，监听宿主机的 80 端口。
总结
在使用 Docker 容器中的 Nginx 时，有时候会遇到无法访问静态资源的问题。这个问题的原因是因为 Nginx 默认只服务于自己指定的路径下的文件。要解决这个问题，我们可以将静态资源文件放到 Nginx 根目录下，修改 Nginx 配置文件，或使用 Docker Volume 将静态资源文件挂载到容器中。具体方案可以根据实际情况而定。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6517f4be95b1f8cacd019e99