在 NGINX 上部署 Vue-Django-graphene答案

【问题标题】：Deploying Vue-Django-graphene on NGINX在 NGINX 上部署 Vue-Django-graphene
【发布时间】：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 开发环境中运行良好。

非常感谢任何帮助。

【问题讨论】：

标签： django vue.js nginx graphql

【解决方案1】：

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

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

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

因此：

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

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

【讨论】：