基于 NodeJS 创建部署云应用

基于 NodeJS 创建部署云应用

本文介绍如何基于 NodeJS 技术栈创建并部署一个简单的 Hello World 应用程序。

前提条件

您拥有支付宝账号
您已申请开通小程序开发者权限
您已开通云服务
已下载安装小程序开发者工具

操作步骤

整个操作流程分为以下 8 步：

创建小程序
创建云应用后端服务
构建环境
准备开发环境
编写应用前端代码
编写应用后端代码
发布部署应用
连接 MySQL 链接数据库

创建小程序

登录蚂蚁金服开放平台，选择 开发者中心 > 小程序 > 创建。
填写 基本信息，点击创建按钮，创建应用名为 示例应用 小程序。

说明：一个账号下最多可以创建10个小程序；未提交过审核的小程序可以删除，删除的小程序不在计数范围。

创建云应用后端服务

在 我的小程序 页面，选择刚创建的小程序，点击查看，进入 开发管理 页面。
点击左侧导航栏的 云服务（公测），在 云服务列表 页面点击 创建云服务 > 创建云应用。
在 创建云应用 页面，选择 NodeJS** 技术栈，填入 应用名称和描述 (选填)，点击 创建**。

构建环境

返回 云服务 页面，点击刚创建的云服务卡片中的 构建环境 按钮。
在 购买环境资源 页面，选择合适的环境配置方案，此处选择 小程序云应用入门（Mysql 版），点击 同意《产品服务协议》 > 确认配置。

说明：当前测试环境该方案免费提供，但若连续 7 日未部署过代码，环境会被自动回收。

在 订单详情 页面，点击 确认购买。购买成功后会自动进入 构建环境 页面。构建过程会耗时几分钟，构建成功后，您可以选择 查看应用详情 ，或者 返回应用列表 。

准备开发环境

打开小程序开发者工具，点击 新建项目。

在新建项目向导中，选择 小程序，选择 空白模板，点击 下一步。

输入 项目名称，项目路径会自动填充，选择 云应用 为后端服务，点击完成。

项目创建好后，进入开发界面。点击右上角的登录按钮，用支付宝扫码登录。

关联前面创建的小程序应用。

关联前面构建的云应用环境，点击确定。

编写应用前端代码

编写 client/pages/index/index.axml 文件，描绘应用的视觉结构。

示例应用的逻辑非常简单，只是显示一个按钮，当点击按钮的时候调用后端服务逻辑返回 hello world。因此，index.axml 中只需一个按钮，操作如下：

打开 index.axml 文件。
在文件中输入如下代码，为页面加入一个按钮。

<view>
  <button>Click Me</button>
</view>

保存文件后窗口右侧会实时渲染效果，如下图所示。

为点击按钮增加响应逻辑。

打开 index.js 文件。
编写响应按钮点击的函数。

// client/pages/index/index.js
Page({
  //...
  sayHello() {
    const domainName = 'app2113538814test.mapp-test.xyz';
    my.httpRequest({
      url: `https://${domainName}/say-hello`,
      success: (resp) => {
        my.alert({
          title: "来自云服务的问候",
          content: resp.data.data
        });
      },
      fail: (err) => {
        my.alert({
          title: "错误信息",
          content: JSON.stringify(err)
        })
      }
    });
  }
});

说明：此处的域名 https://app2113538814test.mapp-test.xyz可以从 云应用详情 页的 二级域名 页签中复制得到。

打开 index.axml 文件，把响应函数添加为按钮的 onTap 事件的回调。

<view>
  <button onTap="sayHello">Click Me</button>
</view>

编写应用后端代码

关闭 server/config/plugin.js 中的配置的 egg-mysql 插件。

目前，该应用中还不需要使用数据库。

编写 server/app/controller/home.js。

脚手架已经在这里写了一个 index，您可以加一个 sayHello。

// server/app/controller/home.js
'use strict';
const Controller = require('egg').Controller;
class HomeController extends Controller {
  async index() {
    this.ctx.body = 'hi, egg';
  }
  async sayHello() {
    this.ctx.body = {
        data: 'Hello world!'
    };
  }
}
module.exports = HomeController;

在 server/app/router.js 里配置路由。

// server/app/router.js
'use strict';
/**
 * @param {Egg.Application} app - egg application
 */
module.exports = app => {
  const { router, controller } = app;
  router.get('/', controller.home.index);
  router.get('/say-hello', controller.home.sayHello);
};

至此，您已完成了后端服务的开发，准备将服务部署到云端。

发布部署应用

点开 云服务 右边的菜单，点击 上传服务端代码。

上传及发布过程中，可以通过 查看日志 关注部署进度。

部署完成后，在本地点击按钮测试。

测试完成后，点击页面右上角的上传按钮将小程序上传到金融科技平台，也可以点击预览，用手机支付宝 APP 扫码预览在手机上的真实效果。

重要：若要在手机上向服务器发送请求，您还需要到 小程序管理 页面 > 设置 > httpRequest 接口请求域名白名单，把 HTTP 请求的域名录入进去。

上传完毕后，登录到开放平台提交审核。审核完毕后，小程序即可进行发布操作了。

连接 MySQL 数据库

在刚才的 Hello World 应用的基础上尝试连接云应用提供的 MySQL 数据库。

在 server/config/plugin.js 里开启 egg-mysql 插件。

修改 server/config/config.default.js 中的 MySQL 配置。

修改 MySQL 数据库的用户名和密码。如果使用 admin 账号，可以在 云应用详情 页的 数据库 页签中找到 admin 账户的初始密码。

测试环境的 MySQL 中默认提供样例 sample 数据库，里面有一张预置的 user 表，从 user 表中读取数据。

修改 controller/home.js 中的 sayHello 函数，获取数据库中的数据。

// server/app/controller/home.js
'use strict';
const Controller = require('egg').Controller;
class HomeController extends Controller {
  async index() {
    this.ctx.body = 'Hello world!';
  }
  async sayHello() {
    const users = await this.app.mysql.select('user');
    const user = users && users[0] || {};
    this.ctx.body = {
      data: 'Hello! ' + user.name
    };
  }
}
module.exports = HomeController;

再次上传并部署服务端代码。

本地测试。效果如下图。

原文: https://docs.alipay.com/mini/cloud-service/bwwxu1