一键配置版:搭建高可用的微信/支付宝小程序服务

本文涉及的产品
云服务器 ECS,每月免费额度280元 3个月
云服务器ECS,u1 2核4GB 1个月
简介: 本文提供在阿里云云服务器ECS上基于CentOS 7.9 64位操作系统搭建高可用的小程序服务端的指引。同时指导您在本地开发一个简单的微信/支付宝小程序——ECS小助手,通过远程调用部署在ECS上的服务端,实现在小程序中输入框输入ECS实例ID查询实例详细信息的功能。

1.搭建微信支付宝小程序服务

1.1教程简介


本教程提供在阿里云云服务器ECS上基于CentOS 7.9操作系统搭建高可用的小程序服务端的指引。同时指导您在本地开发一个简单的微信小程序——ECS小助手,通过远程调用部署在ECS上的服务端,实现在小程序中输入框输入ECS实例ID查询实例详细信息的功能。

小程序界面的示意图如下:

1.1.1我能学到什么

  • 熟悉远程登录CentOS操作系统的ECS实例。
  • 学会在ECS实例中部署一个高可用的Python服务。
  • 开发微信小程序页面,并与服务端进行数据交互。


1.2准备环境和资源


1.2.1准备资源

部署高可用的小程序服务需要2个ECS实例(CentOS 7.9 64位)、1个CLB实例。

1.2.2领取免费试用权益

进入以下资源领取入口,单击页面右上方的登录/注册按钮,并根据页面提示完成账号登录(已有阿里云账号)、账号注册(尚无阿里云账号)或实名认证(根据试用产品要求完成个人实名认证或企业实名认证)。

如果您已有相应资源,可以跳过该步骤直接使用。如果您是产品新用户,可按下列步骤领取免费试用权益

资源领取入口

本教程配置

云服务器ECS

1核2GB 3个月

  • 地域:华北2(北京)
  • 操作系统:CentOS 7.9 64位
  • 试用数量:2(ECS01、ECS02)
  • 其他参数:保持默认值或按需选择

传统型负载均衡CLB

每月750个小时 15LCU(免费:每月750小时实例使用时间,每月15个LCU,时长3个月)

  • 地域与可用区:选择与ECS实例相同的地域,本教程选择华北2(北京)
  • 实例计费方式:按使用量计费
  • 实例类型:公网
  • IP 版本:IPv4
  • 试用数量:1

共享流量包

10GB 1个月(用于抵扣CLB公网流量费)


1.3一键配置


准备好资源后,您可以通过一键配置快速完成资源配置或应用搭建。一键配置基于阿里云资源编排服务ROS(Resource Orchestration Service)实现,旨在帮助开发者通过IaC(Infrastructure as Code)的方式体验资源的自动化配置。如需查看软件版本、安装命令等配置的具体信息,可查看教程的手动配置版。模板完成的内容包括:

  • 为ECS实例配置安全组
  • 创建角色并绑定到ECS实例
  • 安装Nginx服务并写入配置
  • 安装uWSGI Server并写入配置
  • 安装Python环境并写入代码

1.3.1操作步骤

1.打开一键配置模板链接前往ROS控制台,系统自动打开使用新资源创建资源栈的面板,并在模板内容区域展示YAML文件的详细信息。

2.ROS控制台默认处于您上一次访问控制台时的地域,请根据您创建的资源所在地域修改地域。您可以在顶部导航栏选择华北2(北京)地域,保持页面所有选项不变,单击下一步进入配置模板参数页面。

3.在配置模板参数页面修改资源栈名称,选择您申请免费试用时创建的ECS实例,设置要创建的用于ECS实例扮演的角色名称,选择创建的CLB实例。填写完所有必选信息并确认后单击创建开始一键配置。

4.当资源栈信息页面的状态显示为创建成功时表示一键配置完成。


1.4注册微信小程序


在开发小程序之前,您需要先注册微信小程序。

1.进入小程序页面,单击前往注册,根据指引填写信息和提交相应的资料,完成账号申请。

2.使用申请的微信公众平台账号登录小程序后台,单击开发管理> 开发设置,可以看到小程序的AppID,请记录AppID,后续操作中需要使用。


