将React项目部署到本地Nginx服务器上

过程很曲折，所以记录下来。

首先我的项目是一个React+Redux+React-Router的单页应用。

1. 配置package.json

首先配置项目中的package.json，这一步非常非常重要

加上字段

"homepage": "http://localhost:8000/dianping",

这里要重点说明一下这个字段是映射服务器的，所以这个路径非常重要

不要写根目录，如果你写成下面这样，那项目是会出现非常多问题的！

"homepage": ".", 
"homepage": "./", 
"homepage": "http://localhost:8000"

写第三种会导致项目404，找不到js和css等静态资源

写第一种和第二种会导致二级路由无法匹配，只能匹配一级路由

所以一定不要写错，写上域名和项目目录名，这里是本地操作，所以我把域名写成了http://localhost:8000

2. 配置Nginx

Nginx安装好了之后，打开conf/nginx.conf

配置我们的服务器

server {
    listen      8000;
    server_name localhost;

    location /dianping {
        root    "D:/nginx-1.16.0/web"; 
        index   index.html;
        try_files   $uri /dianping/index.html;
    }

    location /mock {
        root    "D:/nginx-1.16.0/web/dianping";
    }
}

注意点有好几个，首先把打包后的项目放在D:/nginx-1.16.0/web/dianping下（dianping是我的项目名）

root这里最好写绝对路径，写相对路径也可以，路径到web就可以，不要多写

try_files $uri /dianping/index.html 添加这一行的原因，是因为单页面应用，路由不能被服务器正常匹配，会显示404，因此服务器无法匹配的路由，均定向到dianping/index.html下

这几行的原因是：我写的接口是这样的/mock/getDetail/.....，应该改写成/dianping/mock/getDetail....，但是接口比较多，改起来比较麻烦，就让Nginx帮忙做了这件事情

location /mock {
    root    "D:/nginx-1.16.0/web/dianping";
}