使用COS托管一个最简单的react项目

概述

vue和react是当下比较热门的两样前端网站技术，下面我将介绍如何使用腾讯云coding的样例模板，把一个react项目，托管到腾讯云COS，实现静态网站访问。

实验会涉及到以下几个产品/服务：

• 对象存储COS
• Coding
• 云解析DNS

前置条件

• 一个coding（https://coding.net/）的账号。
• 一个自己的域名。

说明：出于安全原因的考虑，当使用COS作为静态网站托管的时候，不能使用COS自带的访问endpoint进行公网访问

• 具有操作COS权限的用户，获取它的secret和id。入口如下图：

对象存储的操作

创建一个存储桶，并且设置以下几样东西：

• 设置成”公有读私有写“
• 打开静态网站功能
• 添加自定义源站域名

创建存储桶，关键参数截图如下：

打开静态网站功能，关键参数截图如下：

配置自定义源站域名，关键参数截图如下：

云解析DNS的操作

把COS那边获取到的CNAME信息，在DNS控制管理台新增一条CNAME记录，如下图：

添加CNAME记录

添加完成后，如下图：

Coding的操作

使用示例代码进行构建。

依次点击”构建计划“-》”创建构建计划"-》查找react关键字

填入带红星的关键参数：

点击确定，触发立即构建，观察执行结果：

检验成果

使用域名：https://recat.${YouDomainName} 访问，效果如下图：

至此，你已经成功地实现了一个自动化react项目的开发部署。

后记

通过这个实验，你就可以获得一个自己的react的演示项目了。

后续你还可以修改代码之后，通过推送代码，实时触发构建，并且推送到COS上面。

然后就可以在前端看到自己的开发成果了！

是不是很好玩O(∩_∩)O