超详细！使用腾讯云webify托管gitee的vuejs3+vite项目网站,并配置自定义域名原创

各位朋友，各位同学大家好，今天我们来了解一个好玩的产品，腾讯云的这个外部应用托管web，反呃，我们今天要拿这个应用托管来托管我们的这个get e的一个。下面的view gs3的一个项目。并且给他配置好他的这个自定域名。嗯，这个腾讯云这个webfire是一个什么东西呢。呃，我们来看到他这个官网，首先在产品里面找到这个容器与中间件，然后在这个云开发栏目下面，它有这个我们的这个外部应用托管。我们可以看它上面标了个六啊，它是一个我们新出不是很久的一个产品，我们点一下这个应用托管。那么它这个名字叫做web。那么我们这个WiFi它有什么优势呢？就是说我们的这个腾讯云WiFi。他提供了这个默认的域名，并且这个域名是支持HTTPS的。

那么这对于我们做一些前期的测试啊，或者一些嗯嗯，自己用的一个域名，自己不需要这个配域名的这个应用，它是比较有用的，它这个是免费的，那并且它自带CDN加速，当然我们也可以有自定义域名，如果我们自己有域名的话啊，在后面我会讲我们可以把这个域名解析到。这个这个我们的腾讯云WiFi。然后腾讯外法平本身也提供这个免费的证书申请，那么也支持HTPS啊，这是它的这个其中之一的这个功能。嗯，其次呢，它这个它本身是一个免费的这个CICD平台，就是说他给我们提供了这个免费的这个ID的这种功能。然后他呢，可以很快捷的绑定我们的这个代码托管平台，比如说get up get lab get e是吧，那么coding腾讯云自己的coding，那么他可以把这个代码平台直接绑定到web反，然后可以直接选web，选这个代码托管平台的应用直接进行。

快速免费的这个CCD的构建，那么构建完了以后呢，它会去产生一个这个腾讯云开发的一个环境。它本身它这个它这个部署到所在的平台啊，它其实是使用的这个腾讯云底层这个云开发base来提供服务的，所以说呢，他部署的时候，他会去向这个腾讯云外部法去申请一个环境，那么这个环境呢，它本身支持多种的付费方式，它可以按量付费，也可以这个包月付费。那么它这个对于我们小型的这个应用来说的按量付费是非诚合适啊，相当于费用非常低啊，就是按GB来算的，相当于乳羊毛了。那我们可以定义为它就是说绑定为这个代码托管平台，并且提供免费CD功能，并且提供这个云开发环境的这个按量计费的这么一个功能。

嗯，那我们这次呢，要通过这个三步来完成，我这个我们这个。VIGVIGS3的这个项目的这个部署。嗯，首先我们要去绑定这个get的平台，然后再进行构建，然后再去绑定我们自定义域名，我们再稍微再了解一下这个外部应用托管的这个。这个其他的功能吧，讲一下这个静态网站托管的这个对比吧，其实我们静态网站托管的话，它这个也有免费域名是吧，也有CDN，但是它没有CRCD，对不对？我们需要自己去啊，比如说我们view的这个项目需要自己去n n PM run build，然后再把项目传上去是吧？那么如果我们用这个wefi的话，它因为它集成是csd用的，我们是要从这个代码通管平台拉到代码，它也只能自自动构建。对吧。嗯，然后呢，它其实它这个web框架集成是什么意思呢。他就说他可以从这个外部下啦啦啦下来一个框架，直接托管到，直接托管到我们代码平台上去，这个这个倒是一个很小的点，不用管。

