这篇文章是记录一下我刚刚部署的过程...倒不是怕忘记,只是部署花了我蛮长时间的,然而最后明白了之后,才发现超级简单...
所以写这篇文章用来帮助那些和我一样的小白...
首先我用create-react-app搭建了一个react项目(这一步操作大家可以去官网看https://reactjs.org/docs/add-react-to-a-new-app.html)
你会得到一个结构如下的项目:
我们可以通过 yarn start 运行这个项目:
跑起来的页面是这样的:
好的,现在你已经成功在开发环境中跑起来了,接下来我们来打包,然后将其部署到服务器上
打包也很简单,执行 npm run build :
你会发现在你的项目文件夹里多了个build文件夹:
然后当你点击index.html之后,会发现打开是这样的:
一片空白...然后你检查了了下index.html,发现里面的路径是这样的:
发现了啥问题没...里面的路径是绝对路径,所以当然找不到js和css以及图片资源啥的,那怎么让这些路径变成相对路径呢,很简单...我们再package.json加上homepage就行:
大家看最后一句就行...然后我们再次打包,然后再点index.html,会发现一切正常:
好的,现在我们通过build得到了html页面以及js和css和各种资源...你也发现了,我们网页的入口是index.html
所以比如说你自己有个服务器地址是 www.abc.com ,你只要在访问www.abc.com的时候把index.html返回出去就行了...因为我自己的服务器是用SpringBoot搭建的,所以我就用SpringBoot来举例子
SpringBoot返回html页面也很简单,在resource目录下新建一个public文件夹,然后把你React打包的build文件夹里的文件都丢进去就行...(这里截图是我自己的项目,我把一些.js和.json文件去掉了,因为好像没啥用)
这个时候你访问www.abc.com他就会直接返回index.html了(注意在SpringBoot里的Controller去掉对"/"的拦截)
然后你只要把SpringBoot项目部署到服务器上(如何部署SpringBoot项目大家可以看这篇文章https://blog.csdn.net/ruglcc/article/details/76147645),然后访问你的域名,你就可以看到index.html了,比如我刚刚部署的自己的网页www.nanmian.top
OK这篇文章结束了,大家也发现了目前的网页很简单...就只有一个页面,我刚学前端...所以也不是很懂,不知道之后项目变大了这种方法还行不行...到时候我会再记录的
最后的最后,这篇文章不能再感谢我可爱的女朋友了,祝她前程似锦。