【React】React+Express部署Nginx所遇前端路由等问题

场景

• 博主将做好的react项目build，生成buid文件夹，然后拿去塞Nginx上运行。
• 后端使用Express。
• 博主一开始在React里开发时候使用的是webpack自带的devsever，里面有配置Proxy进行转发来达到同源非跨域请求。

  proxy:{
      "/api":{
        target:"http://localhost:3000",
        pathRewrite:{"^/api":""}
    }

• 博主当时试验的时候反正不加pathRewrite好像不行，这就是如果在react里面去请求/api这个路径会自动转发给localhost:3000端口。
• 等写完代码build配置Nginx发现有很多坑。

Nginx配置

• Nginx 玩的就是它配置文件，这个配置文件看起来很简单，但一开始怎么搞都不对，静态文件对了，请求的Express转发不对。
• 博主先用正向代理试验了把，发现直接报同源请求问题，然后服务端开启请求，发现后端路径就是不对。
• 后来大概搞清楚怎么配置后，监听同一端口下，配置location，发现还是后端路径不对。
• 最后发现原来在devserver请求/api/xxxx 直接跳到后端的/xxxx路由，而在nginx上会跳到api/xxxx上。
• 博主后来把后端全改了，然后发现貌似可能可以用Nginx的rewrite把这个api消掉，但不太清楚咋搞就没研究了。
  -然后还有最后一个坑。服务端路径对了后，前端进入动态路由或者一些刷新后，直接404，这跟devserver差别太大。最后通过百度找到原因：它这个优先匹配后端路由，得让他去404跳回主页交给前端操作就能达到devserver的效果。这也是一开始估计所有人学前端路由最大的疑问？后端到底怎么配的，是不是每个前端路由都要配个后端接口？如果不配后端，那么肯定就404。
• 另外最好配置一次换个端口号，不然以为Nginx重启了实际上没重启，还以为配置不对浪费时间。

    server {
        listen       55121;
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            root   C:/dist/build;
            index  index.html index.htm;
            try_files $uri $uri/ /index.html =404;#####这句必须加，前端路由关键
        }
        location /api {
            proxy_pass   http://127.0.0.1:3000; ###访问/api就把服务交给3000端口。
        }
    }

后续研究发现

• devserver配置的时候没必要rewrite路径，不然最后跟部署的路径不一样，配nginx反而更费劲了，使用

  proxy: [{
      context: ['/articledetail/api', '/api'],
      target: 'http://localhost:3002',
  }]

方法在context里配置多个请求路径代理到所需要的服务器端口上，最后就可以跟部署上路径保持一致。