使用腾讯云托管部署前端项目

背景介绍

最近腾讯云和微信团队联合推出的后端上云新姿势——微信云托管！可以使用开源模版，也可以直接使用Git项目来进行项目构建部署。并且是免运维的，无需服务器，1分钟部署小程序/公众号/网站服务端。周末抽时间体验了一下，下面以部署一个前端项目为例，来简单展示一下云托管的使用方法。目前云托管是免费额度，大家可放心体验。

使用项目

虽然云托管主推的是后端上云，但其实只要构建出容器就可以。本次演示使用的项目是

https://gitee.com/alone_snake/vitepro，该项目托管在gitee上，是一个公开项目。

这是一个使用vite构建的前端项目模版，项目根目录下有Dockerfile。内容为

FROM node:12.21.0-alpine as builder
WORKDIR /app
COPY package.json .
RUN yarn
COPY . .
RUN yarn build 
 
FROM nginx:latest
COPY --from=builder /app/dist /usr/share/nginx/html

项目需要使用Nodejs来编译构建，最后将编译出的静态文件（存放在dist目录）都拷贝到nginx镜像的/usr/share/nginx/html目录

云托管操作流程

很多同学搞不清楚云托管与云开发的关系，这里我根据官方的文档来给大家讲解一下，

云开发是指微信团队联合腾讯云推出的专业的小程序开发服务，只针对小程序，但也有一部分是支持公众号玩耶开发的，开发者无需搭建服务器，可免鉴权直接使用平台提供的 API 进行业务开发，开发者可以直接使用官方提供的api来操作云数据库中的数据。

云托管是讲项目的部署，运维给管理起来，属于项目开发流程之后的，项目开发完，需要部署，运维这时可以使用云托管。

登录

多的不说了，因为这是实践课，

要使用云托管，首先需要登录云托管的

微信云托管登录地址 https://cloud.weixin.qq.com/cloudrun/qrLogin?nextpage=console&act=tap_banner_freetry_notLogin

使用个人微信扫描，然后选择微信下的小程序或公众号。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IA93UCWm-1645410008322)(https://ask.qcloudimg.com/http-save/yehe-2680217/7e42fad8666560e89d42d9409c13da42.png)]

第一次登录后可以直接选择模版进行部署。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SedgIHJA-1645410008323)(https://ask.qcloudimg.com/http-save/yehe-2680217/87f1b24b7961405b040746aa74b2bb6a.png)]

开发者可以选择自己需要的模版进行体验。

选择Spirng boot模版进行部署

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7SI6tib8-1645410008323)(https://ask.qcloudimg.com/http-save/yehe-2680217/ba036e50f220dec94ab018f3a6980b87.png)]

部署完成后就会出现部署后的信息， 包括服务访问的公网域名地址，数据库，代码源

以上是基于官方提供的模版来进行部署体验。下面使用自己开发的前端项目来部署。

创建服务

进入收入，点击服务管理，点击创建服务

在这里插入图片描述

输入服务名称，开启公网访问

在这里插入图片描述

创建服务名称后，需要选择代码，这里可以绑定Github，或GitLab

在这里插入图片描述

一共有五种方式，GitHub，GitLab， Gitee，手动上传代码，拉取镜像。

在这里插入图片描述

前三种都需要登录平台进行授权，这种方式可以使用webhook，提交代码后就能立即构建，通过运行流水线，部署一个新的版本。

以下是Gitee的授权

在这里插入图片描述

授权后，在代码仓库处就能够选择自己账号下的所有项目

在这里插入图片描述

然后要部署服务的分支和容器暴露的端口。这里需要注意一点的是，选择的项目需要都已经容器化了，意思就是项目中有Dockerfile，能够构建出镜像。如果满足以上条件，则是无法进行部署的。

高级设置中可以设置一些构建时的环境变量，也可以指定Dockerfile的名称。

填写完成后，点击发布。

进入部署环境。

在这里插入图片描述

根据所打印的日志可以推断出一下内容，

整个流水是在Jenkins运行的

检出代码

登录腾讯的镜像仓库

开始构建镜像

构建完成后 推送 Docker 镜像到 TCR

开始部署服务

部署完成后，点击服务首页的公网访问就可以访问到部署的页面。

如下

在这里插入图片描述

在这里插入图片描述

CI/CD

修改项目部分代码，推送到Gitee，默认将代码推送到master分支就会自动触发流水线。

在这里插入图片描述

点击版本的详情可以查看构建部署的日志。

其中版本列表的备注就是本次提交的信息。

其他功能

可以查看服务的日志

可以云端调试，相当于一个简陋的在线postman。

服务监控，主要用于后端

可以为一个项目配置多个环境

设置自定义域名，只需要绑定域名，并将绑定的CNAME记录添加到域名解析中。

云托管的底层还是K8s，容器编排，Jenkins。

最后希望大家都能用的愉快。