「微信云托管」首篇实战|极简DEMO入门

摘要:
该项目包括在单个操作中使用微信云托管的基本功能,包括基本容器、MySQL、微信小程序调用等。

一、项目介绍

此项目基于微信云托管能力范围编写,构建了一个简单的 WEB 后端服务,统计 WEB 网页的访问日志,并保存至 serverless 形态的 mysql 数据库中,然后在小程序中调用服务接口,获得访问次数。

项目包含微信云托管在单体运行中的基础能力使用,包含基础容器、mysql、微信小程序调用等。

项目技术栈:后端服务(nodejs + express)、WEB网页(原生js)、微信小程序(原生)

如果你已经体验过微信云托管基础能力,可以继续深入体验微信云托管在腾讯云其他产品的关联使用,日志监控等能力。

二、部署流程

(1) 访问github仓库,将项目下载到本地,打开 IDE 准备对项目进行改造

(2) 访问微信云托管官网,使用微信扫码,选择自己拟用到的小程序,进入开始创建环节。

「微信云托管」首篇实战|极简DEMO入门第1张

(3) 这里环境名称根据自己用途填写即可,一般小程序项目创建一个环境即可,一个环境里可以包含多个服务,可满足绝大部分企业级需求。

(4) 如果你之前小程序中有使用过云开发,并登录过腾讯云官网配置过腾讯云其他云产品,为了方便使用,可在创建框中「网络类型」选择私人网络,将云托管环境配置到与之前相同的网络环境内(如果你不想这么做或者说你什么也没有过,直接系统默认创建即可)

(5) 明确知悉云托管环境的费用,并同意服务条款,开始创建。

(6) 创建成功后,会显示如下效果:

「微信云托管」首篇实战|极简DEMO入门第2张

(7) 开始创建mysql数据库,如下图所示:

「微信云托管」首篇实战|极简DEMO入门第3张「微信云托管」首篇实战|极简DEMO入门第4张

(8) 填写密码后,mysql正在进行初始化,请注意这里的费用信息,初始化完成后如下图所示:

「微信云托管」首篇实战|极简DEMO入门第5张

(9) 点击右上角「数据库管理」按钮,进入数据库管理后台,开始创建一个库,如下图所示,这里库名叫 online (名称随意,若更改的话注意之后操作相应改变)

「微信云托管」首篇实战|极简DEMO入门第6张「微信云托管」首篇实战|极简DEMO入门第7张

(10) 将项目目录中 database.sql 文件导入到 online 库中,效果如下:

「微信云托管」首篇实战|极简DEMO入门第8张

(11) 返回微信云托管控制台,mysql栏中添加一个账户,专门用于编程调用,如下图所示:

「微信云托管」首篇实战|极简DEMO入门第9张

(12) 在目录werunserver/db.json中,填写mysql数据库信息,其中host和port信息在控制台中

「微信云托管」首篇实战|极简DEMO入门第10张

{
  "host": "10.0.224.13",//上图中的冒号之前ip地址
  "user": "code",       //上一步设置的账户名称
  "password": "*****",  //上一步设置的密码
  "port": "3306",       //上图中的冒号之后数字
  "database": "online"  //之前创建的数据库 online
}

(13) 将项目保存,将项目目录werunserver作为根目录,上传私人git仓库,在这里已github为例。【注意一定是以werunserver为根目录

(14) 在微信云托管控制台,服务栏中,选择新建服务,如下图所示,记得勾选开启公网访问,名字随意设置(这里示例为aaa)

「微信云托管」首篇实战|极简DEMO入门第11张

(15) 创建完成后,进入服务管理,如下图所示,选择新建流水线

「微信云托管」首篇实战|极简DEMO入门第12张

(16) 流水线新建配置如下,代码源第一次使用时需要授权:

「微信云托管」首篇实战|极简DEMO入门第13张

(17) 新建完成后,如下图所示,点击开始第一次构建:

「微信云托管」首篇实战|极简DEMO入门第14张

(18) 构建完成后,如下状态,此时我们就可以开始发布环节了

「微信云托管」首篇实战|极简DEMO入门第15张

(19) 前往「部署发布」开始全量发布流程

「微信云托管」首篇实战|极简DEMO入门第16张「微信云托管」首篇实战|极简DEMO入门第17张

(20) 发布后效果如下:

「微信云托管」首篇实战|极简DEMO入门第18张

(21) 返回服务列表,在服务详情中找到公网地址,复制到浏览器打开:

「微信云托管」首篇实战|极简DEMO入门第19张

