nginx 在 docker 中提供的样式和图像未能正常显示

从现在开始，努力学习吧！本文《nginx 在 docker 中提供的样式和图像未能正常显示》主要讲解了等等相关知识点，我会在golang学习网中持续更新相关的系列文章，欢迎大家关注并积极留言建议。下面就先一起来看一下本篇正文内容吧，希望能帮到你！

我有一个 golang Web 应用程序，我决定在它前面使用 Nginx 来提供静态文件，并将其用作我的 Web 应用程序的反向代理。

Web 应用程序的 Dockerfile：

FROM golang:1.21.1

WORKDIR /app

COPY go.mod go.sum ./

RUN go mod download && go mod verify

COPY . ./

RUN go build -o ./bin/site ./cmd/site/main.go

CMD ["./bin/site"]

Docker 撰写文件：

version: '3'

services:
  nginx:
    image: nginx:1.25.2
    restart: always
    ports:
      - "80:80"
    volumes:
      - "./nginx.conf:/etc/nginx/nginx.conf:ro"
      - "./site/assets/:/app/assets/"

  site:
    build: ./site
    container_name: tmp-site
    restart: always
    volumes:
      - "./site/views:/app/views"

和 nginx 配置：

events {
    worker_connections 1024;
}

http {

    server {
        listen 80;
        server_name tmp.loc www.tmp.loc;

        location ~* \.(jpg|jpeg|png|gif|ico|css|js|html|svg)$ {
            root /app/assets/;

            expires max;
            access_log off;
        }

        location / {
            proxy_pass          http://tmp-site:5555;
            proxy_set_header    X-Forwarded-For      $proxy_add_x_forwarded_for;
            proxy_set_header    Host                 $host;
            proxy_set_header    X-Real-IP            $remote_addr;
        }
    }
}

在网页上我有两张图片，一张是png，一张是svg，css文件很简单，只包含background-color: lightblue作为body标签，还有js文件，它只是控制台记录字符串“Loaded!” 。使用 docker compose 启动容器后，我遇到以下问题：

1. 静态文件是随机提供的，例如png 图像已显示，但 svg 未显示，css 样式未应用于页面，但 javascript 代码执行良好。有趣的是，所有静态文件都根据浏览器的开发工具网络选项卡成功获取，您可以检查其内容，是的，我尝试在没有缓存的情况下重新加载页面，但无济于事。这是什么魔法？
2. 正如您在我的 docker compose 文件中看到的，我为 nginx 和 webapp 设置了卷，对于 nginx，它工作正常，每当我删除一些资产并重新加载页面而不缓存时，都会应用更改，但是当我更改时模板中的文本在页面上不可见，但如果我进入 webapp 的容器并检查模板的内容 - 它已更改，但在页面上它不可见，直到我使用 docker compose 重新启动容器。这里有什么问题吗？

完整代码在这里 - https://github.com/ivnku/tmp

正确答案

1. go Fiber 的 模板 通过 Engine.Reload(true) 提供此功能：

<code>// Reload the templates on each render, good for development
engine.Reload(true) // Optional. Default: false
</code>

1. 静态文件确实由 Nginx 提供，只是没有正确的 MIME 类型。在 nginx.conf 的 http 部分中包含 mime 类型将解决此问题：

http {
    include       /etc/nginx/mime.types;

    server {
        ...
    }
}

理论要掌握，实操不能落！以上关于《nginx 在 docker 中提供的样式和图像未能正常显示》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！