啊，非常适合我们这个这个静态网站啊，这个单页面我们的这种项目去托管。然后它本身呢，它这个计费是基于这个，可这个计费啊，我们来看一下它怎么去。嗯，它是怎么样一个计费规规则，我们可以看到这个产品定价，它这个云开发，它是分为好几个产品的，因为他们这个外部发底层用的是这个腾讯云嘛，云开发嘛，然后我们如果是静态网站的话，我们一般只使用到这个网站托管，就是这个网站托管这个。这个产品，那么这个网站托管它的价格非常低啊，我们可以看到是按GB来算的，我们可以看到这个角分，你看这相当于这个00:04啊。这个1GB一天，所以说非价格非常低的这个容量，容量你看一下你一个程序才多少钱，但是它这个流量的话是两毛钱1GB，你如果是小的网金的网站的话，因为它本身带C带自带CDN嘛。

带缓存边缘节点这个什么的缓存是吧，所以它价格是比较低的。那这就是他的这个计费了。那么我们现在就开始干了，来我们点这个立即使用来进到我们这个，如果他你前期没有开通的，他会要求你改开通的，我们从头开始啊，我们从头开始点这个新建应用，新建应用的话，比如说我们之前有项目，是存在哪个项目，大家选什么呢？我们现在选这个get来做这个。然后我们登录成功以后，我们去授权一下就行了。同意授权。嗯，这个功能是非常方便啊，为什么我们要去授权呢，授权以后啊，它这个可以从这个get啊去拉取到所有的项目，可以看到没有，这拉取到我所有的这个项目，嗯，对，这次我们要操作是我的这一个项目叫做企业微信GS，就是做的一个这个针对企业微信的一个测试项目啊之间和三方应用应用的一个测试项目，我们连那个导入。

导入以后，它可以自动识别我们的环境，你看到我这个哦，我们这个原始项目呢的话，它就是一个这个Y加view的一个项目，我们可以来看一下，我这是依赖于这个JS是吧，还有这个我们的这个。住的一个项目对吧。然后它会自动识别我们这个它项目的这个脚手架的，它这个工具是拿什么来做个构建的，它是识别这个外，它特别方便，你看这些东西都给我们自动填好了，我们只要点这个部署应用。我知系创建应用，然后它会告诉我们用WiFi应用创建，它会创建一个对应的云开发按量计费环境。啊，这个东西呢，就是我们可以看到基本PV1000的网站大概是一分钱到一毛钱左右，是特别便宜的，这个我们刚才已经看到，它是通过这个这个base来计费的，我们刚才也看了它这个流量费用，这个就不多说了，然后我已知悉创建应用。

创建应用，它会进行这个应用的这个资源的初始化，然后去拉取代码，然后进行构建。并进行部署，那我们来等一下，等他这个初始化资源，你看现在它进行构建了。它进行构建的，他用其实你没看到，他用的是金克去构建的，看到了吗。我们可以看到。然后你看它相当于这个登录我们的这个腾讯云这个TCB，它是腾讯云开发讯，腾讯登录腾讯云开发的这一个账号。然后进行这个登录成功，然后初始化项目部署，可以看到。他这个后面已经走的很快了，我直接放到最后面去吧。我们可以看到。你看它将会自动开启静态网站的托管能力，对吧，所以它使用的这个功能啊，就是这个静静态托管，使用我们的这个腾讯云开发的静量托管，按量付费，然后我们往底下翻。

啊，可以看到他马上构建完了。那我们看到这个成功，成功代表我们这个这个已经部署成功了，部署他要去做发布的，我们还要稍等一下他去做发布。我们可以看到，我们收到了，我在我手机上收到了一个腾讯云的一个这个消息通知他会腾讯云这个账号会给我去创建一个这个云开发的一个按量计费的一个环境，对吧。我们可以看到它发布成功了，的士发布成功了。发布成功，它底下有个按钮，本次部署已完成，您可以前往应用详情查看应用状态，我们点一下这个应用详情，我们聊到这个应用详情，应用详情里面有我们一些资源的使用，使用量，比如说这个我们使用的静态存储的容量消耗了CDN，咱们。

