Docker + Django + Vue.js + Webpack 如何正确配置 nginx？
Posted
技术标签:
【中文标题】Docker + Django + Vue.js + Webpack 如何正确配置 nginx？【英文标题】：Docker + Django + Vue.js + Webpack how to properly configure nginx? 【发布时间】：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 来访问索引页面？
【参考方案1】：
试试这个（未经测试，我目前无法访问 nginx 服务器）：
location /vue-frontend/
alias /home/app/web/vue-frontend/;
try_files $uri $uri/ /vue-frontend/dist/build.js;
这个想法是为build.js 提供任何 404 到 vue-frontend
【讨论】：
nginx_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-frontend。你有两个地方的 dist 文件夹吗？
谢谢，在vue中我把(-vue_dist:/home/app/web/dist)换成了(-vue_dist:/app/dist)，在nginx(-media_volume:/home/app/web /dist) 加上(-vue_dist:/app/dist)，在nginx config中我写了location /vue-frontend/root/app/; 一切都奏效了。以上是关于Docker + Django + Vue.js + Webpack 如何正确配置 nginx？的主要内容，如果未能解决你的问题，请参考以下文章
Vue.js + vue.router + 历史模式 + Django = 错误
获取 Django 的静态文件包括在 Vue.js .vue 模板中工作