Gaya dan imej yang disediakan oleh nginx dalam docker tidak berfungsi pada halaman

王林
Lepaskan: 2024-02-09 08:00:10
ke hadapan
735 orang telah melayarinya

docker 中 nginx 提供的样式和图像在页面上不起作用

Editor PHP Youzi mendapati bahawa apabila menggunakan nginx dalam docker, anda mungkin menghadapi masalah bahawa gaya dan imej tidak dapat dipaparkan dengan betul pada halaman. Ini mungkin disebabkan oleh isu konfigurasi atau laluan yang salah. Sebelum menyelesaikan masalah ini, kita perlu menyemak dengan teliti fail konfigurasi nginx dan laluan fail untuk memastikan ia disediakan dan dirujuk dengan betul. Seterusnya, kami akan meneroka beberapa penyelesaian biasa untuk membantu anda menyelesaikan masalah yang menjengkelkan ini.

Kandungan soalan

Saya mempunyai aplikasi web golang dan saya memutuskan untuk menggunakan Nginx di hadapannya untuk menyampaikan fail statik dan menggunakannya sebagai proksi terbalik untuk aplikasi web saya.

Fail Docker untuk aplikasi web:

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"]
Salin selepas log masuk

Docker mengarang fail:

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"
Salin selepas log masuk

dan konfigurasi 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;
        }
    }
}
Salin selepas log masuk

Di halaman web saya mempunyai dua imej, satu png dan satu adalah svg, fail css sangat mudah dan hanya mengandungi background-color: lightblue sebagai teg badan, dan fail js, yang hanya log konsol rentetan "Dimuatkan!". Selepas memulakan bekas menggunakan docker compose, saya menghadapi masalah berikut:

  1. Fail statik dihidangkan secara rawak, contohnya imej png dipaparkan tetapi svg tidak, gaya css tidak digunakan pada halaman tetapi kod javascript berfungsi dengan baik. Menariknya, semua fail statik berjaya diambil mengikut tab rangkaian alat dev penyemak imbas, anda boleh memeriksa kandungannya, ya saya cuba memuat semula halaman tanpa caching tetapi tidak berjaya. Apakah jenis sihir ini?
  2. Seperti yang anda lihat dalam fail karang docker saya, saya telah menyediakan volum untuk nginx dan webapp, untuk nginx ia berfungsi dengan baik, setiap kali saya memadam beberapa aset dan memuat semula halaman tanpa caching, perubahan akan digunakan, tetapi Apabila saya menukar teks dalam templat tidak kelihatan pada halaman, tetapi jika saya pergi ke dalam bekas aplikasi web dan memeriksa kandungan templat - ia ditukar, tetapi pada halaman ia tidak kelihatan sehingga saya memulakan semula bekas menggunakan karang docker. Adakah terdapat sesuatu yang salah di sini?

Kod penuh di sini - https://github.com/ivnku/tmp

Penyelesaian

  1. go Fiber's template menyediakan fungsi ini melalui Engine.Reload(true):
<code>// Reload the templates on each render, good for development
engine.Reload(true) // Optional. Default: false
</code>
Salin selepas log masuk
  • Fail statik memang disediakan oleh Nginx, cuma ia tidak mempunyai jenis MIME yang betul. Memasukkan jenis mime dalam bahagian http nginx.conf akan menyelesaikan masalah ini:
  • http {
        include       /etc/nginx/mime.types;
    
        server {
            ...
        }
    }
    Salin selepas log masuk

    Atas ialah kandungan terperinci Gaya dan imej yang disediakan oleh nginx dalam docker tidak berfungsi pada halaman. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

    sumber:stackoverflow.com
    Kenyataan Laman Web ini
    Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
    Tutorial Popular
    Lagi>
    Muat turun terkini
    Lagi>
    kesan web
    Kod sumber laman web
    Bahan laman web
    Templat hujung hadapan
    Tentang kita Penafian Sitemap
    Laman web PHP Cina:Latihan PHP dalam talian kebajikan awam,Bantu pelajar PHP berkembang dengan cepat!