配置 Nginx 以在同一台服务器上为 Angular 前端、Django Rest Framework 后端提供服务？

Question

我网站的前端是用 Angular 7 构建的，后端是用 Django Rest Framework 构建的。都是运行通过 docker-compose，我正在尝试通过 NGINX 为整个站点提供服务。

我配置的基本前提是这样的：

如果请求包含带有 /api/ 或 /admin/ 的 url，允许 gunicorn 处理请求。
如果 url 是其他任何东西，将它发送到根 index.html 以便 Angular 可以处理路由。
根 url / 应该通过 index.html.

通过以下 Nginx 配置，我可以访问所有 Angular 路由。我可以访问管理页面和我的可浏览页面 API。但是，当我转到 /admin 或可浏览的 API 时，所有静态文件 return 出现 404 错误。

你看到问题了吗？谢谢！

# urls.py

urlpatterns = [
    re_path(r'^favicon\.ico$', favicon_view),

    path('api/v1/', include('api.urls'), name='api'),
    path('admin/', admin.site.urls),
]



# nginx.conf

upstream my_app {
    server django:8000;
}

server {

    listen 80;

    location /staticfiles/ {
        alias /usr/src/app/staticfiles/;
    }

    location ~ (api|admin) {
        proxy_pass http://my_app;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Host $host;
        proxy_redirect off;
    }

    location / { 
        root /usr/src/app/staticfiles/;
        try_files $uri $uri/ /index.html;
    }

}

Answer 1

您的配置表明 /api/ 或 /admin/ 中可用的所有内容都由代理提供给 my_app。因此，您可以确保这些端点使用的静态文件可通过 Django Rest Framework 获得，或者告诉 NGINX 总是先尝试静态文件，然后回退到 my_app 代理。

第一个选项将涉及根据 Django documentation on static files 设置 STATIC_ROOT、STATIC_URL、STATICFILES_STORAGE 等（link 转到当前开发版本）。

另一种选择涉及将 /api/ 和 /admin/ 使用的资产收集在与 Angular 资产相同的位置，并将您的 NGINX 配置更改为如下所示：

# nginx.conf

upstream my_app {
    server django:8000;
}

server {

    listen 80;

    location /staticfiles/ {
        alias /usr/src/app/staticfiles/;
    }

    location / { 
        root /usr/src/app/staticfiles/;
        try_files $uri $uri/ index.html;
        location /drf {
            proxy_pass http://my_app;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header Host $host;
            proxy_redirect off;

        }
    }

}

这基本上是说尝试查找 Angular staticfiles 目录中的所有内容，如果找不到，请尝试在 DRF 应用程序中查找。

配置 Nginx 以在同一台服务器上为 Angular 前端、Django Rest Framework 后端提供服务？

Configure Nginx to serve Angular front end, Django Rest Framework backend on same server?

django

nginx

gunicorn

docker-compose

angular