Rumah  >  Artikel  >  pembangunan bahagian belakang  >  Gaya dan imej yang disediakan oleh nginx dalam docker tidak berfungsi pada halaman

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

王林
王林ke hadapan
2024-02-09 08:00:10707semak imbas

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"]

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"

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;
        }
    }
}

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>
  1. 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 {
        ...
    }
}

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!

Kenyataan:
Artikel ini dikembalikan pada:stackoverflow.com. Jika ada pelanggaran, sila hubungi admin@php.cn Padam