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

react 起源于 facebook 的内部项目，因为该公司对市场上所有 javascript mvc 框架，都不满意，就决定自己写一套，用来架设instagram 的网站。做出来以后，发现这套东西很好用，就在2013年5月开源了。由于 react的设计思想极其独特，属于革命性创新，性能出众，代码逻辑却非常简单。所以，越来越多的人开始关注和使用，认为它可能是将来 web 开发的主流工具。这个项目本身也越滚越大，从最早的ui引擎变成了一整套前后端通吃的 web app 解决方案。衍生的 react native 项目，目标更是宏伟，希望用写 web app 的方式去写 native app。如果能够实现，整个互联网行业都会被颠覆，因为同一组人只需要写一次 ui ，就能同时运行在服务器、浏览器和手机。react主要用于构建ui。你可以在react里传递多种类型的参数，如声明代码，帮助你渲染出ui、也可以是静态的html dom元素、也可以传递动态变量、甚至是可交互的应用组件。
测试项目：react-demo
克隆你的react-demo项目到服务器上（默认使用github管理我们的项目） 如果需要，请安装项目环境，比如：node.js，yarn等 进入项目目录，执行npm run build，开始构建项目 构建成功之后，会生成一个dist文件夹（取决于你的项目配置），这个文件夹里的静态文件，就是我们的项目的访问文件了， 配置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


linux云服务器划算
多台服务器一个域名备案阿里云
我司全名是荣响上海文化传播有限公司月份呢我们更换了新的网站服
抢购的腾讯云服务器
库网高防云服务器
.wang域名赎回多少钱 .wang域名赎回期多久
高稳定性HostGator香港主机推荐
做网站要在哪些方面划重点