1.5安装小程序开发环境并创建项目


启动好后端服务后,我们接下来要开发开发小程序。先安装小程序开发环境。

1.安装Node.js开发环境,请到Node.js页面下载并安装Node.js环境。

2.下载并安装微信小程序开发工具。详细信息请参见开发工具下载

3.打开小程序开发工具,使用微信扫码登录。

4.单击加号创建微信小程序示例项目。

5.参考以下填写项目信息,最后单击新建。

  • 项目名称:例如ECSAssistant。
  • 目录:例如D:\workspace\wechat\ECSAssistant。
  • AppID:小程序的唯一标识,从小程序控制台获取。
  • 开发模式:小程序。
  • 后端服务:不使用云服务。


6.配置项目允许访问非HTTPS域名。在顶部配置栏,选择设置>项目设置,在本地设置页签,选中不校验合法域名、web-view(业务域名)、TLS版本一级HTTPS证书


1.6开发小程序


安装好开发环境后,我们来编写小程序代码。

1.生成的的小程序示例项目结构如下。可以看到小程序的项目结构中有三种前缀为app的文件,它们定义了小程序的一些全局配置。

  • app.json 应用配置。用于配置小程序的页面列表、默认窗口标题、导航栏背景色等。更多信息,请参见全局配置
  • app.acss 应用样式。定义了全局样式,作用于当前小程序的所有页面。
  • app.js 应用逻辑。可配置小程序的生命周期,声明全局数据,调用丰富的API。

小程序所有的页面文件都在pages/路径下,页面文件有四种文件类型,分别是.js、.wxml、.wxss、和.json后缀的文件。相比全局配置文件,页面配置文件只对当前页面生效。其中.wxml文件定义了当前页面的页面结构。小程序中的所有页面都需要在app.json文件中声明。更多信息,请参见代码构成
此外,项目顶层还有开发工具配置文件project.config.json和爬虫索引文件sitemap.json

ECSAssistant
├── app.js
├── app.json
├── app.wxss
├── pages
│ ├── index
│ │ ├── index.js
│ │ ├── index.json
│ │ ├── index.wxml
│ │ └── index.wxss
│ └── logs
│     ├── logs.js
│     ├── logs.json
│     ├── logs.wxml
│     └── logs.wxss
├── project.config.json
└── sitemap.json

2.编辑app.json文件,将小程序页面Title修改为ECS小助手,修改后的app.json文件内容如下。

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "ECS小助手",
    "navigationBarTextStyle":"black"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

3.编辑pages/index/index.wxss文件,定义index的页面样式,修改后的index.wxss文件内容如下。

.search-input {
  position: relative;
  margin-bottom: 50rpx;
  padding-left:80rpx;
  line-height: 70rpx;
  height: 80rpx;
  box-sizing: border-box;
  border: 2px solid #ff8f0e;
  border-radius: 100rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: border 0.2s;
}
.resultView {
  margin-top: 70rpx;
}
.result {
  position: relative;
  left: 30rpx;
  display: list-item;
  font-size: small;
}

4.编辑pages/index/index.js文件,定义搜索框的失去焦点事件,修改后的index.js文件内容如下。
❔说明
将代码中换成您刚刚创建的CLB实例的公网IP。

Page({
  data: {
    queryResult: null,
    showView: 'false',
  },
  bindblur: function(e) {
    let that = this;
    wx.request({
      url: 'http://<CLB_PUBLIC_IP>/ecs/getServerInfo',
      method: 'GET',
      data: {
        instanceId: e.detail.value
      },
      success(res) {
        if(res.statusCode == 200){
          that.setData({
            queryResult: res.data,
            showView: !that.data.showView,
          });
        }else{
          that.setData({
            showView: 'false',
          });
          wx.showToast({
            title: '请输入你的ECS实例ID',
            duration: 1500,
            icon: 'none',
            mask: true
          })
        }
      }
    })
  }
})

5.编辑pages/index/index.wxml文件,编写展示界面,修改后的index.wxml文件内容如下。

