我按照这个tutorial创建了一个后端,它工作了。
我做了一个简单的Django REST管理面板来上传图片,它工作了。
然后我创建了Vue前端应用程序,在“VScode远程”中运行npm run serve
,它工作了(图像从Django中获取,并由Vue在我的本地主机中设置样式)。
问题是如何在生产VPS服务器上(我指的是vue run build
之后的Vue 'dist'文件夹)完成所有这些工作并不明显。我尝试的所有东西都给了我一个404错误或者破坏了Django的管理面板。
以下是我的NGINX设置:
server {
server_name kruglovks.xyz www.kruglovks.xyz;
client_max_body_size 100m;
location = /favicon.ico { access_log off; log_not_found off; }
location /static {
root /home/kirill/myprojectdir/myproject;
}
location /media {
root /home/kirill/myprojectdir/myproject;
}
location /dist {
try_files $uri $uri/ /index.html;
alias /home/kirill/myprojectdir/myproject;
}
location / {
include proxy_params;
proxy_pass http://unix:/run/gunicorn.sock;
}
Vue路由器设置为历史模式。
- 请,我需要一些关于如何使Vue在此配置中工作的信息。*
P.S.也许有另一种方法可以和Django一起使用Vue?
非常感谢,祝您有愉快的一天!
4条答案
按热度按时间332nm8kg1#
这是一个巨大的进步,不是一个404,而是一个空白页称为'frontend'和浏览器拒绝找到css和js。
后来在朋友的帮助下,我可以将nginx设置重新配置为:
现在起作用了!
谢谢你,你救了我几个星期的生命...
tvokkenx2#
您没有监听任何端口。请注意,在位置
/dist
中,您还必须更改操作顺序尝试将默认配置更改为以下配置:
vuejs应用程序将在
www.kruglovks.xyz/dist
中提供服务。w46czmvw3#
这是用于生产环境,而不是开发环境。Django应用程序使用Guncorn部署
如果使用“corsheaders”,则添加yourdomain.com
更新项目的“urls.py”,并选择应用程序的路径;我的是“app/API/”,因此它将定向到http://yourdomain.com/app/api/
NGINX配置
gxwragnw4#
您也可以使用Nginx来服务Vue,并使用另一个Nginx示例作为反向代理来服务Django静态(Gunicorn将服务Django动态内容,即API调用/响应)-您将获得更快的静态内容服务和改进的安全层。
这就是为什么要使用Nginx -〉https://djangoadventures.com/what-is-the-point-of-using-nginx-in-front-of-a-django-application/
这里有一个很好的例子,比如Docker、Django、Postres、Nginx -〉https://testdriven.io/blog/dockerizing-django-with-postgres-gunicorn-and-nginx/
对于Vue - Nginx也可以提供服务。记住settings.py用Cors和允许的主机编辑www.example.com。
如果你想将nginx代理合并到前端,那么你可以通过2个独立的nginx文件来完成,如:
前端文件-〉nginx.conf
后端文件-〉默认.conf
}
Django的停靠文件
vue的停靠文件
然后Docker编写