解决办法|5分钟上线个人网站——使用Webify部署网站记录部署|前端|React

最近写了一个「个人博客系统」，后台使用的是「腾讯云开发CloudBase」+「Webify自动部署」，本文简单记录一下我使用Webify部署个人博客的经历。
1. 准备工作首先将个人博客系统的代码推送到「GitHub」或者「Gitee」等代码托管平台，并在「云开发CloudBase」上注册腾讯云帐号，开通CloudBase服务。
2. 创建应用进入「Webify」，首先要添加「GitHub」或「Gitee」等平台的授权：

文章图片

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

文章图片

我的个人博客系统代码同时推送到了「GitHub」和「Gitee」，然后我导入的是「Gitee」仓库的代码，这样后面触发自动部署的稳定性会好一点。
点击「导入」之后，进入到应用配置页面，系统检测到我使用的是「React脚手架」，自动选择了React.js，其余配置默认即可。
点击「部署应用」。

文章图片

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

文章图片

随后应用便开始了第一次部署，等待3~5分钟就部署成功了。
3. 部署成功这样就算部署成功了，以后如果本地修改好代码，只要提交到绑定的Git仓库，就会自动触发部署操作，非常方便。

文章图片

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

文章图片

如果想要自定义域名，也是可以的，不过域名需要备案才可以。
点击左侧的「应用列表」，进入刚刚新建的应用，点击「所属环境」对应的链接，进入到「云开发」的应用控制台页面。

文章图片

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

文章图片

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

文章图片

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

文章图片

之后等待几分钟，自定义域名就生效了，可以通过自定义域名访问到应用。
5. 一些踩坑记录 1. React-router使用BrowserRouter后刷新出现404

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

这里我找到了两种解决方案：
（1）使用HashRouter
不使用BrowserRouter，改为使用HashRouter。

（2）云开发添加「路由配置」
继续使用BrowserRouter，但腾讯云 CloudBase 需要做一些设置。

文章图片

点击「静态网站托管」中的「基础配置」，在「路由配置」中添加一条重定向规则如下：

文章图片

错误码404时重定向到/index.html即可解决问题。
2. 部署后应用页面还是原来的版本点击「静态网站托管」中的「基础配置」，在「节点缓存配置」中设置缓存时间为0：

文章图片

在「浏览器缓存配置」中设置缓存时间为不缓存（时间为0）：

文章图片

3. React应用，如果有警告会部署失败在本地预览React应用时，就算有警告也是可以运行的，但是自动部署的时候就会报错，从而导致部署失败。
建议在本地预览时，如果出现警告，就修改代码将警告去除。
还有一个方案，在React应用的根目录下，打开package.json文件：
找到scripts下的build，在其值之前加上CI=false&&。
比如，原来的是：