使用Django&Vue.js設定的NginX位置管理

我有一個由同一臺機器提供服務的 Django 后端和 Vue.js 前端。我希望將特定路徑定向到 django API 和管理面板，而其余路徑應加載 Vue index.html 并傳遞給 Vue 路由器。我的問題是，雖然基本路徑傳遞給 Vue.js，并且我選擇的路徑確實通過了 Django，但任何其他路徑都會導致 404，這意味著如果我想重新訪問通過 Vue 路由器生成的路徑，它是不可能這樣做。

我認為問題一定出在 NginX 組態檔中的某個地方：

# the upstream component nginx needs to connect to
upstream myproject {
    server unix:///tmp/myproject .sock;
}

server {
  listen 80;
  listen [::]:80;
  server_name serverurl.com;
  return 301 https://serverurl.com$request_uri;
}

server {
  listen 443 ssl;
  listen [::]:443 ssl;

    ssl_certificate /home/projects/myproject/ssl/ANY.serverurl.com.crt;
    ssl_certificate_key /home/projects/myproject/ssl/ANY.serverurl.com.key;

  server_name serverurl.com www.serverurl.com;
  access_log /home/projects/myproject/logs/nginx_access.log;
  error_log /home/projects/myproject/logs/nginx_error.log;

location / {
      root /home/projects/insights/vue/dist;
      try_files $uri $uri/ /home/projects/myproject/vue/dist/index.html =404;
 }
  location /backend/ {
    include /etc/nginx/uwsgi_params;
    uwsgi_pass myproject;
  }

  location /static/ {
    alias /home/projects/myproject/static/;
  }
  location /media/ {
    alias /home/projects/myproject/media/;
  }

  
}

所以“/”路徑導致正確呈現Vue index.html

并且“/backend/”正確加載django url

但是，例如，如果用戶嘗試訪問“/”并且沒有登錄，他將被Vue路由器重定向到“/login”，這作業正常并且登錄頁面作業正常，并且用戶被重定向回“/”。但是，如果用戶嘗試直接訪問“/login”，或任何其他路由，例如“/options”、“/profile”等。我嘗試使用某種正則運算式，但不幸的是無法弄清楚，并導致無限重定向到“/index.html/index.html...”，直到瀏覽器阻止了重定向。

這是我的嘗試：我將此位置添加到配置的末尾：

location ~* ^/(.*) {
    index /home/projects/myproject/vue/dist/index.html;
  }

uj5u.com熱心網友回復：

讓我們看看你的try_files指令：

try_files $uri $uri/ /home/projects/myproject/vue/dist/index.html =404;

那么當您的用戶嘗試/login直接訪問URI時，這里發生了什么？

1. nginx 處理第一個try_files引數$uri（等于/login），嘗試檢查/home/projects/insights/vue/dist/login檔案是否存在并失敗；

2. nginx 處理第二個try_files引數$uri/，嘗試檢查/home/projects/insights/vue/dist/login/目錄是否存在，失敗；

3. nginx處理第三個try_files引數/home/projects/myproject/vue/dist/index.html，嘗試檢查/home/projects/insights/vue/dist/home/projects/myproject/vue/dist/index.html檔案是否存在，失敗；

4. nginx 回傳 HTTP 404 Not Found 代碼。

正如檔案所述，try_files指令的最后一個引數可以是

• 一個新的 URI；
• HTTP 錯誤代碼：=code;
• 命名位置 ID：@location_name。

您需要使用 Vue 應用程式index.html檔案處理對不存在檔案的所有請求，因此如果所有其他檢查失敗，請將try_files指令更改/index.html為用作新 URI：

try_files $uri $uri/ /index.html;

（我不確定你是否需要那$uri/部分，也許就try_files $uri /index.html;足夠了）。

此外，我建議您使用root /home/projects/myproject代替alias /home/projects/myproject/static/和alias /home/projects/myproject/media/指令。正如alias指令檔案中所說：

當 location 匹配指令值的最后一部分時：

location /images/ {
    alias /data/w3/images/;
}

最好使用 root 指令代替：

location /images/ {
    root /data/w3;
}

這樣您就可以將配置簡化為

server {
    listen 443 ssl;
    listen [::]:443 ssl;

    ssl_certificate /home/projects/myproject/ssl/ANY.serverurl.com.crt;
    ssl_certificate_key /home/projects/myproject/ssl/ANY.serverurl.com.key;

    server_name serverurl.com www.serverurl.com;
    access_log /home/projects/myproject/logs/nginx_access.log;
    error_log /home/projects/myproject/logs/nginx_error.log;

    root /home/projects/myproject;

    location / {
        root /home/projects/insights/vue/dist;
        try_files $uri /index.html;
    }
    location /backend/ {
        include /etc/nginx/uwsgi_params;
        uwsgi_pass myproject;
    }
    location /static/ {}
    location /media/ {}
}

標籤：javascript Python 姜戈 Vue.js nginx

上一篇：使用MySQLREGEXP通過DjangoORM過濾字串

下一篇：為什么我的djangorest-framework分頁不起作用？