在有些網(wǎng)絡(luò)環(huán)境中，端口是一種比較稀缺的資源，而我們又恰好有多個(gè)前端項(xiàng)目需要發(fā)布，我們可以采取將多個(gè)項(xiàng)目映射到同一個(gè)端口上面的方案加以解決。

本教程前端項(xiàng)目主要以react為主，部署在linux服務(wù)器上。

1. 將項(xiàng)目資源的訪問地址修改為相對(duì)方式

在react項(xiàng)目package.json中，添加或者修改homepage屬性為.。具體為：

{

  "name": "app1",
  "version": "0.1.0",
  "private": true,
  "homepage": ".", //資源地址改為相對(duì)當(dāng)前的路由，默認(rèn)是根目錄/
  ...
}

2. 添加nginx配置

假設(shè)我們有兩個(gè)項(xiàng)目，app1和app2。首先將build后的項(xiàng)目都復(fù)制到/usr/share/nginx/html目錄下，其次在/etc/nginx/conf.d/目錄下添加我們的配置文件，nginx會(huì)自動(dòng)加載該目錄下以.conf結(jié)尾的配置文件，這里我們新建myapp.conf,并添加以下內(nèi)容：

server {
    listen       80; # 監(jiān)聽80端口
    server_name  _;
    # 將根目錄映射到/usr/share/nginx/html，注意此處為root
    location / {
        root /usr/share/nginx/html;
        index index.html; # 我們?cè)诟夸浄帕艘粋€(gè)簡單的主頁，用于介紹我們的服務(wù)，
    }
    # 將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的安裝目錄，并執(zhí)行以下命令，實(shí)現(xiàn)熱重載配置文件：

./nginx -s reload

至此，我們就完成了將多個(gè)項(xiàng)目使用一個(gè)nginx代理發(fā)布的流程了。

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

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

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

4.使用nginx的docker鏡像進(jìn)行發(fā)布

添加Dockerfile并添加以下內(nèi)容：

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 #添加項(xiàng)目app1
ADD ./app2/build /usr/share/nginx/html/app2 #添加項(xiàng)目app2

并使用以下命令執(zhí)行自動(dòng)鏡像構(gòu)建：

# 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

總結(jié)

以上是生活随笔為你收集整理的单个Nginx发布多个react静态页面的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。