南瓜慢说官方网站

  • 首页
  • 所有文章
  • 容器技术
  • SpringBoot-Cloud
  • 程序人生
  • 其它
  • 整理
  • 关于

  • 搜索
中间件 config Go Private Kubernetes pkslow Test HTTPS Redis Docker Mac 计划 Stream MongoDB Spring DevOps JVM String Map Set List 性能 Email Springboot 集合类 ArrayList Java
技术之前,先读诗书:

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

发表于 2020-07-21 | 分类于 其它 | 0 | 阅读次数 197

问题

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


欢迎关注微信公众号<南瓜慢说>,将持续为你更新...

file

推荐阅读:
如何制定切实可行的计划并好好执行
容器技术(Docker-Kubernetes)
SpringBoot-Cloud相关
Https专题

  • 本文作者: 南瓜慢说
  • 本文链接: https://www.pkslow.com/archives/reactjs-deploy-build-folder
  • 版权声明: 本博客所有文章除特别声明外,不可转载!
# 中间件 # config # Go # Private # Kubernetes # pkslow # Test # HTTPS # Redis # Docker # Mac # 计划 # Stream # MongoDB # Spring # DevOps # JVM # String # Map # Set # List # 性能 # Email # Springboot # 集合类 # ArrayList # Java
中间件 config Go Private Kubernetes pkslow Test HTTPS Redis Docker Mac 计划 Stream MongoDB Spring DevOps JVM String Map Set List 性能 Email Springboot 集合类 ArrayList Java
Springboot整合Swagger
Docker这些none:none的镜像,难道就不配拥有名字吗
  • 文章目录
  • 站点概览
南瓜慢说

南瓜慢说

多年Java开发,主要专注后端技术:Java/Spring/Springboot/微服务/大数据等。

多读书,多分享;多写作,多整理。

152 日志
7 分类
27 标签
RSS
0%
© 2020 — 2021 南瓜慢说 本站已挣扎运行:   粤ICP备20036375号