[英]Docker + Django + Vue.js + Webpack how to properly configure nginx?
目前我有以下配置,其中出现错误:
加载资源失败:服务器响应状态为 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 沿模板/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>
...
试试这个(未经测试,我目前无法访问 nginx 服务器):
location /vue-frontend/ {
alias /home/app/web/vue-frontend/;
try_files $uri $uri/ /vue-frontend/dist/build.js;
}
这个想法是为任何 404 提供build.js
到vue-frontend
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.