Localhost route can't load static file

I am currently creating a dockerized web application.

It is composed of the following elements :

• React for the frontend (with the routes managed by react-router-dom)
• Django for the backend
• PostgreSQL for the database managment
• Nginx for the reverse proxy

I have created the reverse proxy for the back-end and front-end.

I have created a route named /element/:id (id is an URL parameter) which would allowed me to see the informations of an object stored in a database.

Unfortunately, when I try to load the page localhost/element/1, the page displayed nothing. In the web console, I have an error, telling me Uncaught SyntaxError: Unexpected token '<' for the file http://localhost/element/static/js/file.js.

After inspection, he loads the index.html file.

The home page works without a problem.

Here is my nginx configuration file :

server{
    include  /etc/nginx/mime.types;
    listen 80 default_server;
    
    error_log /var/log/nginx/app-error.log info;

    access_log /var/log/nginx/app.log main;

    location /admin/ {
        proxy_redirect     off;
        proxy_set_header   Host $host;
        proxy_set_header   X-Real-IP $remote_addr;
        proxy_set_header   X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header   X-Forwarded-Host $server_name;
        proxy_pass http://admin-backend/admin/;
    }

    location /api/v1/ {
        proxy_redirect     off;
        proxy_set_header   Host $host;
        proxy_set_header   X-Real-IP $remote_addr;
        proxy_set_header   X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header   X-Forwarded-Host $server_name;
        proxy_pass http://admin-backend/api/v1/;
    }

    location /static/ {
        alias /staticfiles/$1;
    }

    error_page 500 502 503 504 /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }

    location / {
        root /usr/share/nginx/html;
        try_files $uri $uri/ /index.html;
    }
}

Here is my docker-compose.yaml file:

services:
  frontend:
    build:
      context: ./
      dockerfile: ./Dockerfile
    ports:
      - "80:80"
    depends_on:
      - backend
    environment:
      - PUBLIC_URL=127.0.0.1
    volumes:
      - static:/staticfiles
    command: sh -c "cp -r /home/build/staticfiles/* /staticfiles ; nginx -g 'daemon off;'"

  db:
    image: postgres
    volumes:
      - postgres_data:/var/lib/postgresql/data
    env_file:
      - .env
    ports:
      - "5432:5432"

  backend:
    build: backend
    command: sh -c "make generate_static_auto ; make migrate ; make run"
    volumes:
      - static:/staticfiles/
      - ./backend:/backup
    ports:
      - "8000:8000"
    depends_on:
      - db
    env_file:
      - .env

volumes:
  postgres_data:
  static:

The back-end pages (like the admin page) doesn't load nicely (without the js and css file) also in the localhost. Does anyone has an answer to my problem?

Вернуться на верх