场景简介

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

背景知识

本场景主要涉及以下云产品和服务：

• 云服务器ECS

  云服务器（Elastic Compute Service，简称ECS）是阿里云提供的性能卓越、稳定可靠、弹性扩展的IaaS（Infrastructure as a Service）级别云计算服务。一台云服务器ECS实例等同于一台虚拟服务器，内含CPU、内存、操作系统、网络配置、磁盘等基础的组件。云服务器ECS免去了您采购IT硬件的前期准备，让您像使用水、电、天然气等公共资源一样便捷、高效地使用服务器，实现计算资源的即开即用和弹性伸缩。阿里云ECS持续提供创新型服务器，解决多种业务需求，助力您的业务发展。

前提条件

云起实验室将在您的账号下开通本次实操资源，资源按量付费，需要您自行承担本次实操的云资源费用。

进入实操前，请确保阿里云账号满足以下条件：

• 已通过实名认证并且账户余额大于100。

• 云资源产生的费用需您自行承担，云起实验室不会向您征收额外费用。

• 所有实验操作将保留至您的账号，请谨慎操作。

• 实操结束后，您可以选择继续付费保留资源，或参考手册自动/手动释放资源。

创建专有网络VPC和交换机

1. 在实验页面，勾选我已阅读并同意《阿里云云起实践平台服务协议》后，单击开始实操。

2. 登录专有网络管理控制台。

3. 在左侧导航栏中，单击专有网络。

   

4. 在专有网络页⾯，在右上角切换⾄华东1（杭州）地域，单击创建专有网络。

   

5. 在创建专有网络页⾯，根据下方参数说明配置1个专有网络（VPC）和1台交换机，然后单击确定。更多关于创建专有网络和交换机信息，详情请参见创建和管理专有网络。

   	配置项	说明
   专有网络	地域	选择华东1（杭州）。
   	名称	自定义名称。
   	IPv4网段	选择手动输入IPv4地址段。
   	输入IPv4网段	输入IPv4网段，建议您使用RFC私网地址作为专有网络的网段如10.0.0.0/8，172.16.0.0/12，192.168.0.0/16。
   交换机	名称	自定义名称。
   	可用区	选择杭州可用区B。
   	IPv4网段	使用默认的IPv4网段即可。

   

   

6. 在创建专有网络页面，您可查看到创建的专有网络VPC和交换机的ID、实例名称等信息。

   

创建云服务器ECS

1. 前往云服务器ECS售卖页面。

2. 在云服务器购买页面，参考如下说明配置参数，未提及的配置保持默认或按需修改，然后选中右侧的《云服务器ECS服务条款》和《云服务器ECS退订说明》，单击确认下单。有以下两种付费模式可选择：

   • 包年包月

     重要

     推荐：符合购买条件者可点击["99计划"助力中小企业和开发者无忧上云]参加活动。

     

     参数	示例
     付费类型	包年包月
     地域	本教程所使用实例规格在华东1（杭州）。
     网络及可用区	专有网络 根据实际情况选择您的VPC网络和交换机。交换机需要选择可用区K的交换机。 若没有可使用的VPC网络和交换机，可单击下方的创建专有网络和创建交换机。
     实例	可根据自身需求选择。本教程使用的是ecs.c7.large。 参加"99计划"实例规格为固定规格。
     镜像	Alibaba Cloud Linux 3.2104 LTS 64位。 本教程以Alibaba Cloud Linux 3.2104 LTS 64位操作系统为例，如果您购买的ECS服务器使用了其他版本的操作系统，操作可能和本教程略有差异。
     公网IP	开启分配公网IPv4地址
     带宽计费模式	按使用流量 本教程以按使用流量为例，您可根据实际情况选择按固定带宽或按使用流量。
     带宽峰值	5Mbps
     安全组	选择您的安全组，若没有可选择新建安全组。
     登录凭证	自定义密码
     登录密码	自定义设置登录密码
     确认密码	再次输入登录密码
     购买时长	1个月 本教程以1个月为例，您可根据实际情况选择购买时长。 参加"99计划"需依据活动页面实际时长。

     

     

   • 按量付费

     参数	示例
     付费类型	按量付费
     地域	本教程所使用实例规格在华东1（杭州）。
     网络及可用区	专有网络 根据实际情况选择您的VPC网络和交换机。交换机需要选择可用区K的交换机。 若没有可使用的VPC网络和交换机，可单击下方的创建专有网络和创建交换机。
     实例	可根据自身需求选择。本教程使用的是ecs.c7.large。
     镜像	Alibaba Cloud Linux 3.2104 LTS 64位。 本教程以Alibaba Cloud Linux 3.2104 LTS 64位操作系统为例，如果您购买的ECS服务器使用了其他版本的操作系统，操作可能和本教程略有差异。
     公网IP	开启分配公网IPv4地址。
     带宽计费模式	按使用流量 本教程以按使用流量为例，您可根据实际情况选择按固定带宽或按使用流量。
     带宽峰值	5Mbps
     安全组	选择您的安全组，若没有可选择新建安全组。
     登录凭证	自定义密码
     登录密码	自定义设置登录密码
     确认密码	再次输入登录密码

     

     

     