<view class='container'>
  <input placeholder='请输入你的ECS实例ID' class='search-input' value='{{ inputValue }}' bindblur='bindblur'></input>
  <view class='resultView' hidden='{{ showView }}'>
    <text class='result'>CPU数:{{queryResult.Cpu}} 核</text>
    <text class='result'>内存大小:{{queryResult.Memory}} MB</text>
    <text class='result'>操作系统:{{queryResult.OSName}}</text>
    <text class='result'>实例规格:{{queryResult.InstanceType}}</text>
    <text class='result'>公网IP地址:{{queryResult.IpAddress}}</text>
    <text class='result'>网络带宽:{{queryResult.InternetMaxBandwidthOut}} MB/s</text>
    <text class='result'>在线状态:{{queryResult.instanceStatus == 'Running' ? '运行中':'已关机'}}</text>
  </view>
</view>

6.保存后,编辑器会自动刷新。看到如下界面,表示小程序运行成功了。


1.7完成


完成以上操作后,您已经成功部署了服务端程序,并且在本地开发好了小程序。

您可以登录ECS控制台,复制刚刚创建的ECS实例ID,输入到小程序输入框中,就可以看到结果了。

您可以通过停机一台ECS模拟故障进而验证服务的可用性。操作如下:

1.登录ECS控制台,找到目标实例,在操作列单击 ,在面板单击停止

2.等ECS状态为已停止后,再次在小程序中查询ECS实例ID,看到返回正常内容,则表明服务可用。


1.8清理及后续


1.8.1清理

1.ECS提供的试用实例有按量付费实例和包年包月实例。请在阿里云免费试用确认您试用的实例类型,并参考以下规则清理:

  • 如果无需继续使用实例,可以登录ECS控制台,找到目标实例,在操作列单击 ,搜索并单击释放设置,根据界面提示释放实例。
  • 如果需要继续使用实例,请至少在试用到期1小时前为阿里云账号充值,确保账户金额不小于100.00元人民币。到期未续费的实例会因欠费而被自动停机,停机15天内实例将保留,15天后实例和数据都将被自动释放。
  • 包年包月实例到期会自动释放,释放实例的同时释放数据。
  • 如果需要继续使用实例,请在试用到期前及时续费。到期未续费的实例会因欠费而被自动停机,停机15天内实例将保留,15天后实例和数据都将被自动释放。

2.CLB免费试用权益有期限限制,权益到期后未释放的CLB实例可能产生费用。完成教程后,请参考以下场景处理CLB实例:

  • 如果无需使用CLB实例,您可以登录传统型负载均衡CLB控制台在左侧导航栏,选择传统型负载均衡CLB(原SLB)>实例管理,在实例管理页面,找到目标CLB实例,在操作列单击 >释放设置,按照界面提示手动释放实例。
  • 如果需继续使用CLB实例,请至少在试用到期1小时前为您的阿里云账号充值,确保账户金额不小于100.00元人民币。到期未续费的CLB实例会因欠费而被自动停机,停机7天内CLB实例将保留,7天后CLB实例和数据都将被自动释放。

1.8.2后续

如果您期望上线您的小程序,您需要做下面几件事:

1.申请域名,可以参考域名注册基本流程如何注册阿里云域名

2.申请SSL证书,并配置到服务器上,可以参考申请免费DV单域名试用证书

3.上传小程序并提交审核,可以参考小程序发布上线

待审核通过后,手动上线小程序,就可以在微信客户端中查看和使用小程序了。


1.9延伸阅读


快速搭建网站

搭建云上博客

部署LAMP环境(CentOS 7)

自助建站方式汇总


2.搭建高可用的支付宝小程序服务


2.1教程简介

本教程提供在阿里云云服务器ECS上基于CentOS 7.9 64位操作系统搭建高可用的小程序服务端的指引。同时指导您在本地开发一个简单的支付宝小程序——ECS小助手,通过远程调用部署在ECS上的服务端,实现在小程序中输入框输入ECS实例ID查询实例详细信息的功能。

小程序界面的示意图如下:

2.1.1我能学到什么

1.熟悉远程登录CentOS操作系统的ECS实例。

2.学会在ECS实例中部署一个高可用的Python服务。

3.开发支付宝小程序页面,并与服务端进行数据交互。

2.2准备环境和资源

