Docker + Django + Vue.js + Webpack 如何正确配置 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)加载资源失败：服务器响应状态为 404（未找到）

As I understand it, I entered the path incorrectly and nginx cannot give the build.js file, which is missing from this path.据我了解，我输入的路径不正确，nginx 无法提供此路径中缺少的 build.js 文件。 How can I properly configure nginx so that it serves this file.如何正确配置 nginx 以便它提供此文件。

Config nginx:配置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 js 项目位于 django 项目文件夹中。 Vue is embedded in the django template along the templates / base.html path Vue 沿模板/base.html 路径嵌入到 django 模板中

{% 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:文件 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在我的 index.html(base.html) 布局中

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

Answer 1

Try this (untested, I don't have access to an nginx server at the moment):试试这个（未经测试，我目前无法访问 nginx 服务器）：

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这个想法是为任何 404 提供build.js到vue-frontend

Docker + Django + Vue.js + Webpack 如何正确配置 nginx？

问题描述

1 个解决方案

解决方案1
1 2020-11-07 19:05:00

Docker + Django + Vue.js + Webpack 如何正确配置 nginx？

问题描述

1 个解决方案

解决方案1 1 2020-11-07 19:05:00

解决方案1
1 2020-11-07 19:05:00