3. 在创建成功对话框中，单击管理控制台。

   

   在实例页面，等待状态变为运行中后，即可使用该云服务器ECS。

   

一键配置

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

• 为ECS实例配置安全组

• 创建角色并绑定到ECS实例

• 安装Nginx服务并写入配置

• 安装uWSGI Server并写入配置

• 安装Python环境并写入代码

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

2. ROS控制台默认处于您上一次访问控制台时的地域，请根据您创建的资源所在地域修改地域。确认好地域后，保持页面所有选项不变，单击下一步进入配置模板参数页面。

   

3. 在配置模板参数页面修改资源栈名称，选择您刚刚创建的ECS实例，并设置要创建的用于ECS实例扮演的角色名称，勾选我确认，阿里云 ROS 可能创建 RAM 资源。填写完所有必选信息并确认后单击创建开始一键配置。

   

   

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

   

注册微信小程序

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

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

   

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

   

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

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

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

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

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

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

   

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

   • 项目名称：例如ECSAssistant。

   • 目录：例如D:\workspace\wechat\ECSAssistant。

   • AppID：小程序的唯一标识，从小程序控制台获取。

   • 开发模式：小程序。

   • 后端服务：不使用云服务。

   • 模板选择：TS-基础模板

   

   

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

   

开发小程序

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

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

   • app.json应用配置。用于配置小程序的页面列表、默认窗口标题、导航栏背景色等。更多信息，请参见全局配置。

   • app.acss应用样式。定义了全局样式，作用于当前小程序的所有页面。

   • app.js应用逻辑。可配置小程序的生命周期，声明全局数据，调用丰富的API。

2. 小程序所有的页面文件都在pages/路径下，页面文件有四种文件类型，分别是.ts、.wxml、.wxss、和.json后缀的文件。相比全局配置文件，页面配置文件只对当前页面生效。其中.wxml文件定义了当前页面的页面结构。小程序中的所有页面都需要在app.json文件中声明。更多信息，请参见代码构成。

3. 此外，项目顶层还有开发工具配置文件project.config.json和爬虫索引文件sitemap.json。

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

4. 编辑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"
   }

5. 编辑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;
   }

6. 编辑pages > index > inde.ts文件，定义搜索框的失去焦点事件，修改后的index.ts文件内容如下。

   说明

   将代码中<ECS_PUBLIC_IP>换成您刚刚创建的服务器的公网IP。

   Page({
     data: {
       queryResult: null,
       showView: 'false',
     },
   
   
     bindblur: function(e) {
       let that = this;
       wx.request({
         url: 'http://<ECS_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
             })
           }
         }
   
       })
     }
   })

7. 编辑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>

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

   

完成部署

1. 完成以上操作后，您已经成功部署了服务端程序，并且在本地开发好了小程序。可以在搜索框中输入实例ID，即可看到服务器参数信息。

   

拓展延伸

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

• 申请域名，可以参考域名注册基本流程如何注册阿里云域名。

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

• 上传小程序并提交审核，可以参考小程序发布上线。

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

清理资源

• 在完成实验后，如果无需继续使用资源，请根据以下步骤，先删除相关资源后，再结束实操，否则资源会持续运行产生费用。

  • 删除ROS资源栈。

    1. 进入ROS控制台。

    2. 单击部署 > 资源栈。

       

    3. 选择创建的ROS资源栈所在地域，单击右侧删除。

       

    4. 在删除资源栈对话框中选择释放资源，单击确定。

       

  • 删除云服务器ECS。

    1. 进入云服务器ECS控制台。

    2. 在左侧导航栏中，单击实例。

       

    3. 单击实例右侧图标，选择实例状态 > 释放。

       

    4. 在释放对话框中，选择立即释放后单击下一步。

       

    5. 勾选我已知晓即将释放的资源与关联资源，并了解相关数据风险，单击确认。

  • 删除安全组

    1. 进入云服务器ECS控制台。

    2. 在左侧导航栏中，单击安全组。

       

    3. 单击安全组实例右侧的删除按钮。

       

    4. 在删除安全组对话框中，单击确定。

       

  • 删除VPC和交换机。

    1. 登录专有网络管理控制台。

    2. 在左侧导航栏中，单击交换机。

       

    3. 单击交换机右侧的删除按钮。

       

    4. 在弹出的删除交换机对话框中，单击确定。

       

    5. 在左侧导航栏中，单击专有网络。

       

    6. 单击VPC右侧删除按钮。

       

    7. 在删除专有网络对话框中，单击确定。

       

  • 删除相关资源后，单击结束实操。在结束实操对话框中，单击确定。

    

• 在完成实验后，如果需要继续使用资源，您可跳过释放相关资源的操作，直接单击结束实操。在结束实操对话框中，单击确定。请随时关注账户扣费情况，避免发生欠费。