这篇文章主要介绍“怎么在nginx中部署一个react项目”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“怎么在nginx中部署一个react项目”文章能帮助大家解决问题。
怀来网站制作公司哪家好，找成都创新互联公司！从网页设计、网站建设、微信开发、APP开发、响应式网站设计等网站项目制作，到程序开发，运营维护。成都创新互联公司从2013年创立到现在10年的时间，我们拥有了丰富的建站经验和运维经验，来保证我们的工作的顺利进行。专注于网站建设就选成都创新互联公司。
测试项react-demo
将您的react-demo项目克隆到服务器(默认情况下，Github用于管理我们的项目)
如有需要，请安装项目环境，如node.js、纱线等。
进入项目目录，执行npm运行构建，并开始构建项目
成功构建后，将生成一个dist文件夹(取决于您的项目配置)，该文件夹中的静态文件将成为我们项目的访问文件。
要配置Nginx，Linux服务器输入：/etc/nginx/sites-enabled，然后作为管理员，为您的react项目创建一个新的配置文件，如react-demo.conf，然后编辑该文件：
服务器{
listen8080
# server _ name your . domain.com；
root/home/root/react-demo/dist；
indexindex.htmlindex.htm；
位置/
try _ files $ uri $ uri//index . html；
}
location^~/assets/{
gzip _ staticon
expiresmax
add _ header cache-control public；
}
error _ page 500502503504/500 . html；
client _ max _ body _ size20M
keepalive _ timeout10
}执行sudo服务nginx重启以重启Nginx服务。
接入项目，http://IP:8080/
注意事项：
1.如果您配置一个域名，您需要80个端口。成功后，您只需要访问域名就可以访问项目
2.如果您使用反应路由器的浏览器故事模式，请将以下配置添加到Nginx配置中：
位置/
try _ files $ uri $ uri//index . html；
}原则，因为我们的项目只有一个根条目，输入像/home这样的url就找不到这个页面。这是因为nginx会尝试加载index.html，加载index.html后，react-router会工作并匹配我们输入的/home路由，从而显示正确的主页。如果浏览器故事模式中的项目没有配置上述内容，将出现404的情况。
关于“怎么在nginx中部署一个react项目”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注创新互联行业资讯频道，小编每天都会为大家更新不同的知识点。
