Docker + Django + Vue.js + Webpack how to properly configure nginx?

Question

At the moment I have the following configuration, in which I get an error:

Failed to load resource: the server responded with a status of 404 (Not Found)

As I understand it, I entered the path incorrectly and nginx cannot give the build.js file, which is missing from this path. How can I properly configure nginx so that it serves this file.

Config nginx:

upstream music {
    server web:8000;
}

server {

    listen 80;
    server_name ***;
    access_log /var/log/nginx/logs.log;
    
    location /vue-frontend/ {
       root /app/;
    }

    location / {
        proxy_pass http://music;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Host $host;
        proxy_redirect off;
    }

    location /staticfiles/ {
        root /home/app/web;
    }

    location /media/ {
        root /home/app/web;
    }
}

The entire vue js project lies in the django project folder. Vue is embedded in the django template along the templates / base.html path

{% load static %}

    <!DOCTYPE html>
    <html lang="en">
    
    <head>     
        {% load render_bundle from webpack_loader %}
    </head>
    
    <body>
      <div class="main_content">
        <div id="app"></div>
        {% render_bundle 'main' %}
    </div>
    </body>
      
    </html>

file docker-compose.prod.yml:

version: "3.8"

services:
  web:
    build: 
      context: ./
      dockerfile: Dockerfile.prod
    command: gunicorn music.wsgi:application --bind 0.0.0.0:8000
    volumes:
      - static_volume:/home/app/web/static
      - media_volume:/home/app/web/media
    expose:
      - 8000
    env_file: 
      - ./.env.prod
    depends_on: 
      - db
  vue:
    build:
      context: ./vue-frontend
      dockerfile: Dockerfile.prod
    volumes: 
      - vue_dist:/app/dist
    depends_on: 
      - web
  db:
    image: postgres:12.0
    volumes: 
      - postgres_data:/var/lib/postgresql/data/
    env_file: 
      - ./.env.prod.db
  nginx:
    build: ./nginx
    ports:
      - 80:80
    volumes:
      - static_volume:/home/app/web/static
      - media_volume:/home/app/web/media
      - vue_dist:/app/dist
    depends_on:
      - web
      - vue
volumes: 
  postgres_data:
  static_volume:
  media_volume:
  vue_dist:

In my index.html(base.html) layout

...
    <body>
      <div class="main_content">
        <div id="app"></div>
        <script type="text/javascript" src="http://*.*.*.*/vue-frontend/dist/build.js" ></script>
    </div>
    </body>
...

What happens if you place the following within the location /vue-frontend/ block, on line 2 after the alias? try_files $uri $uri/ /index.html; — Dan
– Dan, Commented Nov 6, 2020 at 13:43
Nothing, everything is the same, nginx tries to find the index.html file, which also does not exist, nginx says that the build.js file does not exist, but when I go to this path in the docker container, through which nginx is trying to get it, it does exist. — Bob KapusAkba
– Bob KapusAkba, Commented Nov 6, 2020 at 14:14
Need some more info: 1) Do you actually have an index.html file in vue-frontend or only in its dist subdirectory? 2) Do you want traffic to vue-frontend to go straight to dist or no? 3) What URL are you typing to access the index page? — Dan
– Dan, Commented Nov 7, 2020 at 18:19

Dan · Accepted Answer · 2020-11-07 19:05:00Z

1

Try this (untested, I don't have access to an nginx server at the moment):

location /vue-frontend/ {
   alias /home/app/web/vue-frontend/;
   try_files $uri $uri/ /vue-frontend/dist/build.js;
}

The idea is to serve build.js for any 404 to vue-frontend

answered Nov 7, 2020 at 19:05

Dan

63.5k18 gold badges113 silver badges122 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Bob KapusAkba Over a year ago

nginx_1 | 2020/11/07 20:21:39 [error] 19#19: *27 rewrite or internal redirection cycle while internally redirecting to "/ vue-frontend/dist/build.js", client: *, server: *, request: "GET /vue-frontend/dist/build.js HTTP/1.1", host: "3.8.15.53", referrer: "http://*/en/landing/"

Bob KapusAkba Over a year ago

most likely it is looping and cannot find the file

Dan Over a year ago

I notice your docker file says: /home/app/web/dist. No vue-frontend. Do you have the dist folder in two places?

Bob KapusAkba Over a year ago

thanks, in vue I replaced (- vue_dist: / home / app / web / dist) with (- vue_dist: / app / dist), in nginx (- media_volume: / home / app / web / dist) with (- vue_dist: / app / dist), in the nginx config I wrote location / vue-frontend / {root / app /; } and it all worked.

Collectives™ on Stack Overflow

Docker + Django + Vue.js + Webpack how to properly configure nginx?

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related