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

背景介绍

最近腾讯云和微信团队联合推出的后端上云新姿势——微信云托管!可以使用开源模版,也可以直接使用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。

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

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

拿我格子衫来

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值