【发布时间】：2021-02-18 22:11:10
【问题描述】：
目前我有以下配置，其中出现错误：
加载资源失败：服务器响应状态为 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>
文件 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:
在我的 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>
...
【问题讨论】：
-
如果将以下内容放在
location /vue-frontend/块中，在alias之后的第2 行，会发生什么？try_files $uri $uri/ /index.html; -
没什么，一切都一样，nginx试图找到index.html文件，同样不存在，nginx说build.js文件不存在，但是当我走到这个路径在 docker 容器中，nginx 试图通过它来获取它，它确实存在。
-
其他 nginx 路由是否有效？
-
是的静态文件、媒体和 django /
-
需要更多信息：1）你实际上在 vue-frontend 中有一个 index.html 文件还是只有在它的 dist 子目录中？ 2) 你想让 vue-frontend 的流量直接去 dist 还是不去？ 3) 您输入什么 URL 来访问索引页面？
标签： django docker vue.js nginx webpack