最近公司在上线新的项目，原来的环境都是每个项目配置一个独立的域名。因微信回调域名添加有限制貌似最多只能添加5个，新项目又急着上线，注册新的微信公众号资料繁琐且时间紧张，只能改造公司内部的项目了，一台服务器要配置一个独立域名通过多个目录形式访问不同的多个前端项目，这时候nginx开始上场了 。单个项目还好说，如下修改nginx的nginx.conf配置文件

前端打包react的文件后的dist目录，然后使用nginx反向代理

网上大多数的文章都是这样配置的，单个项目

try_files $uri $uri/ /index.html;

多个项目配置

try_files $uri $uri/ /Aproject/index.html;
try_files $uri $uri/ /Bproject/index.html;

然而这样配置后页面都是200状态接口依旧还是没有返回数据

// 访问这里的接口是正常的，后台接口是用node.js写的，返回的是json格式

location /style {
 proxy_pass   http://localhost:80808;      
 proxy_set_header  Host       $host;
 proxy_set_header  X-Real-IP  $remote_addr;
 proxy_set_header  X-Forwarded-For  $proxy_add_x_forwarded_for;

}

1. // 访问这里的接口会返回200，但是没有响应体
2. // 去掉下面的rewrite会显示404

location /api {
 rewrite  ^/api/?(.*)$ /$1 break;
 add_header backendIP $upstream_addr;
 add_header backendCode $upstream_status;
 proxy_pass http://xxxx;

}

修改node项目的路由代码将browserHistory改成history模式

删除process.env.API_ENV == ‘dev’ ? “/” :

package.json文件增加homepage

修改静态资源调用代码

最后nginx配置如下

server
{
   listen 1080;
   server_name 192.168.1.36;
       root   /data/apps-data/h5/;
       index index.php index.html index.htm default.html default.htm default.php;
       error_page      404  /errors/404.htm;
       error_page      403  /errors/403.html;
       location /flight {
               alias   /data/apps-data/h5/flight/;
               try_files $uri $uri/ /flight/index.html;
               proxy_set_header   Host             $host;
               proxy_set_header   X-Real-IP        $remote_addr;
               proxy_set_header   X-Forwarded-For  $proxy_add_x_forwarded_for;
               proxy_set_header   X-Forwarded-Proto  $scheme;
                 }
               location /flight/flightList/static/ {
               alias   /data/apps-data/h5/flight/static/;
               }
       location /hotel {
               alias   /data/apps-data/h5/hotel/;
               try_files $uri $uri/ /hotel/index.html;
               proxy_set_header   Host             $host;
               proxy_set_header   X-Real-IP        $remote_addr;
               proxy_set_header   X-Forwarded-For  $proxy_add_x_forwarded_for;
               proxy_set_header   X-Forwarded-Proto  $scheme;
               proxy_set_header Upgrade $http_upgrade;
               proxy_set_header Connection $connection_upgrade;
   }
       location /auth {
               alias   /data/apps-data/h5/auth/;
               try_files $uri $uri/ /auth/index.html;
               proxy_set_header   Host             $host;
               proxy_set_header   X-Real-IP        $remote_addr;
               proxy_set_header   X-Forwarded-For  $proxy_add_x_forwarded_for;
               proxy_set_header   X-Forwarded-Proto  $scheme;
       }
       }

最后配置二层代理线上代理线下的nginx服务

server
{
   listen 80;
   server_name hello.com;
   location / {
       proxy_redirect ~^http://work.baidu.com:1018/(.*) http://hello.com/$1;
       proxy_connect_timeout 600;
       proxy_read_timeout 600;
       proxy_send_timeout 600;
       proxy_buffer_size       64k;
       proxy_buffers           4 64k;
       proxy_busy_buffers_size 128k;
       proxy_temp_file_write_size 128k;
       proxy_set_header Host $host;
       proxy_set_header X-Real-IP $remote_addr;
       proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
       proxy_pass http://work.baidu.com:1018/;
       expires -1;
       }
   access_log logs/hotel.log;
   error_log  logs/hotel-error.log;
}