2.2.1准备资源

部署高可用的小程序服务需要2个ECS实例(CentOS 7.9 64位)、1个CLB实例。

2.2.2领取免费试用权益

进入以下资源领取入口,单击页面右上方的登录/注册按钮,并根据页面提示完成账号登录(已有阿里云账号)、账号注册(尚无阿里云账号)或实名认证(根据试用产品要求完成个人实名认证或企业实名认证)。

如果您已有相应资源,可以跳过该步骤直接使用。如果您是产品新用户,可按下列步骤领取免费试用权益

资源领取入口

本教程配置

云服务器ECS

1核2GB 3个月

  • 地域:华北2(北京)
  • 操作系统:CentOS 7.9 64位
  • 试用数量:2(ECS01、ECS02)
  • 其他参数:保持默认值或按需选择

传统型负载均衡CLB

每月750个小时 15LCU(免费:每月750小时实例使用时间,每月15个LCU,时长3个月)

  • 地域与可用区:选择与ECS实例相同的地域,本教程选择华北2(北京)
  • 实例计费方式:按使用量计费
  • 实例类型:公网
  • IP 版本:IPv4
  • 试用数量:1

共享流量包

10GB 1个月(用于抵扣CLB公网流量费)


2.3一键配置

准备好资源后,您可以通过一键配置快速完成资源配置或应用搭建。一键配置基于阿里云资源编排服务ROS(Resource Orchestration Service)实现,旨在帮助开发者通过IaC(Infrastructure as Code)的方式体验资源的自动化配置。如需查看软件版本、安装命令等配置的具体信息,可查看教程的手动配置版。模板完成的内容包括:

为ECS实例配置安全组

  • 创建角色并绑定到ECS实例
  • 安装Nginx服务并写入配置
  • 安装uWSGI Server并写入配置
  • 安装Python环境并写入代码

2.3.1操作步骤

1.打开一键配置模板链接前往ROS控制台,系统自动打开使用新资源创建资源栈的面板,并在模板内容区域展示YAML文件的详细信息。

2.ROS控制台默认处于您上一次访问控制台时的地域,请根据您创建的资源所在地域修改地域。您可以在顶部导航栏选择华北2(北京)地域,保持页面所有选项不变,单击下一步进入配置模板参数页面。

3.在配置模板参数页面修改资源栈名称,选择您申请免费试用时创建的ECS实例,设置要创建的用于ECS实例扮演的角色名称,选择创建的CLB实例。填写完所有必选信息并确认后单击创建开始一键配置。

4.当资源栈信息页面的状态显示为创建成功时表示一键配置完成。


2.4注册支付宝小程序

开发支付宝小程序前需要您入驻支付宝开放平台,具体操作请参见开发者入驻

1.进入支付宝开放平台注册页根据指引填写信息和提交相应的资料,完成账号申请。

2.在支付宝开放平台上创建小程序应用,具体操作请参见创建小程序

❔说明

您可以通过此账号关联本地开发项目和小程序,上传您的小程序项目到支付宝开放平台。


2.5安装小程序开发环境并创建项目


启动好后端服务后,我们接下来要开发开发小程序。先安装小程序开发环境。

1.安装Node.js开发环境,请到Node.js页面下载并安装Node.js环境。

2.下载并安装支付宝小程序开发者工具。详细信息请参见下载说明

3.打开小程序开发者工具。

4.单击加号创建支付宝小程序空白项目。

5.按照流程,选择支付宝,模板选择空白模板,填入如下项目信息后,单击完成

  • 项目名称:例如ECSAssistant。
  • 项目路径:例如/Users/demo/ECSAssistant。
  • 框架语言:原生小程序。


2.6开发小程序


安装好开发环境后,我们来编写小程序代码。

1.生成的的小程序示例项目结构如下。可以看到小程序的项目结构中有三个前缀为app的文件,它们定义了小程序的全局配置。

  • app.json 应用配置。用于配置小程序的页面列表、默认窗口标题、导航栏背景色等。
  • app.acss 应用样式。定义了全局样式,作用于当前小程序的所有页面。
  • app.js 应用逻辑。可用于注册小程序应用,可配置小程序的生命周期,声明全局数据,调用丰富的 API。

