Styles and images provided by nginx in docker do not work on the page

php editor Youzi found that when using nginx in docker, you may encounter the problem that styles and images cannot be displayed correctly on the page. This may be due to a configuration issue or a wrong path. Before solving this problem, we need to carefully check the nginx configuration file and file path to ensure that they are set up and referenced correctly. Next, we'll explore some common solutions to help you solve this annoying problem.

Question content

I have a golang web application and I decided to use Nginx in front of it to serve static files and use it as a reverse proxy for my web application.

Dockerfile for Web application:

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 file:

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"

and nginx configuration:

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

I have two pictures on the web page, one is png and one is svg. The css file is very simple and only contains background-color: lightblue as the body tag, and the js file, which Just the console logs the string "Loaded!". After starting the container using docker compose, I encountered the following problem:

1. Static files are provided randomly, for example the png image is displayed but the svg is not, the css style is not applied to the page but the javascript code executes fine. Interestingly, all the static files are fetched successfully according to the browser's dev tools network tab, you can inspect their contents, yes I tried reloading the page without caching but to no avail. What kind of magic is this?
2. As you can see in my docker compose file, I have set up volumes for nginx and webapp, for nginx it works fine, whenever I remove some assets and reload the page without caching, the changes are applied , but when I change the text in the template is not visible on the page, but if I go into the webapp's container and inspect the content of the template - it is changed, but on the page it is not visible until I restart the container using docker compose. Is there something wrong here?

Full code here - https://github.com/ivnku/tmp

Solution

1. go Fiber's template provides this functionality via Engine.Reload(true):

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

The static files are indeed served by Nginx, they just don't have the correct MIME type. Including the mime type in the http section of nginx.conf will resolve this issue:

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

    server {
        ...
    }
}

The above is the detailed content of Styles and images provided by nginx in docker do not work on the page. For more information, please follow other related articles on the PHP Chinese website!