扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
这篇文章主要介绍“怎么在nginx中部署一个react项目”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“怎么在nginx中部署一个react项目”文章能帮助大家解决问题。
测试项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项目”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注创新互联-成都网站建设公司行业资讯频道，小编每天都会为大家更新不同的知识点。
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
微信二维码
移动版官网