在 NGINX 上部署 Vue-Django-graphene

Posted 2023-03-08

【中文标题】在 NGINX 上部署 Vue-Django-graphene

【英文标题】：Deploying Vue-Django-graphene on NGINX

【发布时间】：2020-05-07 12:39:56

【问题描述】：

如果这个问题被认为已回答，我深表歉意，但在我的具体情况下，到目前为止，其他解决方案似乎无法解决我的问题。我有一个 django-vue 项目，它使用 GraphQL 在 vue 和 django 之间进行通信。

我正在尝试使用 uwsgi 和 nginx 为我的 Web 应用程序提供服务，并且 Django 部分工作正常，但是在查找 Vue /dist/ 静态文件时似乎存在一些问题，例如获取 http://ip.ip.ip.ip:8000/js/app.js ERR_ABORTED 404，应用程序和块供应商的 CSS 也是如此。

不幸的是，这是我的第一次部署，所以我的理解相当不稳定，但似乎很清楚 NGINX 无法正确理解 dist 文件夹的路径，但到目前为止我尝试过的变体还没有成功它可以工作。

mysite_nginx.conf：

# hubdev_nginx.conf

# the upstream component nginx needs to connect to
upstream django 
    server unix:///srv/hub/hub.sock;
#   server 127.0.0.1:8001;


# configuration for the server
server 
    # the port your site will be served on
    listen 8000;
    # the domain name it will serve for
    server_name ip.ip.ip.ip;
    charset utf-8

    root    /srv/hub/frontend/dist/;
    index   index.html;

    # max upload size
    client_max_body_size    75M;    # 'Adjust to taste'

    # Django media
    # none yet

    # Django static - I've tried both of these
    location /static 
    alias /srv/hub/staticfiles;
#   alias /srv/hub/frontend/dist;
    

    # send all non-media requests to the Django server
    location / 
        uwsgi_pass  django;
        include     /srv/hub/uwsgi_params;
    

我看过这个似乎相似的问题：Serving Django and Vue with Nginx

但是就如何将两条路径组合在一起而言，答案的这一部分没有多大意义......

location /static 
        autoindex on;
        alias *path to you static files both django static files and vue related static files*;
    

urls.py 中的 urlpatterns:

url(r'^static/(?P<path>.*)$', serve,
        'document_root': settings.STATIC_ROOT),
    url(r'^dmedia/(?P<path>.*)$', serve,
        'document_root': settings.MEDIA_ROOT),

    url(r'^media/(?P<path>.*)$', serve,
        'document_root': os.path.join(settings.VUE_ROOT, 'media')),
    url(r'^img/(?P<path>.*)$', serve,
        'document_root': os.path.join(settings.VUE_ROOT, 'img')),
    url(r'^js/(?P<path>.*)$', serve,
        'document_root': os.path.join(settings.VUE_ROOT, 'js')),
    url(r'^css/(?P<path>.*)$', serve,
        'document_root': os.path.join(settings.VUE_ROOT, 'css')),
    url(r'^fonts/(?P<path>.*)$', serve,
        'document_root': os.path.join(settings.VUE_ROOT, 'fonts')),
    url(r'^graphql', csrf_exempt(GraphQLView.as_view(graphiql=True))),

在 prod 设置中将 VUE_ROOT 定义为“\frontend\dist” - 这在我的 Windows 开发环境中运行良好。

非常感谢任何帮助。

【参考方案1】：

答案似乎是为 NGINX 无法加载的每个资源创建单独的位置。就我而言，它正在添加：

location /dist 
    alias /srv/hub/frontend/dist;
    autoindex    on;
    

然后在获取 Vue 应用程序中使用的 img 文件时出现错误。

因此：

location /img 
    alias    /srv/hub/frontend/dist/img;

我非常怀疑这是最佳的最佳做法，但它现在有效，我很高兴我可以继续前进......