nginx上部署react项目的实例方法

 更新时间:2019年02月15日 11:38:12   作者:vVvlife  
今天小编就为大家分享一篇关于nginx上部署react项目的实例方法,小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要的朋友一起跟随小编来看看吧

测试项目:react-demo

  1. 克隆你的react-demo项目到服务器上(默认使用Github管理我们的项目)
  2. 如果需要,请安装项目环境,比如:node.js,yarn等
  3. 进入项目目录,执行npm run build,开始构建项目
  4. 构建成功之后,会生成一个dist文件夹(取决于你的项目配置),这个文件夹里的静态文件,就是我们的项目的访问文件了,
  5. 配置Nginx,Linux服务器是进入到:/etc/nginx/sites-enabled,然后以管理员身份,新建一个你的react项目的配置文件,比如:react-demo.conf,然后,编辑文件:
server {
  listen 8080;
  # server_name your.domain.com;
  root /home/root/react-demo/dist;
  index index.html index.htm;
  location / {
    try_files $uri $uri/ /index.html;
  }
  location ^~ /assets/ {
    gzip_static on;
    expires max;
    add_header Cache-Control public;
  }
  error_page 500 502 503 504 /500.html;
  client_max_body_size 20M;
  keepalive_timeout 10;
}

执行sudo service nginx restart重启Nginx服务,

访问项目,http://IP:8080/

注意事项:

1、配置域名的话,需要80端口,成功后,只要访问域名即可访问的项目

2、如果你使用了React-Router的browserHistory 模式,请在Nginx配置中加入如下配置:

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

原理,因为我们的项目只有一个根入口,当输入类似/home的url时,找不到这个页面,这是,nginx会尝试加载index.html,加载index.html之后,react-router就能起作用并匹配我们输入的/home路由,从而显示正确的home页面,,如果browserHistory模式的项目没有配置上述内容,会出现404的情况。

可参考react-router文档:

https://react-guide.github.io/react-router-cn/docs/guides/basics/Histories.html

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对脚本之家的支持。如果你想了解更多相关内容请查看下面相关链接

相关文章

  • Nginx进程调度问题详解

    Nginx进程调度问题详解

    Nginx采用的是固定数量的多进程模型,由一个主进程(MasterProcess)和数量与主机CPU核数相同的工作进程协同处理各种事件。这篇文章主要介绍了Nginx进程调度问题,需要的朋友可以参考下
    2021-09-09
  • 如何在centos上使用yum安装rabbitmq-server

    如何在centos上使用yum安装rabbitmq-server

    这篇文章主要介绍了如何在centos上使用yum安装rabbitmq-server,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-09-09
  • Nginx配置文件详解以及优化建议指南

    Nginx配置文件详解以及优化建议指南

    Nginx是一款面向性能设计的HTTP服务器,相较于Apache、lighttpd具有占有内存少,稳定性高等优势,下面这篇文章主要给大家介绍了关于Nginx配置文件详解以及优化的相关资料,需要的朋友可以参考下
    2021-09-09
  • nginx编译安装后对nginx进行平滑升级的方法

    nginx编译安装后对nginx进行平滑升级的方法

    nginx编译安装后用了一段时间后发现当前版本有漏洞或需要新的功能时就需要对当前nginx版本进行版本升级,所以这时就需到对nginx的平滑升级,如何进行平滑升级,下面就一起来了解一下
    2018-12-12
  • Nginx location 和 proxy_pass路径配置问题小结

    Nginx location 和 proxy_pass路径配置问题小结

    本文是基于 location 的匹配末尾是否配置 / 和 proxy_pass 末尾是否配置 / ,进行测试,完全还原了整个测试过程,本文给大家介绍Nginx location 基本配置及相关配置文件,感兴趣的朋友跟随小编一起看看吧
    2021-09-09
  • 前端必备Nginx配置详解

    前端必备Nginx配置详解

    这篇文章主要介绍了前端必备Nginx配置详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-09-09
  • linux下为nginx添加jvmroute模块的方法

    linux下为nginx添加jvmroute模块的方法

    这篇文章主要介绍了linux下为nginx添加jvmroute模块的方法,需要的朋友可以参考下
    2014-02-02
  • Nginx中Location从零开始的配置教程

    Nginx中Location从零开始的配置教程

    这篇文章主要给大家介绍了关于Nginx中Location从零开始的配置教程,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2018-10-10
  • Nginx服务器中配置非80端口的端口转发方法详解

    Nginx服务器中配置非80端口的端口转发方法详解

    这篇文章主要介绍了Nginx服务器中配置非80端口的端口转发方法详解,文中使用到了Nginx中的proxy_pass配置项,需要的朋友可以参考下
    2016-04-04
  • nginx禁止直接通过ip进行访问并跳转到自定义500页面的操作

    nginx禁止直接通过ip进行访问并跳转到自定义500页面的操作

    这篇文章主要介绍了nginx禁止直接通过ip进行访问并跳转到自定义500页面的操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-05-05

最新评论