(22) 由于配置的是低成本模式,所以首次访问存在容器加载过程,耐心等待即可(不断刷新过程中会出现大概几十秒的请求失败框,正常配置网络中,无伤大雅)访问成功后效果如下,每次刷新都会有记录:

「微信云托管」首篇实战|极简DEMO入门第20张

(23) 开始微信小程序的测试,将项目中 miniprogram 做为小程序根目录用微信开发者工具导入打开,填写第一步自己创建服务相同的小程序APPID

(24) 在小程序开发者工具中打开 pages/index/index.js 文件,填写如下几处信息:

「微信云托管」首篇实战|极简DEMO入门第21张

(25) 重新运行,大功告成!

「微信云托管」首篇实战|极简DEMO入门第22张

三、项目总结

本次部署实践后,你可以继续在此项目基础上进行修改,重新推送更新代码到仓库中,流水线会自动触发构建。

在新版本发布前,可以进行充分测试,云托管提供各种测试白名单配置;测试验证后可以进行灰度发布,最终到100%新版本接单,完成新版本的全量更替;要是嫌麻烦,相信自己的本事,可以全量发布,给个痛快!

后续在控制台中会支持自定义域名等更多功能,还在路途中,记得常看看更新。

立即体验微信云托管:https://cloud.weixin.qq.com/cloudrun/

微信云托管官方社区

使用微信云托管过程中的意见建议及问题,欢迎前往官方社区与我们交流互动:https://developers.weixin.qq.com/community/minihome/mixflow/1919566493118201863

云托管官方交流群

「微信云托管」首篇实战|极简DEMO入门第23张

免责声明:文章转载自《「微信云托管」首篇实战|极简DEMO入门》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇堆越界--coredump 在malloc函数里oauth2中client_id_to_access数据膨胀问题下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

TP5.0+小程序商城构建(1)

1.导语 1.整体的思路与编程思想(大局观、AOP面向切面编程,10-20%) 2.具体的编程知识与技巧(TP5、小程序、数据库等80%) 2.课程内容与产品技术点 1.ThinkPHP5框架 1.编写业务逻辑 2.访问数据库 3.向客户端提供数据 2.MySQL 1.数据存储 2.数据表设计 3.与业务紧密集合 3.微信 1.支付 2.善于借鉴与模仿,学...

百度小程序开发实战--踩坑经历

文章列表rich-text的图片宽度问题效果如下后端返回的数据格式为string,小程序对次采用了rich-text来识别传入的htmlrich-text推荐使用node的数组模式,字符串模式会影响解析速度(因为最终还是会转换为数组类型),但是后端返回的为string格式,是由后台编辑器传入的。这就导致了无法操作css中 rich-text 里边的图片...

小程序 模态对话框自定义组件(modal)

1. 概述 1.1 说明 小程序中使用wx.showModal(Object object)打开一个模态对话框,但是目前小程序所提供的modal中的内容显示比较死板,不能够完全满足工作中所遇到的功能信息,故做一个自定义组件来处理相关的功能任务。 自定义组件所需功能: 全屏蒙版 模态对话框的显示内容:标题、内容、操作按钮 对模态框的操作,如显示与隐藏,取消...

经验分享:程序员如何快速定位问题(BUG)

让我掉下眼泪的 不止内存泄漏 让我夜夜不眠的 不止你的需求 明天还要改多久 你攥着我的手 让我感到为难的 是善变的需求 发布总是在半夜 回滚是永远的愁 错误(Bug)随时的暴漏 困扰着我心头 作为程序员,以上这些场景你一定都经历过。今天就来聊聊如何快速定位问题。 先划重点,下文所写都是一家之言,本人工作经验不多,语言表达能力有限,如果写的不好,还望轻喷...

uniapp-小程序开发中遇到的问题:

ps:约1月 || 单个项目完成时 问题1:小程序 v-show class切换失效? uniapp写的自定义组件。v-show 绑定 一个状态值 切换显示。 chrome 调试没问题。 运行在小程序开发程序上,直接展开了。未隐藏,且v-show没生效。 看参考得知,是v-show在自定义组件上不会生效(微信小程序) 最快解决方案,将 v-show 换为...

使用sourceMap文件定位小程序错误信息

sourceMap是什么 在前端开发过程中代码难免会有错误,即便是再小心,也有可能出现 Cannot read property 'xxx' of null 这样的低级失误,debug自然是家常便饭。如何使用chorme的控制台进行debug也有许多技巧,但本文的关注点不在此,不予讨论。 在使用构建工具时,sourceMap相相信大多数人都见过,也知道we...