怎么在nginx中部署一个react项目

这篇文章主要介绍“怎么在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项目”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注亿速云行业资讯频道，小编每天都会为大家更新不同的知识点。