基于 Spring Boot 创建部署云应用

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

前提条件

操作步骤

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

创建小程序

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

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

创建云应用后端服务

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

构建环境

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

  • 在 购买环境资源 页面，选择合适的环境配置方案，点击 同意《产品服务协议》 > 确认配置。

说明：此处选择 小程序云应用入门（Mysql版），当前测试环境该方案免费提供，但若连续 7 日未部署过代码，环境会被自动回收。

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

开发云应用后端服务

打开 IDEA > 新建项目，选择 AntCloud Initializer 应用，选择 SpringBoot，点击 Next。

选择 AntCloud Initializer 应用

填写项目名（Project name），点击 Finish 完成项目创建。

填写项目名（Project name）

SpringBoot 示例程序功能简单，运行类 com.example.demo.DemoApplication，HTTP 访问本地端口 localhost:8080 可得到回复。

示例程序

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

打开 小程序云应用 视窗

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

小程序云应用 视窗显示

在 小程序云应用 视窗中，点击 登录账号 ，通过扫描二维码登录支付宝账户。

登录账号

点击 关联小程序，选择刚创建的云应用 SpringBootDemo，并关联到当前工程。

关联小程序

关联到当前工程

关联云应用后，可在 小程序云应用 视窗中查看关联的云应用详情

查看关联的云应用详情

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

部署云应用

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

本地构建

点击 部署应用 将该打包好的项目 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: 'http://app2113483914test.mapp-test.xyz:80/hello', // 此处填入 SpringBootDemo 云应用的服务器 URL
  41.         success: (res) => {
  42.           this.setData({
  43.             hello: res.data
  44.           });
  45.         },
  46.       });
  47.     }
  48.   });

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

IDE 右侧渲染界面

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

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

将小程序上传到开放平台

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