如何在nginx中配置多個前端專案

首先安裝好ngnix,找到目錄下的html資料夾，將自己打包好的前端專案放在html資料夾下，如下圖:

找到conf>nginx.conf檔案，以我框選出來的為例，配置好想設定的埠號，對應的資料夾名稱。

重啟nginx，訪問http://localhost:2456即可

新的專案複製貼上**，更改埠號和對應的資料夾，詳情看下面的**。

我標紅的這兩個專案都是react的，補充兩點：

1.訪問到頁面之後重新整理頁面會顯示404，需要加上

try_files $uri /index.html;

# 解決重新整理404問題

因為這是前後端分離的專案，需要配置介面的ip。

"/api"是我在專案中訪問介面的字首，根據自己的專案更改即可。

nginx.conf**如下：

#配置本地**規則

location /api

#error_page 404 /404.html;

# redirect server error pages to the static page /50x.html

# error_page 500 502 503 504 /50x.html;

location = /50x.html

# proxy the php scripts to apache listening on 127.0.0.1:80

##location ~ \.php$

# pass the php scripts to fastcgi server listening on 127.0.0.1:9000

##location ~ \.php$

# deny access to .htaccess files, if apache's document root

# concurs with nginx's one

##location ~ /\.ht

} server

#配置本地**規則

location /api/api

#error_page 404 /404.html;

# redirect server error pages to the static page /50x.html

# error_page 500 502 503 504 /50x.html;

location = /50x.html

# proxy the php scripts to apache listening on 127.0.0.1:80

##location ~ \.php$

# pass the php scripts to fastcgi server listening on 127.0.0.1:9000

##location ~ \.php$

# deny access to .htaccess files, if apache's document root

# concurs with nginx's one

##location ~ /\.ht

} server

#配置本地**規則

location /api

#普通專案需要定義一下檔案的路徑

location ^~\.js

location ^~\.css

location ^~\.html

#error_page 404 /404.html;

# redirect server error pages to the static page /50x.html

# error_page 500 502 503 504 /50x.html;

location = /50x.html

# proxy the php scripts to apache listening on 127.0.0.1:80

##location ~ \.php$

# pass the php scripts to fastcgi server listening on 127.0.0.1:9000

##location ~ \.php$

# deny access to .htaccess files, if apache's document root

# concurs with nginx's one

##location ~ /\.ht

}# another virtual host using mix of ip-, name-, and port-based configuration

# server

}}

如何在NGINX中部署多個前端專案

nginx中單設定乙個web前端很容易，改變埠，改變root指向基本就搞定了，那麼，假設我們有多個前端專案部署在同乙個網域名稱下，該怎麼設定呢？1.先假設我們有乙個應用，http domain就可以訪問了，現在改版了希望可以訪問舊的應用http domain，同時也可以通過http domain n...

如何在多個LinearLayout中新增分隔線

1.可以放置乙個imageview元件，然後將其設為分隔線的顏色或圖形。分隔線view的定義 如下 android layout width fill parent android layout height 1dp android background ffffff 2.在android3.0及以...

Nginx配置多個vue前端專案 後端專案

我在之前已經使用docker nginx部署乙個vue專案了，大概是這樣的 conf.d default.conf server error page 404 404.html redirect server error pages to the static page 50x.html error...