React 打包部署服务器踩坑记录

公司项目前端开发用的是React,所以自己一直在本地测试开发，最后终于开始打包上线了

项目中用axios封装了工具类来请求，自动匹配开发和测试api

if (process.env.NODE_ENV === 'development') {
      axiosIns.defaults.baseURL = '/dapi';
} else if (process.env.NODE_ENV === 'debug') {
    axiosIns.defaults.baseURL = '/dapi';
} else if (process.env.NODE_ENV === 'production') {
    axiosIns.defaults.baseURL = '/papi';
}

package.json中配置代理转发处理，访问后台接口

  "proxy": {
    "/dapi": {
      "target": "http://localhost:7***",
      "pathRewrite": {
        "^/dapi": ""
      },
      "changeOrigin": true
    },
    "/papi": {
      "target": "http://118.***.**.1**:7***",
      "pathRewrite": {
        "^/papi": ""
      },
      "changeOrigin": true
    }
  },

打包 build    npm run build  目录如下：

打包后，本地先自测

于是  serve -s build       serve -h   

访问 http://localhost:5000 没问题

服务器部署

普遍做法是用nginx 或者tomcat,当然其他的比如jetty也可以，本文常规采用nginx来部署

把打包后的build文件夹，放到服务器上的对应目录下，

修改nignx.conf 或者另外新建conf文件，include进去也行,

 server {
           listen       80;
           server_name  ma****.**.cn;
   
           access_log  logs/svi.access.log;
   
          location / {
              root   /opt/***/html/build;
              index  index.html index.htm;
          }
 
 
         location ~ /papi/ {
              proxy_pass   http://******:7***9;
            }
  
  
          error_page   500 502 503 504  /50x.html;
          location = /50x.html {
              root   html;
          }
      }

测试nginx    ./nginx -t 没问题， ./nginx -s reload 重新启动ngxin

然后浏览器访问登录没反应，F12查看请求的详情

http://m*****ds.cn/papi/login 404 

既然能请求道后台接口，说明请求时通了，继续排查

后台登录路径为 /login    /pai/login 肯定404， 说明nginx转发没有替换路径。

nginx 代理知识充电：

proxy_pass 的路径，如果不带uri的话，就是直接原路径代理匹配，带有uri的话，就去掉匹配项再匹配，

实例如下：

    （1）
     访问 http://www.test.com/testa/aaaa
     后端的request_uri为: /testa/aaaa
    location ^~ /testa/ {
        proxy_pass http://127.0.0.1:8801;
    }
    
    （2）
     访问 http://www.test.com/testb/bbbb
     后端的request_uri为: /bbbb
    location ^~ /testb/ {
        proxy_pass http://127.0.0.1:8801/;
    }

于是修改nginx配置，

proxy_pass   http://******:7***9;  
改成    proxy_pass   http://******:7***9/;

重启nginx,提示如下：

“proxy_pass” cannot have URI part in location given by regular expression,
 or inside named location, or inside “if” statement, or inside “limit_except” block

nginx知识充电：proxy_pass指令不能包含URI，相关情况分别是：正则表达式location；命名location；if；limit_except。

检查 location 配置，

 #这里用了~来匹配，所以不能加uri 
 location ~ /papi/ {
    proxy_pass   http://******:7***9;
 }
 #修改如下：
 location ^~ /papi/ {
    proxy_pass   http://******:7***9/;
 }

继续重启nginx, 没问题，访问登录页面  进入主页面，终于部署完成