基于 SOFA Boot 创建部署云应用

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

前提条件

说明：您需要在 conf/settings.xml 中配置蚂蚁金融科技 Maven 仓库地址及帐号密码，请 提交工单 来获取。

操作步骤

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

创建小程序

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

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

创建云应用后端服务

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

构建环境

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

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

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

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

说明：您可以在 应用详情 页面查看 应用运行状态 和 资源详情。在 SOFAStack 中间件 页签中可以查看支持的中间件产品功能。

开发云应用后端服务

打开 IDEA > 新建项目，选择 AntCloud CloudApp 应用，选择 SOFABoot 工程模板，点击 Next。

新建项目

填入 Project name，点击 Finish，完成项目创建。

完成项目创建

在 \app\web\src\main\resources\config\application.properties 中配置参数。

配置六个参数

文件中需要配置以下 6 个参数：

  • 应用名称　spring.application.name，必须为云应用创建时的应用名称。
  • 中间件参数　com.alipay.env，必须为 shared。
  • AntVIP 地址 com.antcloud.antvip.endpoint，在小程序中统一为 100.103.1.174。
  • 实例标识 com.alipay.instanceid
  • 访问控制键值 com.antcloud.mw.access
  • 访问控制密钥 com.antcloud.mw.secret
说明：最后 4 个参数值可以在应用详情页的 SOFAStack 中间件 页签获取。

4 个参数

运行类 SOFABootWebSpringApplication。

运行类

HTTP 访问本地端口localhost:8080 可得到回复。

HTTP 访问本地端口

选择 View > Tool Windows > AlipayDevTools，打开 小程序云应用 视窗。

打开小程序云应用 视窗

通常情况下， 小程序云应用 视窗会显示在 IDEA 界面的下方。

在菜单栏选择 Tools > Alipay DevTools > 登录账号，通过扫描二维码登录支付宝账户。

image.png

在菜单栏选择　Tools > Alipay DevTools > 关联云应用，选择刚创建的云应用 SpringBootDemo，并关联到当前工程。关联云应用后，可在 小程序云应用 视窗中查看关联的云应用详情。

在 小程序云应用 视窗，点击 云应用管理，在弹出的操作界面，点击 部署云应用。

在弹出的 部署云应用（本地构建） 操作界面，点击 本地构建，工程会被打包成 Jar 包。

点击 部署应用 将打包好的项目 Jar 包部署到测试环境上。开始部署后，云应用管理 视窗会打出部署日志。部署结束后会有消息提示部署完成。

开发小程序前端界面

打开小程序开发者工具，在菜单中选择 项目 > 新建项目。填入 项目名称 后，点击 完成，完成项目创建。

编写前端与后台交互的页面，发送请求到刚部署的云应用。

  • 修改 pages/index.axml 文件，如下：
  1. <view>
  2.   {{hello}}
  3.   <button onTap="sayHello"> Click me </button>
  4. </view>
  • 修改 pages/index.js 文件，如下：
  1.   Page({
  2.     data: {
  3.       hello: 'Hello'
  4.     },
  5.     onLoad(query) {
  6.       // 页面加载
  7.       console.info(`Page onLoad with query: ${JSON.stringify(query)}`);
  8.     },
  9.     onReady() {
  10.       // 页面加载完成
  11.     },
  12.     onShow() {
  13.       // 页面显示
  14.     },
  15.     onHide() {
  16.       // 页面隐藏
  17.     },
  18.     onUnload() {
  19.       // 页面被关闭
  20.     },
  21.     onTitleClick() {
  22.       // 标题被点击
  23.     },
  24.     onPullDownRefresh() {
  25.       // 页面被下拉
  26.     },
  27.     onReachBottom() {
  28.       // 页面被拉到底部
  29.     },
  30.     onShareAppMessage() {
  31.       // 返回自定义分享信息
  32.       return {
  33.         title: 'My App',
  34.         desc: 'My App description',
  35.         path: 'pages/index/index',
  36.       };
  37.     },
  38.     sayHello() {
  39.       my.httpRequest({
  40.         url: 'https://app2113483914test.mapp-test.xyz:80/hello', // 此处填入SpringBootDemo云应用的服务器url
  41.         complete: (res) => {
  42.           this.setData({
  43.             hello: res.data
  44.           });
  45.         },
  46.       });
  47.     }
  48.   });

项目编译后，即可从 IDE 右侧看到渲染的界面。点击 click me 按钮，应用便会将后台收到的消息展示在页面上。

IDE 渲染界面

点击右上角的 上传 按钮将小程序上传到开放平台。

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

将小程序上传到开放平台

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