Docker&x2B；Django+；Vue.js+；如何正确配置nginx的网页包？_Django_Docker_Vue.js_Nginx_Webpack

Docker&x2B；Django+；Vue.js+；如何正确配置nginx的网页包？

django docker vue.js nginx webpack

Docker&x2B；Django+；Vue.js+；如何正确配置nginx的网页包？,django,docker,vue.js,nginx,webpack,Django,Docker,Vue.js,Nginx,Webpack,目前，我有以下配置，其中有一个错误：未能加载资源：服务器以404状态响应（未找到）据我所知，我输入的路径不正确，nginx无法提供build.js文件，该路径中缺少该文件。如何正确配置nginx以使其服务于此文件配置nginx: upstream music { server web:8000; } server { listen 80; server_name ***; access_log /var/log/nginx/logs.log;

目前，我有以下配置，其中有一个错误：

未能加载资源：服务器以404状态响应（未找到）

据我所知，我输入的路径不正确，nginx无法提供build.js文件，该路径中缺少该文件。如何正确配置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;
    }
}

整个vue js项目位于django项目文件夹中。Vue沿着templates/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>

在我的index.html（base.html）布局中

。。。
...

试试这个（未经测试，我目前没有访问nginx服务器的权限）：

我们的想法是为任何404 to

vue前端

提供

build.js

，如果您将以下内容放在

位置/vue前端/

块中，

别名

后的第2行，会发生什么<代码>try_文件$uri$uri//index.html无，一切都是一样的，nginx试图找到index.html文件，该文件也不存在，nginx说build.js文件不存在，但当我在docker容器中找到该路径时，nginx试图通过该路径获取该文件，它确实存在。其他nginx路径有效吗？是的，静态文件，media和django/需要更多信息：1）您在vue frontend中实际有index.html文件，还是仅在其dist子目录中？2）您希望vue frontend的流量直接进入dist还是no？3）您键入什么URL来访问索引页？nginx|u 1 | 2020/11/07 20:21:39[错误]19#19:*27在内部重定向到“/vue frontend/dist/build.js”，客户端：*，服务器：*，请求：“GET/vue frontend/dist/build.js HTTP/1.1”，主机：“3.8.15.53”，参考者：“HTTP://*/en/landing/”很可能是循环，找不到文件我注意到docker文件上写着：

/home/app/web/dist

。无

vue前端

。你有两个地方的dist文件夹吗？谢谢，在vue中我用（-vue_dist:/home/app/web/dist）替换（-vue_dist:/app/dist），在nginx中（-media_volume:/home/app/web/dist）替换（-vue_dist:/app/dist），在nginx配置中我写了location/vue frontend/{root/app/；}，一切正常。

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:

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

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