单个Nginx发布多个react静态页面

在有些网络环境中，端口是一种比较稀缺的资源，而我们又恰好有多个前端项目需要发布，我们可以采取将多个项目映射到同一个端口上面的方案加以解决。

本教程前端项目主要以react为主，部署在linux服务器上。

1. 将项目资源的访问地址修改为相对方式

在react项目package.json中，添加或者修改homepage属性为.。具体为：

json 复制代码

{

  "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,并添加以下内容：

bash 复制代码

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的安装目录，并执行以下命令，实现热重载配置文件：

bash 复制代码

./nginx -s reload

至此，我们就完成了将多个项目使用一个nginx代理发布的流程了。

可以通过地址http://localhost:80/访问主页，通过http://localhost:80/app1/访问ap1。注意该配置的访问地址必须以/结尾,不然无法正常访问。

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

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

4.使用nginx的docker镜像进行发布

添加Dockerfile并添加以下内容：

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

并使用以下命令执行自动镜像构建：

bash 复制代码

# 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