问题
对于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 项目。