这个就是我们以后面是计费的一个标准啊，你看他这里又可以购买查看管理资源包啊，大家如果说觉得按量付费啊，可能对自己流量预估比较准确，你可以去购买这个你的这个容量包容量包的，那我们今天这里就不管这个了。那我们等着这个下发CDN的配置，等等等一到两三分钟啊，你如果现在不等的话，你打开这个这应用的这个域名啊，这就是呃，我们的wefi给我们分配的这个默认的域名，你如果说。你如果说现在去点这个应用的域名啊，它会404啊，因为它为什么它的CDN还没有配置成功啊，我们要稍等一会儿，我们等了一会儿，我们可以看到刚才那底下那个提示已经没了，对吧？提示已经没了，我们再打开这个我们的这个链接。啊，可以看到我这个我自己本身这个项目，我这个企业微信测试这个项目，它已经这个嗯构建成功了，然后我们通过我们这个我们的这个腾讯web，我们提供了这个免费的，并且有HTPS功能，这个域名它已经这个打开这个项目已经好使了，对吧。

啊，那么接下来呢，我们来看一下这个我们这个应用到底是被部署到哪了，我们可以往底下翻一下，我们来研究一下这个部署的这个东西啊，我们来可以看看一下啊。你再来研究一下。我们可以看到这里有个所属环境，看到了吗？所属环境，那么这个是可以点击链接过去的，我们点一下。他会来到我们这个云开发，可贝这个这个控制台里面，我们看到前面我们是外国应用托管嘛，现在来到了我们这个，呃，云开发，那说明他是把这个我们整个项目是部署在这个环境的，这个环境呢，是我们刚才说的是腾讯云开发的一个环境。那么这里面它，呃，我们前面讲了，我们这个静态网站，像我们这个单页面啊，它是使用到我们这个腾讯云开发这个静态网站托管，我们拿到这个经常网站托管，我们可以看到经常网站托管这里也显示了一个这个默认域名对不对。

然后什么索引文档对不对，然后这里看到没有，这里很熟悉对吧，09:30是不是我们这个我们的这个外T加6GS3的这个项目啊，我们看HTM是吧，打了这个SS是吧？啊其实就是这样，它是最终是构建到这里面来的。啊，这是我们的这个腾讯云WiFi底层使用的这个，呃，腾讯云开发的能力，那我们再来进行这个我们的这个。我们的那个。自定义域名，自定义域名的设置啊，我们来看到这个，呃，应用设置，应用设置里面有一个自定义域名配置，那我们来添加一个这个域名。我们的域名，比如说就叫这个我们的test To B卡，那我们首先是需要去选一个，然后我们选了这个域名以后，你可以直接点确认的。

基因点确认的话，它其实就是直接可以用的啊，但是它这个是不支持这个我们的这个HTPS的，等会我们再会去申请一个HTTPS。那等待他变更，我们可以看一下他这个解析要我们怎么配置啊，需要我们去前往这个域名DNS这个服务上去添加这个c name的这个记录，并且将这个此域名的c name记录的设置为。这个就行了啊，那我们接下来暂时截张图吧，因为我们那是另外一个厂商的，把这个域名是在另外一个那个云服务商那里，我把这个配置了以后，我们等了一段时间啊，等了一段时间我们再回来的时候，发现这个状态它已经是正常的了，状态没有显示说明这个。

配置已经是正常了的，那么我们直接来访问这个域名。直接访问这个域名啊，之前我们看是他这个腾讯外反给我们提供的默认域名啊，我们现在换一个我们绑定的这个域名，我们来看一下。OK，我们可以看到这个项目还是正常的访问的，对吧？呃，所以说这个域名是绑定成功的。但是我们这个域名，我们发现它是不安全的是吧，它是不支持HTPS的，我们HTS访问。我可以看他应该是。嗯，也能访问，但是它这个应该是一个不太正常的这个访问方式，其实这个时候呢，我们还是需要去。呃，需要去绑定这一个证书的。那么这个证书呢，我们需要去这里去申请。啊，我可以看到我之前已经申请过这个一个另外一个这个域名的证书了。

