如何部署ReactJs打包后的build目录文件

问题

对于ReactJs开发，通过npm run build打包完后，会生成静态文件到目录build中去。这个build就是优化瘦身后的文件，而不用像整个React项目那么大，很多依赖包。关键是，这个static文件目录build生成后，我们怎么用呢？怎么部署让别人看到？

方案

React提供了一种方案，通过安装serve来部署，但需要有node.js的环境。

$ npm install -g serve
$ serve -s build

默认端口为5000，可以改变端口：

$ serve -s build -l 4000

当然，我们需要部署的环境很可能没有node.js，其实通过nginx，apache，tomcat，springboot等都可以部署。因为build里面就是一些静态网页资源，有Web服务器就可以了。

以nginx为例，只要把build目录里面的所有资源文件，放在nginx的web-root目录就行了。

需要注意的是，如果访问nginx时出现403 Forbidden，很可能是权限问题。需要对目录进行授权：

$ chmod 755 -R web-root

然后尝试重启nginx即可。

子路径404问题

发现直接访问http://domain/aaa/bbb会报404错误，而从根目录点击访问则可以。使用了React-Router的BrowserHistory模式，需要在Nginx配置：

location / {
        try_files $uri $uri/ /index.html;
}

有了以上配置后，问题便解决了。可参考：nginx 上部署 react 项目 (opens new window)。