5分钟上线个人网站——使用Webify部署网站记录

最近写了一个「个人博客系统」,后台使用的是「腾讯云开发CloudBase」+「Webify自动部署」,本文简单记录一下我使用Webify部署个人博客的经历。

1. 准备工作

首先将个人博客系统的代码推送到「GitHub」或者「Gitee」等代码托管平台,并在「云开发CloudBase」上注册腾讯云帐号,开通CloudBase服务。

2. 创建应用

进入「Webify」,首先要添加「GitHub」或「Gitee」等平台的授权:

5分钟上线个人网站——使用Webify部署网站记录_第1张图片

然后选择从Git仓库导入应用,选择代码存放的仓库,进行导入即可:

5分钟上线个人网站——使用Webify部署网站记录_第2张图片

我的个人博客系统代码同时推送到了「GitHub」和「Gitee」,然后我导入的是「Gitee」仓库的代码,这样后面触发自动部署的稳定性会好一点。

点击「导入」之后,进入到应用配置页面,系统检测到我使用的是「React脚手架」,自动选择了React.js,其余配置默认即可。

点击「部署应用」。

5分钟上线个人网站——使用Webify部署网站记录_第3张图片

在弹出的对话框中选择「我已知晓」。

5分钟上线个人网站——使用Webify部署网站记录_第4张图片

随后应用便开始了第一次部署,等待3~5分钟就部署成功了。

3. 部署成功

这样就算部署成功了,以后如果本地修改好代码,只要提交到绑定的Git仓库,就会自动触发部署操作,非常方便。

5分钟上线个人网站——使用Webify部署网站记录_第5张图片

4. 绑定域名

应用第一次构建成功后,可以看到,系统自动为我们分配了一个域名,使用这个默认域名即可访问到博客页面了!

5分钟上线个人网站——使用Webify部署网站记录_第6张图片

如果想要自定义域名,也是可以的,不过域名需要备案才可以。

点击左侧的「应用列表」,进入刚刚新建的应用,点击「所属环境」对应的链接,进入到「云开发」的应用控制台页面。

5分钟上线个人网站——使用Webify部署网站记录_第7张图片

点击左侧的「静态页面托管」,可以看到,刚刚部署的React应用静态文件存放在这里。

5分钟上线个人网站——使用Webify部署网站记录_第8张图片

点击上方的「基础配置」,添加自定义域名,自定义域名需要备案,同时需要上传SSL证书:

5分钟上线个人网站——使用Webify部署网站记录_第9张图片

之后需要根据提示,在「域名解析」中添加相应的操作,因为我的自定义域名是在「阿里云」购买的,需要在阿里云域名解析页面添加记录:

之后等待几分钟,自定义域名就生效了,可以通过自定义域名访问到应用。

5. 一些踩坑记录

1. React-router使用BrowserRouter后刷新出现404

如果应用是使用React开发的,并使用了BrowserRouter,那么就会出现这个问题(反正我是遇到了),刷新页面后出现404Not Found

这里我找到了两种解决方案:

(1)使用HashRouter

不使用BrowserRouter,改为使用HashRouter


	

(2)云开发添加「路由配置」

继续使用BrowserRouter,但腾讯云 CloudBase 需要做一些设置。

5分钟上线个人网站——使用Webify部署网站记录_第10张图片

点击「静态网站托管」中的「基础配置」,在「路由配置」中添加一条重定向规则如下:
5分钟上线个人网站——使用Webify部署网站记录_第11张图片
错误码404时重定向到/index.html即可解决问题。

2. 部署后应用页面还是原来的版本

点击「静态网站托管」中的「基础配置」,在「节点缓存配置」中设置缓存时间为0

5分钟上线个人网站——使用Webify部署网站记录_第12张图片

在「浏览器缓存配置」中设置缓存时间为不缓存(时间为0):

3. React应用,如果有警告会部署失败

在本地预览React应用时,就算有警告也是可以运行的,但是自动部署的时候就会报错,从而导致部署失败。

建议在本地预览时,如果出现警告,就修改代码将警告去除。

还有一个方案,在React应用的根目录下,打开package.json文件:

找到scripts下的build,在其值之前加上CI=false&&

比如,原来的是:

"build": "react-app-rewired build"

将其改为:

"build": "CI=false&&react-app-rewired build"

你可能感兴趣的:(解决办法,React,部署,前端)