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