小程序所有的页面文件都在pages/路径下,页面文件有四种文件类型,分别是.js、.axml、.acss(可选)和.json后缀的文件。相比全局配置文件,页面配置文件只对当前页面生效。其中.axml文件定义了当前页面的页面结构。
此外,小程序中的所有页面都需要在app.json文件中声明。
更多配置请参见小程序全局配置介绍

ECSAssistant
├── app.acss
├── app.js
├── app.json
└── pages
    └── index
        ├── index.axml
        ├── index.js
        └── index.json

2.编辑app.json文件,将小程序页面Title修改为ECS小助手,修改后的app.json文件内容如下。

{
  "pages": [
    "pages/index/index"
  ],
  "window": {
    "defaultTitle": "ECS小助手"
  }
}

3.在pages/index目录下,编辑index.axml文件,定义index页面的页面结构,修改后的index.axml文件内容如下。
❔说明
AXML中标签写法和HTML类似,并且支持使用变量表达式进行模板渲染,更多请参见AXML 介绍。支付宝小程序内置了丰富的UI组件,更多请参见基础组件概览

<view class='container'>
  <input placeholder='请输入你的ECS实例ID' class='search-input' value='{{ inputValue }}' onBlur='bindblur'></input>
  <view class='resultView' hidden='{{ showView }}'>
    <text class='result'>CPU数:{{queryResult.Cpu}} 核</text>
    <text class='result'>内存大小:{{queryResult.Memory}} MB</text>
    <text class='result'>操作系统:{{queryResult.OSName}}</text>
    <text class='result'>实例规格:{{queryResult.InstanceType}}</text>
    <text class='result'>公网IP地址:{{queryResult.IpAddress}}</text>
    <text class='result'>网络带宽:{{queryResult.InternetMaxBandwidthOut}} MB/s</text>
    <text class='result'>在线状态:{{queryResult.instanceStatus == 'Running' ? '运行中':'已关机'}}</text>
  </view>
</view>

4.在pages/index目录下,新建index.acss文件,定义index的页面样式,将index.acss文件内容替换为右侧代码。

.container {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 200rpx 0;
    box-sizing: border-box;
}
.search-input {
    position: relative;
    margin-bottom: 50rpx;
    padding-left: 80rpx;
    line-height: 70rpx;
    height: 80rpx;
    box-sizing: border-box;
    border: 2px solid #ff8f0e;
    border-radius: 100rpx;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: border 0.2s;
}
.resultView {
    margin-top: 70rpx;
}
.result {
    position: relative;
    left: 30rpx;
    display: list-item;
    font-size: small;
}

5.在pages/index目录下,编辑index.js文件,定义搜索框的失去焦点事件,修改后的index.js文件内容如下。

❔说明

支付宝提供了丰富的前端API和服务端API,您可以基于这些API来实现您的小程序功能,更多请参见小程序 API 使用说明

代码中替换为您创建的CLB实例的公网IP地址。

Page({
    data: {
        queryResult: null,
        showView: "false"
    },
    bindblur: function(e) {
        let that = this;
        my.httpRequest({
            url: "http://<CLB_PUBLIC_IP>/ecs/getServerInfo",
            method: "GET",
            data: {
                instanceId: e.detail.value
            },
            success(res) {
                if (res.status == 200) {
                    that.setData({
                        queryResult: res.data,
                        showView: !that.data.showView
                    });
                } else {
                    that.setData({
                        showView: "false"
                    });
                    my.showToast({
                        content: "请输入你的ECS实例ID",
                        type: 'fail',
                        duration: 3000,
                    });
                }
            }
        });
    }
});

6.保存后,编辑器会自动刷新,看到如下界面,表示小程序运行成功了。


2.7完成


完成以上操作后,您已经成功部署了服务端程序,并且在本地开发好了小程序。

您可以登录ECS控制台,复制刚刚创建的ECS实例ID,输入到小程序输入框中,就可以看到结果了。

您可以通过停机一台ECS模拟故障进而验证服务的可用性。操作如下:

1.登录ECS控制台,找到目标实例,在操作列单击 ,在面板单击停止

