Von Nginx in Docker bereitgestellte Stile und Bilder funktionieren auf der Seite nicht

Der PHP-Editor Youzi hat festgestellt, dass bei der Verwendung von Nginx in Docker das Problem auftreten kann, dass Stile und Bilder nicht korrekt auf der Seite angezeigt werden. Dies kann an einem Konfigurationsproblem oder einem falschen Pfad liegen. Bevor wir dieses Problem lösen, müssen wir die Nginx-Konfigurationsdatei und den Dateipfad sorgfältig überprüfen, um sicherzustellen, dass sie korrekt eingerichtet und referenziert sind. Als Nächstes untersuchen wir einige gängige Lösungen, die Ihnen bei der Lösung dieses lästigen Problems helfen.

Frageninhalt

Ich habe eine Golang-Webanwendung und habe beschlossen, Nginx davor zu verwenden, um statische Dateien bereitzustellen und sie als Reverse-Proxy für meine Webanwendung zu verwenden.

Docker-Datei für Webanwendung:

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-Dateien erstellen:

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"

und Nginx-Konfiguration:

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

Auf der Webseite habe ich zwei Bilder, eines im PNG-Format und eines im SVG-Format. Die CSS-Datei ist sehr einfach und enthält nur background-color: lightblue als Body-Tag und die JS-Datei, die nur die Zeichenfolge „Geladen!“ in der Konsole protokolliert. Nachdem ich den Container mit Docker Compose gestartet habe, ist folgendes Problem aufgetreten:

1. Statische Dateien werden nach dem Zufallsprinzip bereitgestellt, zum Beispiel wird das PNG-Bild angezeigt, das SVG jedoch nicht, der CSS-Stil wird nicht auf die Seite angewendet, aber der Javascript-Code wird einwandfrei ausgeführt. Interessanterweise wurden alle statischen Dateien gemäß der Registerkarte „Netzwerk“ der Entwicklungstools des Browsers erfolgreich abgerufen. Sie können deren Inhalte überprüfen. Ja, ich habe versucht, die Seite ohne Zwischenspeicherung neu zu laden, aber ohne Erfolg. Was ist das für eine Magie?
2. Wie Sie in meiner Docker-Compose-Datei sehen können, habe ich Volumes für Nginx und Webapp eingerichtet. Für Nginx funktioniert es einwandfrei. Immer wenn ich einige Assets lösche und die Seite ohne Zwischenspeicherung neu lade, werden die Änderungen übernommen, aber wenn ich das ändere Text in der Vorlage ist auf der Seite nicht sichtbar, aber wenn ich in den Container der Webanwendung gehe und den Inhalt der Vorlage überprüfe, wird er geändert, aber auf der Seite ist er erst sichtbar, wenn ich den Container mit Docker Compose neu starte. Stimmt hier etwas nicht?

Vollständiger Code hier – https://github.com/ivnku/tmp

Solution

Die
1. Vorlagego Fiber bietet diese Funktionalität über : Engine.Reload(true)

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

Die statischen Dateien werden tatsächlich von Nginx bereitgestellt, sie haben jedoch nicht den richtigen MIME-Typ. Das Einfügen des MIME-Typs in den Abschnitt
1. von nginx.conf löst dieses Problem: http

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

    server {
        ...
    }
}

Das obige ist der detaillierte Inhalt vonVon Nginx in Docker bereitgestellte Stile und Bilder funktionieren auf der Seite nicht. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!