webpack打包react项目部署到nginx上

上篇博客提到将项目放到tomcat下，用于储存静态资源。计划赶不上变化，由于项目的需要，不适用tomcat，使用nginx，于是需要将react项目打包放到nginx下或者放到单独的文件中，通过nginx来做代理访问我们的项目。

安装nginx

于是在本地测试环境中装了一个nginx，安装很简单可以到官网下载：http://nginx.org/en/download.html

我用的是最新的nginx

安装之后，文件目录如下：

webpack打包项目

然后开始使用webpack打包我们的项目，执行

npm run build

build的配置在上篇文章中说道了，在package.json中的配置

 "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

build之后会在build目录下生成一些文件

这是一个完整的build目录(当然这个build目录可以调整，修改path的文件就行，具体的可以参考：https://www.jb51.net/article/158194.htm)，如果nginx下进行操作，那么我们就不需要为它单独起服务，我是编译后自动放到项目路径下的，可以在nginx中进行路径的配置，我们找到nginx.conf文件添加我们的项目文件路径配置

nginx配置文件访问路径

config文件中的server下增加

        root G:\\chenqk\app\React\samp\build;
        index index.html index.htm;
       
        location / {
                try_files $uri $uri/ /index.html;
        }
        location ~.*\.js$ {
            root    G:\\chenqk\app\React\samp\build\static;
        }
        location ~.*\.css$ {
            root    G:\\chenqk\app\React\samp\build\static;
        }
        if ( $uri ~ /static/(.*)\.js ) {
        rewrite		'/static/(.*)\.(js)' \$1.$2  last;
        }

        if ( $uri ~ /static/(.*)\.css ) {
        rewrite		'/static/(.*)\.(css)' \$1.$2  last;
        }

根路径的配置

主要配置root和index。root是指向你文件的路径，index指向你的index页面。

BrowerHistory配置

第一个location 是在我们前端使用路由的时候，如果用到broswerHistory时，需要增加的配置。

我们知道，在使用hashHistory的时候是不需要后台服务进行参与的，也就不需要后台进行配置。而当我们使用broswerHistory的时候，我们在浏览器中的每一条url都希望有一个对后台服务的请求，那么他就会向后台去请求资源，当然压缩后的文件在资源请求时是肯定不存在的，所以我们需要通过nginx的配置来将我们的指向到index.html下，所以需要配置一下。详情可以参考：http://react-guide.github.io/react-router-cn/docs/guides/basics/Histories.html

JS和CSS文件目录配置

第二、第三个location表示指向我的js和css所在的文件目录，在这里需要注意的是，我的css和js文件实际是在build/static/js以及css文件夹下，

而它的配置路径却只配置到static下，是因为在使用nginx的时候，访问这个js文件会自己加上js和css对应的文件目录。

我们来测试一下，修改到js和css路径，这样看起来跟实际的目录是一样的。

        location ~.*\.js$ {
            root    G:\\chenqk\app\React\samp\build\static\js;
        }
        location ~.*\.css$ {
            root    G:\\chenqk\app\React\samp\build\static\js;
        }

但是，当我们访问项目时，在进行路径跳转和刷新的时候，却会报错要么是404，要么是这个熟悉的语法错误。

首先，我的代码在本地编译之前测试是没问题的，而编译的过程中也没有报错，既然这样那一般就是路径出现了问题，从这里其实看不到什么问题的。那怎么定位问题呢？

我们可以找到nginx的日志文件

其实我们只要看error.log就可以发现路径出现了问题：

从上面就可以看出，其实他是多了一个css和js目录的，只要在配置中去掉js/css这一层级就行了。

配置重定向

第四和第五个则是对于css和js访问时的重定向。就是访问文件目录时，会重定向编译后的文件目录

在这还有个问题，如果你放到真实的nginx环境中而不是window环境下，就会发现项目是访问不了的，在这里需要注意的时，要将重定向的文件目录符改一下，因为linux下目录符是这样的"/"而不是"\"的。

至此，一个react项目冲编译到发布就算是摸索着过来了，中间碰到很多坑，不过好在都一个个的解决了。

关于nginx的配置文件修改。每次修改都需要重新启动一下nginx，具体执行命令

nginx.exe -s stop                   //停止nginx

nginx.exe -s reload                //重新加载nginx

nginx.exe -s quit                     //退出nginx

如果在window下可以直接在cmd命令切换到nginx目录执行对应的命令即可。