Question

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

我的配置的基本前提是：

如果请求中包含带有/ api /或/ admin /的网址，则允许gunicorn处理该请求。
如果该URL是其他URL，请将其发送到根index.html，以便Angular可以处理路由。
根url /应该通过index.html提供我预编译的javascript。

使用以下Nginx配置，我可以访问所有Angular路由。我可以访问管理页面和可浏览的API。但是，当我进入/ admin或可浏览的API时，所有静态文件都返回404错误。

您看到问题了吗？谢谢！

# 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等（链接指向当前的开发版本）。

另一种选择涉及在您的Angular资产的同一位置收集/api/和/admin/所使用的资产，并更改NGINX配置，使其看起来像这样：

# nginx.conf

upstream my_app {
    server django:8000;
}

server {

    listen 80;

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

    location @upstream_proxy {
        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/ @upstream_proxy;
    }

}

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

将Nginx配置为在同一服务器上服务Angular前端，Django Rest Framework后端？

1 个答案: