React+SpringBoot项目部署

这篇文章是记录一下我刚刚部署的过程...倒不是怕忘记，只是部署花了我蛮长时间的，然而最后明白了之后，才发现超级简单...

所以写这篇文章用来帮助那些和我一样的小白...

首先我用create-react-app搭建了一个react项目(这一步操作大家可以去官网看https://reactjs.org/docs/add-react-to-a-new-app.html)

你会得到一个结构如下的项目：

image.png

我们可以通过 yarn start 运行这个项目：

image.png

image.png

跑起来的页面是这样的：

image.png

好的，现在你已经成功在开发环境中跑起来了，接下来我们来打包，然后将其部署到服务器上

打包也很简单，执行 npm run build :

image.png

你会发现在你的项目文件夹里多了个build文件夹：

image.png

image.png

然后当你点击index.html之后，会发现打开是这样的：

image.png

一片空白...然后你检查了了下index.html，发现里面的路径是这样的：

image.png

发现了啥问题没...里面的路径是绝对路径，所以当然找不到js和css以及图片资源啥的，那怎么让这些路径变成相对路径呢，很简单...我们再package.json加上homepage就行：

image.png

大家看最后一句就行...然后我们再次打包，然后再点index.html，会发现一切正常：

image.png

好的，现在我们通过build得到了html页面以及js和css和各种资源...你也发现了，我们网页的入口是index.html

所以比如说你自己有个服务器地址是 www.abc.com ，你只要在访问www.abc.com的时候把index.html返回出去就行了...因为我自己的服务器是用SpringBoot搭建的，所以我就用SpringBoot来举例子

SpringBoot返回html页面也很简单，在resource目录下新建一个public文件夹，然后把你React打包的build文件夹里的文件都丢进去就行...（这里截图是我自己的项目，我把一些.js和.json文件去掉了，因为好像没啥用）

image.png

这个时候你访问www.abc.com他就会直接返回index.html了（注意在SpringBoot里的Controller去掉对"/"的拦截）

然后你只要把SpringBoot项目部署到服务器上(如何部署SpringBoot项目大家可以看这篇文章https://blog.csdn.net/ruglcc/article/details/76147645)，然后访问你的域名，你就可以看到index.html了，比如我刚刚部署的自己的网页www.nanmian.top

OK这篇文章结束了，大家也发现了目前的网页很简单...就只有一个页面，我刚学前端...所以也不是很懂，不知道之后项目变大了这种方法还行不行...到时候我会再记录的

最后的最后，这篇文章不能再感谢我可爱的女朋友了，祝她前程似锦。