我们这次再再申请一下，我们可以申请再申请一个免费证书。我来点这个证书类型，我们点去绑定这个域名对吧，Test。这个你要test就要test是吧太，然后我们填我们自己的邮箱就行了，这里我填我的邮箱。那么剩下的我们就不用管了，这些都默认就行了，我们直接点下一步就行了啊，然后下一步呢，他告诉我们选是什么去，呃，选什么验证方式，我们还是选DNSDNS推荐的。然后我们点这个下一步啊，下一步的时候呢，他说我们要三天内完成这个DNS的解析，那其实跟刚才这个我们那个解析很像啊，我们就要去创建一个。呃，针对这个域名去创建一个这个。记录值为这个这个这个什么的，一个一个这个主机记录TST的，然后主机记录为这个类。

一个那个记录，那我们在还是以图的方式吧，啊啊，那么我在另外一个这个服务商这里，我添加了这个域名的解析啊，它是TST的，然后主页记录为这个的，然后记录值是这个。前面的话我们是那个是配的那个太那个语是吧。这两个是挺挺像的，只是说前面那个是C的，这个是TST的是吧。解析，如果大家是用的腾讯云，它本身的这个域名啊。啊，那么可以直接看这个这个文档，它就是通过这个链接链接过来的文档，它告诉你怎么去添加这个域名解析。对吧，怎么添加，大家可以从这里点一下，那么我这里发通知了，说我这个已经验证成功了。那么我点这个查看状态就行了，我们可以看到啊，他这个应该是已经成功了的，对吧，一千八嘛，对吧。

这个前，那那我们再回来，再回来去选就行了，我们在这边修改啊选，诶这里还没有啊刷新一下。有时没有的时候，就是有些异常的时候，大家刷新一下就行了，我们来再来这个应用设置，然后再修改。选帧数，我们可以看到有test这个点 ToB.com这个帧数是吧，我们点确认。确认的时候，它这个HTPS我印象当中好像是不会直接生效，再刷新一下。我们可以看到这个还是说是不安全的是吧，我们得再再等一会儿。再等一会儿，我们再等一会儿，再等它这个解析它应该有段时间才会生效，我们就再等一会就行了，刷新。这个，哎，这证书怎么又没了，来选上再点确认。

嗯。啊，他说这个操作正在进行中啊，那我们就等吧，再等一会儿。只能等着他这个把这个正数加载完成了，我们才能啊看下这个效果。那等一会儿吧，我们在等了一段时间，我们再来看一下，再点一下这个域名看一下，我们可以看到这个是没提示不安全了吧，说明这个帧数已经加载上了，它是有缓存的，然后可以看到我们这个已经产生了消耗呀。我们的存储容量居然还是零，那我们CDN消耗了这个0.30.3兆，说明它这个消耗是特别小的啊，基本上是大家可以自己做项目的时候具体去看一下。啊，这个是我的这个项目已经部署成功了，嗯，大家如果是真的要访问这个项目的话啊，建议是使用这个域名去访问，这是我做企业微信测试使用的一个这个项目。嗯，这两个我都是部署在这个WiFi上面的，所以说它这个WiFi是特别好使的，我们简单的稍微回顾一下吧，回顾一下就是我们基本上操作的话，就是说get直接构建就完了是吧，然后我们做这个域名的时候，做这个制定域名的时候，我们最开始是配了一个。

嗯，不需要证书的，就是说没有选这个证书的这么一个域名知道，然后我们后来又去申请了一个证书，上腾讯云去申请了一个证书。申请证书它是免费的，然后我们再去配置了一下这个域名域名，所以这不管是你是，嗯，这个没有HTS的这种。HTTP的它需要去配域名指向，你如果做了HTTPS也得去做域名指向是吧，他因为他都需要知道这个这个验证的这个服务器。嗯，那么这个呢，我们这个项目就算构建完了啊。那么如果大家是有这个需要的话，大家可以关注这个腾讯云的这个。

官方公众号去获取更多的信息啊，大家可以通过扫这个码去获取。那么好，这么结束，谢谢大家。