docker 中 nginx 提供的樣式和圖像在頁面上不起作用

php小編柚子發現在使用docker中的nginx時，可能會遇到樣式和映像無法在頁面中正確顯示的問題。這可能是由於配置問題或路徑錯誤導致的。在解決這個問題之前，我們需要仔細檢查nginx的設定檔和檔案路徑，確保正確設定和引用。接下來，我們將探討一些常見的解決方法，幫助您解決這個煩惱的問題。

問題內容

我有一個 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 {
        ...
    }
}

以上是docker 中 nginx 提供的樣式和圖像在頁面上不起作用的詳細內容。更多資訊請關注PHP中文網其他相關文章！