Django静态文件和Vue.js静态目录的NGINX配置

问题描述

我有一个用于容器化的Django应用程序的NGINX配置，该配置可完成三件事：

1. 将流量路由到运行daphne的容器（在/api/，/admin/和/ws/路由上）
2. 提供Django静态文件
3. 为使用Quasar的Vue.js应用程序提供静态文件

我的Vue.js应用程序包含一些小图像，应该在/statics/上（带有s）提供，而我的Django静态文件则在/static/上提供。我可以使用Vue.js的/statics/图像，也可以使用Django的/static/文件，但不能同时使用。这是使Django静态文件正常工作但Vue.js /statics/文件无法加载的配置：

    # static files
    location /static {
      autoindex on;
      alias /usr/src/app/assets/static;
    }

如果将以上内容更改为location /static/ {，则Vue.js静态图像将起作用，但Django静态文件将无法加载。

这是我完整的NGINX配置文件：

user  nginx;
worker_processes  1;

events {
  worker_connections  1024;
}

http {
  include /etc/nginx/mime.types;
  client_max_body_size 100m;

  upstream backend {
    server backend:9000;
  }

  server {
    listen 80;
    charset utf-8;

    root /dist/;
    index index.html;

    # frontend
    location / {
      try_files $uri $uri/ @rewrites;
    }

    location @rewrites {
      rewrite ^(.+)$ /index.html last;
    }

    # static files
    location /static {
      autoindex on;
      alias /usr/src/app/assets/static;
    }

    # backend urls
    location ~ ^/(admin|api|ws) {
      proxy_redirect off;
      proxy_pass http://backend;
      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
      proxy_set_header Host $http_host;
      proxy_set_header Connection "upgrade";
      proxy_set_header Upgrade $http_upgrade;
    }
  }
}

我想在NGINX配置中保持路由名称/static/和/statics/相同，我可能需要更改Django /static块。

我现在正在尝试更改此处描述的选项：https://nginx.org/en/docs/http/ngx_http_core_module.html#alias。

解决方法

我想我现在可以正常工作了，我必须在别名路径的末尾添加一个/：

    # static files
    location /static {
      autoindex on;
      alias /usr/src/app/assets/static/;
    }