• 下载
  • 社区

基于 NodeJS 创建部署云应用

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

前提条件

操作步骤

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

  1. 创建小程序

  2. 创建云应用后端服务

  3. 构建环境

  4. 准备开发环境

  5. 编写应用前端代码

  6. 编写应用后端代码

  7. 发布部署应用

  8. 连接 MySQL 链接数据库

创建小程序

  1. 登录 支付宝开放平台,选择 开发者中心 >小程序 >创建

  2. 填写 基本信息创建示例应用 小程序。

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

创建云应用后端服务

  1. 我的小程序 查看开发管理 页面。

  2. 点击左侧导航栏的 云服务(公测),在 云服务列表 页面点击 创建云服务 > 创建云应用

  3. 创建云应用 页面,选择 NodeJS 技术栈应用名称描述创建**。

构建环境

  1. 返回 云服务 页面,点击刚创建的云服务卡片中的 构建环境 按钮。

  2. 购买环境资源小程序云应用入门(Mysql 版)同意《产品服务协议》 >确认配置**。

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

  1. 订单详情确认购买
    购买成功后会自动进入
    构建环境查看应用详情返回应用列表** 。

准备开发环境

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

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

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

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

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

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

编写应用前端代码

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

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

  1. 打开 index.axml 文件。

  2. 在文件中输入如下代码,为页面加入一个按钮。

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

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

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

  1. 打开 index.js 文件。

  2. 编写响应按钮点击的函数。

// client/pages/index/index.js
Page({
  //...

  sayHello() {
    const domainName = 'app2113538814test.mapp-test.xyz';

    my.httpRequest({
      url: `https://${domainName}/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('/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;

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

本地测试。效果如下图。