在同一伺服器上將 nginx 設定為多個 ReactJS 應用程式時出錯?

在同一伺服器上將 nginx 設定為多個 ReactJS 應用程式時出錯?

我正在建立一個包含多個模組的解決方案。每個模組都是一個 ReactJs 應用程序,我嘗試配置 nginx 將其發佈到同一網域上。舉些例子:

http://應用程式網域/授權
http://應用程式網域/行政
http://應用程式網域/儀表板
http://應用程式網域/銷售量

我的 nginx 公用目錄如下:

|---/var/www
|----/auth
|----/admin
|----/dashboard
|----/sales

其中 auth、admin、dashboard 和 sales 是每個專案的子資料夾。

我的 nginx 伺服器設定:

server {
 listen 9000 default_server;
 listen [::]:9000 default_server;
 server_name localhost;

 index index.html;

 location / {
    root /var/www/auth;
 }

 location /admin { 
   root /var/www;
 }

 location /dashboard {
   root /var/www;
 }

 location /sales {
   root /var/www;
 }
}

每個項目的子資料夾都有類似的結構,如下所示

在此輸入影像描述

問題是當訪問http://應用程式網域/admin,例如,應用程式嘗試載入根目錄而不是子資料夾項目上的靜態文件

GET http://localhost:9000/static/js/main.6314dcaa.js net::ERR_ABORTED

正確的做法是取得文件行政子資料夾如下:

GET http://localhost:9000/admin/static/js/main.6314dcaa.js

對此修正 nginx 設定的更好方法是什麼?

答案1

我認為您想要完成的任務可以透過擴展每個位置的根部分來完成,如下所示:

 location /admin { 
   root /var/www/admin;
 }

 location /dashboard {
   root /var/www/dashboard;
 }

 location /sales {
   root /var/www/sales;
 }

但這與僅擁有相同

location / {
  root /var/www/
}

因為對 的呼叫http://application-domain/admin將評估為/var/www/admin.

第一個解決方案將隱藏其他任何內容,/var/www/因為沒有位置規則可以存取 say http://application-domain/private

相關內容