如何在nginx中部署一个react项目

国外服务器租用，海外主机

今天海外主机向您展示了如何在nginx中部署react项目。内容简洁易懂，一定会让你眼前一亮。希望通过这篇文章的详细介绍，你能有所收获。

测试项react-demo

将您的react-demo项目克隆到服务器

如有需要，请安装项目环境，如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项目。你学到什么知识或技能了吗？如果你想学习更多的技能或丰富你的知识储备，请关注海外主机

Tags：国外服务器租用，海外主机，如何在nginx中部署一个react项目

版权声明：本站文章来源标注为YINGSOO的内容版权均为本站所有，欢迎引用、转载，请保持原文完整并注明来源及原文链接。禁止复制或仿造本网站，禁止在非www.yingsoo.com所属的服务器上建立镜像，否则将依法追究法律责任。本站部分内容来源于网友推荐、互联网收集整理而来，仅供学习参考，不代表本站立场，如有内容涉嫌侵权，请联系alex-e#qq.com处理。