單個Nginx釋出多個react靜態頁面

麥比烏斯皇發表於2023-11-07
NginxReact

在有些網路環境中，埠是一種比較稀缺的資源，而我們又恰好有多個前端專案需要釋出，我們可以採取將多個專案對映到同一個埠上面的方案加以解決。

本教程前端專案主要以react為主，部署在linux伺服器上。

1. 將專案資源的訪問地址修改為相對方式

在react專案package.json中，新增或者修改homepage屬性為.。具體為：

{

  "name": "app1",
  "version": "0.1.0",
  "private": true,
  "homepage": ".", //資源地址改為相對當前的路由，預設是根目錄/
  ...
}

2. 新增nginx配置

假設我們有兩個專案，app1和app2。首先將build後的專案都複製到/usr/share/nginx/html目錄下，其次在/etc/nginx/conf.d/目錄下新增我們的配置檔案，nginx會自動載入該目錄下以.conf結尾的配置檔案，這裡我們新建myapp.conf,並新增以下內容：

server {
    listen       80; # 監聽80埠
    server_name  _;
    # 將根目錄對映到/usr/share/nginx/html，注意此處為root
    location / {
        root /usr/share/nginx/html;
        index index.html; # 我們在根目錄放了一個簡單的主頁，用於介紹我們的服務，
    }
    # 將app1目錄對映到/usr/share/nginx/html/app1，注意此處為alias
    location /app1 {
        alias /usr/share/nginx/html/app1;
        index index.html;
        try_files $uri $uri/ =404;
    }
    location /app2 {
        alias /usr/share/nginx/html/app2;
        index index.html;
        try_files $uri $uri/ =404;
    }
}

3.重新載入nginx配置

將工作目錄切換至nginx的安裝目錄，並執行以下命令，實現熱過載配置檔案：

./nginx -s reload

至此，我們就完成了將多個專案使用一個nginx代理釋出的流程了。

可以透過地址http://localhost:80/訪問主頁，透過http://localhost:80/app1/訪問ap1。注意該配置的訪問地址必須以/結尾,不然無法正常訪問。

...........................................

以下步驟為docker版的操作流程，為擴充教程，不使用docker的可以不看。

4.使用nginx的docker映象進行釋出

新增Dockerfile並新增以下內容：

FROM nginx

ENV TZ 'Asia/Shanghai' 
ENV LANG en_US.UTF-8 
ENV LANGUAGE en_US:en 
ENV LC_ALL en_US.UTF-8

ADD myapp.conf /etc/nginx/conf.d/ #新增nginx配置檔案
ADD index.html /usr/share/nginx/html #新增簡單的介紹主頁
ADD ./app1/build /usr/share/nginx/html/app1 #新增專案app1
ADD ./app2/build /usr/share/nginx/html/app2 #新增專案app2

並使用以下命令執行自動映象構建：

# npm run build
docker build . -t react-nginx

docker stop react-nginx
docker rm react-nginx
# docker rmi react-nginx

docker run --name react-nginx -p 8036:80 -d react-nginx 
docker logs -f react-nginx

相關文章