2.等ECS状态为已停止后,再次在小程序中查询ECS实例ID,看到返回正常内容,则表明服务可用。


2.8清理及后续

2.8.1清理

1.ECS提供的试用实例有按量付费实例和包年包月实例。请在阿里云免费试用确认您试用的实例类型,并参考以下规则清理:

  • 如果无需继续使用实例,可以登录ECS控制台,找到目标实例,在操作列单击 ,搜索并单击释放设置,根据界面提示释放实例。
  • 如果需要继续使用实例,请至少在试用到期1小时前为阿里云账号充值,确保账户金额不小于100.00元人民币。到期未续费的实例会因欠费而被自动停机,停机15天内实例将保留,15天后实例和数据都将被自动释放。
  • 包年包月实例到期会自动释放,释放实例的同时释放数据。
  • 如果需要继续使用实例,请在试用到期前及时续费。到期未续费的实例会因欠费而被自动停机,停机15天内实例将保留,15天后实例和数据都将被自动释放。

2.CLB免费试用权益有期限限制,权益到期后未释放的CLB实例可能产生费用。完成教程后,请参考以下场景处理CLB实例:

  • 如果无需使用CLB实例,您可以登录传统型负载均衡CLB控制台在左侧导航栏,选择传统型负载均衡CLB(原SLB)>实例管理,在实例管理页面,找到目标CLB实例,在操作列单击 >释放设置,按照界面提示手动释放实例。
  • 如果需继续使用CLB实例,请至少在试用到期1小时前为您的阿里云账号充值,确保账户金额不小于100.00元人民币。到期未续费的CLB实例会因欠费而被自动停机,停机7天内CLB实例将保留,7天后CLB实例和数据都将被自动释放。

2.8.2后续

如果您期望上线您的小程序,您需要做下面几件事:

1.申请域名,可以参考域名注册基本流程如何注册阿里云域名

2.申请SSL证书,并配置到服务器上,可以参考申请免费DV单域名试用证书

3.上传小程序并提交审核,可以参考小程序发布上线

待审核通过后,手动上线小程序,就可以在支付宝客户端中查看和使用小程序了。


2.9延伸阅读


快速搭建网站

搭建云上博客

部署LAMP环

自助建站方式汇总

相关文章
|
1天前
|
存储 小程序 数据库
微信小程序云开发入门教程-服务开通
微信小程序云开发入门教程-服务开通
|
1天前
|
小程序 前端开发 程序员
微信小程序开发入门教程-小程序账号注册及开通
微信小程序开发入门教程-小程序账号注册及开通
|
1天前
|
小程序 前端开发 程序员
0基础学微信小程序开发(二)基础配置
0基础学微信小程序开发(二)基础配置
|
1天前
|
小程序 JavaScript 前端开发
【原力计划小程序】1、一篇文章深入了解小程序的学习路线(以项目驱动的方式带你学习微信小程序)
【原力计划小程序】1、一篇文章深入了解小程序的学习路线(以项目驱动的方式带你学习微信小程序)
14 1
|
5天前
|
小程序
微信小程序内部跳到外部小程序
微信小程序内部跳到外部小程序
7 0
|
27天前
|
移动开发 小程序 API
【每周一个小技巧】支付宝小程序内如何跳转生活号文章
【每周一个小技巧】支付宝小程序内如何跳转生活号文章
19 0
|
27天前
|
缓存 小程序 IDE
【每周一个小技巧】支付宝小程序自定义tabbar效果
【每周一个小技巧】支付宝小程序自定义tabbar效果
14 0
|
27天前
|
小程序 JavaScript 前端开发
【经验分享】如何实现在支付宝小程序内的图片裁剪功能
【经验分享】如何实现在支付宝小程序内的图片裁剪功能
15 1
|
27天前
|
小程序
【经验分享】如何生成支付宝小程序scheme链接
【经验分享】如何生成支付宝小程序scheme链接
25 1
|
27天前
|
移动开发 小程序 JavaScript
【经验分享】记一次支付宝小程序的性能优化
【经验分享】记一次支付宝小程序的性能优化
13 0

相关产品

  • 云服务器 ECS
  • 轻量应用服务器
  • 弹性容器实例