Les styles et images fournis par nginx dans Docker ne fonctionnent pas sur la page

L'éditeur PHP Youzi a découvert que lors de l'utilisation de nginx dans Docker, vous pouvez rencontrer le problème selon lequel les styles et les images ne peuvent pas être affichés correctement sur la page. Cela peut être dû à un problème de configuration ou à un mauvais chemin. Avant de résoudre ce problème, nous devons vérifier soigneusement le fichier de configuration nginx et le chemin du fichier pour nous assurer qu'ils sont correctement configurés et référencés. Nous explorerons ensuite quelques solutions courantes pour vous aider à résoudre ce problème ennuyeux.

Contenu de la question

J'ai une application Web Golang et j'ai décidé d'utiliser Nginx devant elle pour servir des fichiers statiques et l'utiliser comme proxy inverse pour mon application Web.

Dockerfile pour application 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 compose des fichiers :

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"

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

Sur la page Web, j'ai deux images, une en png et une en svg, le fichier css est très simple et ne contient que background-color: lightblue comme balise body, et le fichier js, qui enregistre simplement la chaîne "Chargé!". Après avoir démarré le conteneur à l'aide de docker compose, j'ai rencontré le problème suivant :

1. Les fichiers statiques sont servis de manière aléatoire, par exemple l'image png est affichée mais pas le svg, le style css n'est pas appliqué à la page mais le code javascript s'exécute correctement. Fait intéressant, tous les fichiers statiques sont récupérés avec succès selon l'onglet réseau des outils de développement du navigateur, vous pouvez inspecter leur contenu, oui, j'ai essayé de recharger la page sans mise en cache mais en vain. De quel genre de magie s'agit-il ?
2. Comme vous pouvez le voir dans mon fichier de composition Docker, j'ai configuré des volumes pour nginx et webapp, pour nginx cela fonctionne bien, chaque fois que je supprime certains actifs et recharge la page sans mise en cache, les modifications sont appliquées, mais lorsque je change le le texte du modèle n'est pas visible sur la page, mais si je vais dans le conteneur de l'application Web et inspecte le contenu du modèle, il est modifié, mais sur la page, il n'est pas visible jusqu'à ce que je redémarre le conteneur à l'aide de Docker Compose. Y a-t-il quelque chose qui ne va pas ici?

Code complet ici - https://github.com/ivnku/tmp

Solution

Le
1. template de go Fiber fournit cette fonctionnalité via Engine.Reload(true) :

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

1. Les fichiers statiques sont en effet servis par Nginx, ils n'ont tout simplement pas le bon type MIME. L'inclusion du type MIME dans la section http de nginx.conf résoudra ce problème :

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

    server {
        ...
    }
}

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!