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

2022-04-10 10:31:14 浏览数 (1)

背景介绍

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

使用项目

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

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

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

代码语言:javascript复制
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

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

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

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

选择Spirng boot模版进行部署

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

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

创建服务

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

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

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

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

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

以下是Gitee的授权

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

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

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

填写完成后,点击发布。

进入部署环境。

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

整个流水是在Jenkins运行的

检出代码

登录腾讯的镜像仓库

开始构建镜像

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

开始部署服务

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

如下

CI/CD

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

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

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

其他功能

可以查看服务的日志

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

服务监控,主要用于后端

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

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

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

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

0 人点赞