一站式快速开发多平台小程序
手动部署
110
https://www.aliyun.com/solution/tech-solution/develop-applets
方案概览
在本方案中,您可以使用阿里云多端低代码开发平台魔笔可视化搭建适配于微信和支付宝两个平台的小程序应用客户端,从而减少开发工作量。此外,本方案使用云效、云服务器等服务开发可持续构建的服务端应用。最终帮助您的企业快速搭建适用于多平台的小程序应用。
方案架构
方案提供的默认设置完成部署后在阿里云上搭建的多平台小程序应用架构如下图所示。
本方案相比于传统小程序开发,通过魔笔开发适配于多平台的小程序,可以提升开发效率降低维护成本,通过云效持续构建服务端应用,提升服务部署效率。本方案的技术架构包括以下内容:
应用
小程序服务端应用
支付宝小程序端应用
微信小程序端应用
基础设施和云服务
1个专有网络VPC:为云服务器ECS、云数据库 RDS MySQL 等云资源形成云上私有网络。
1台交换机:将1台云服务器ECS和1台云数据库RDS连接在同一网络上,实现它们之间的通信,并提供基本的网络分段和隔离功能。
1台云服务器ECS:用于部署小程序后端服务。
1个云数据库RDS MySQL:为小程序后端服务提供数据服务。
云解析DNS:将用户的请求解析到ECS。
1个域名:用于为小程序后端程序提供访问域名。
多端低代码开发平台魔笔:通过图形化界面可视化地配置应用程序,可导出支持多个平台的小程序代码。
云效:一站式 DevOps 平台,支持通过流水线构建持续交付的研发流程。
部署准备
10
开始部署前,请按以下指引完成账号申请、账号充值。
准备账号
部署资源
20
请按照以下步骤部署方案中的所有资源。
创建专有网络VPC和交换机
您需要创建专有网络VPC和交换机,为云服务器、数据库等构建云上的私有网络。
登录专有网络管理控制台。
在左侧导航栏,单击专有网络。
在顶部菜单栏,选择华东1(杭州)地域。
在专有网络页面,单击创建专有网络。
在创建专有网络页面,配置1个专有网络和1台交换机。
项目
说明
示例值
VPC名称
建议您在部署过程中新建一个VPC作为本方案的专有网络。部署过程中填写VPC名称即可创建对应名称的VPC。
长度为2~128个字符,以英文大小写字母或中文开头,可包含数字、下划线(_)和连字符(-)。
VPC_HZ
IPv4网段
在创建VPC时,您必须按照无类域间路由块(CIDR block)的格式为您的专有网络划分私网网段。阿里云VPC支持的网段信息请参见组成部分。
在网络规划时可以按照管理网段-开发网段-测试网段-生产网段等规则做好规划。网段一旦投入使用,调整过程复杂,因此规划十分重要。
192.168.0.0/16
Vswitch名称
建议您在部署过程中在新建的VPC内创建虚拟交换机。部署过程中填写交换机名称即可创建对应名称的虚拟交换机。
长度为2~128个字符,以英文大小字母或中文开头,可包含数字、下划线(_)和连字符(-)。
vsw_001
可用区
建议选择排序靠后的可用区,一般此类可用区较新。新的可用区资源更充沛,新规格也会在新的可用区优先上线。
可用区 J
IPv4网段
每台虚拟交换机需要一个IPv4网段
192.168.1.0/24
创建安全组
您已经创建了专有网络VPC和交换机。接下来您需要创建1个安全组,用于限制该专有网络VPC下交换机的网络流入和流出。
在左侧导航栏,选择网络与安全>安全组。
在顶部菜单栏,选择华东1(杭州)地域。
在安全组页面,单击创建安全组。
在创建安全组页面,创建1个安全组。
项目
说明
示例值
名称
设置安全组的名称。
SecurityGroup_1
网络
选择之前规划的专有网络VPC。
VPC_HZ
安全组类型
本方案选择普通安全组,具体差异您可以参考普通安全组与企业级安全组。
普通安全组
创建云服务器ECS
接下来,您需要创建1台云服务器ECS实例,来部署小程序后端服务。
在左侧导航栏,选择实例与镜像>实例。
在顶部菜单栏,选择华东1(杭州)地域。
在实例页面,单击创建实例。
在云服务器ECS购买页面,创建1台云服务器ECS。
项目
说明
示例值
付费类型
付费类型影响实例的计费和收费规则。ECS计费的详细信息请参见计费方式概述。
按量付费
地域
实例所在地域
华东1(杭州)
网络及可用区
选择刚刚创建的专有网络VPC和交换机。
VPC_HZ、vsw_001
实例
ECS的实例规格及内核、vCPU数量。关于ECS选型的最佳实践请参见ECS选型最佳实践。
ecs.e-c1m2.large
镜像
ECS的“装机盘”,为ECS实例提供操作系统、预装软件等。
在公共镜像中选择Alibaba Cloud Linux
镜像版本
镜像的版本。
Alibaba Cloud Linux 3.2104 LTS 64位
系统盘类型
硬盘类型。
ESSD Entry
系统盘容量
硬盘容量。
40 GiB
公网IP
用于访问外网和提供小程序后端服务。
选中分配公网 IPv4 地址
带宽计费方式
由于本方案为解决方案示例,因此选择按使用流量,以节省流量成本。
按使用流量(CDT)
带宽值
本方案以5 Mbps为例。
5 Mbps
安全组
使用之前创建的安全组。选则已有安全组。
SecurityGroup_1
管理设置
选择设置自定义密码,方便后续登录机器安装服务环境。
自定义密码
在购买页右下角,勾选协议,单击确认下单完成购买。
配置服务器
登录云服务器ECS管理控制台。点击右上角的远程连接,并使用root权限登录到云服务器。
安装java。
执行以下命令。
yum upgrade & yum install java-1.8.0-openjdk-devel
验证安装成功,请输入
java -version
,看到如下内容表明安装成功。
创建云数据库 RDS MySQL
您已经创建1台云服务器ECS。接下来您需要创建云数据库RDS MySQL实例、数据库、数据库账号。您需要记录创建的云数据库的内网连接地址、数据库名称、账号、密码用于之后的服务端配置。
访问RDS管理控制台,单击创建实例。
在顶部选择快捷创建方式。
项目
说明
示例值
付费类型
支持包年包月、按量付费和Serverless。本方案以按量付费为例。
按量付费
地域
本方案以华东1(杭州)地域为例。
华东1(杭州)
引擎
本方案以MySQL为例。
MySQL 8.0
实例规格
关于不同规格对比,请参见产品规格。
本方案选择基础系列、通用云盘的mysql.n2e.medium.1规格。
mysql.n2e.medium.1
存储空间
默认40GB。
40GB
网络
选择之前规划的专有网络VPC和选择之前规划的交换机。
VPC_HZ
vsw_001:192.168.1.0/24
创建数据库:
访问RDS实例列表,在上方选择地域,然后单击目标实例ID。
在左侧导航栏中单击数据库管理。
单击创建数据库。
设置如下参数。
参数
说明
数据库(DB)名称
长度为2~64个字符。
以小写字母开头,以小写字母或数字结尾。
支持小写字母、数字、下划线和中划线。
数据库名称在实例内必须唯一。
说明数据库名称中如果包含
-
,创建出的数据库的文件夹的名字中的-
会变成@002d
。支持字符集
选择需要的字符集。
备注说明
数据库相关的备注说明,支持输入2~256个字符。
单击创建。
创建数据库账号:
访问RDS实例列表,在上方选择地域,然后单击目标实例ID。
在左侧导航栏选择账号管理。
单击创建账号。
说明账号重名或账号创建过于频繁(上一个账号还未创建结束)可能会有报错提示,出现该情况时,请检查账号名称是否重复或在上一个账号创建完成后再创建下一个账号。
填写数据库账号。
以小写字母开头,以小写字母或数字结尾。
支持小写字母、数字和下划线。
长度为2~32个字符。
选择账号类型。
普通账号:如果已创建数据库,则需选择要授权的数据库,单击添加至右侧,并设置权限:读写(DDL+DML)、只读、仅DDL或仅DML。
高权限账号:无需选择要授权的数据库,因为高权限账号拥有实例里所有数据库的权限。
说明高权限账号与普通账号的详细区别,请参见账号类型。
如果无法选中高权限账号,说明实例里已经有一个高权限账号。
填写账号密码:
长度为8~32个字符。
至少包含大写字母、小写字母、数字、特殊字符中的任意三种。特殊字符为!@#$%^&*()_+-=
单击确定。
设置白名单:
在左侧导航栏,选择白名单与安全组。
在顶部Tab页签,选择安全组,单击添加安全组按钮。
在选择安全组面板,选择规划的安全组,然后单击确定。
获取数据库的内网地址:
在左侧导航栏,单击数据库连接。
复制内网地址。
创建数据库表
访问RDS实例列表,在上方选择地域,然后单击目标实例ID。
在上方,单击登录数据库。
在弹出的DMS页面中,填写数据库账号名和密码,然后单击登录。
在左侧数据库实例->已登录实例中选择目标数据库。
执行如下建表语句。
CREATE TABLE `todo_list` ( `id` bigint NOT NULL COMMENT 'id', `title` varchar(128) NOT NULL COMMENT 'title', `desc` text NOT NULL COMMENT 'description', `status` varchar(128) NOT NULL COMMENT 'status 未开始、进行中、已完成、已取消', `priority` varchar(128) NOT NULL COMMENT 'priority 高、中、低', `expect_time` datetime COMMENT 'expect time', `actual_completion_time` datetime COMMENT 'actual completion time', `gmt_created` datetime NOT NULL DEFAULT CURRENT_TIMESTAMP COMMENT 'create time', `gmt_modified` datetime NOT NULL DEFAULT CURRENT_TIMESTAMP COMMENT 'modified time', PRIMARY KEY (`id`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_0900_ai_ci ;
执行以下代码,插入一条测试数据。
INSERT INTO todo_list (id, title, `desc`, `status`, priority, expect_time) value(1, "创建一个小程序", "使用阿里云解决方案快速搭建一个小程序应用", "进行中", "高", "2024-04-01 00:00:00")
部署服务端
20
创建流水线
配置流水线
云效支持多种流水线源,如多种代码仓库、已经编译好的代码包、对接Jenkins及另一个流水线的产出物。
进入流水线后,界面会弹出主机部署界面,在右上角点“×”(第“4”步骤有指引),先在左侧点击添加流水线源
单击添加流水线源。
选择流水线源为代码源,选择Codeup。
点击新建代码仓库。
在代码管理页面右上角,单击导入库。
在导入代码库弹出框,选中URL导入,在源代码仓库地址填入
https://atomgit.com/aliyun_solution/miniapp-demo.git
,单击确定。回到流水线源配置页面,选择刚刚创建的代码仓库。并点击添加,完成流水线源的配置。
配置Java构建上传。
单击Java构建上传。
在右侧配置弹窗内,单击构建物上传,在打包路径下新增一个deploy.sh。
配置环境变量,您需要将数据库连接地址和账号密码配置到流水线环境变量中。
在页面顶部导航选中变量和缓存,在页面中字符变量模块单击新增变量。
填入数据库相关信息,并设置成私密模式。相关数据可在数据库控制台,进入数据实例详情页面查看。
变量名称
默认值
APPLETS_RDS_ENDPOINT
数据库连接地址
APPLETS_RDS_USER
数据库用户名
APPLETS_RDS_PASSWORD
数据库密码
APPLETS_RDS_DB_NAME
数据库名称
配置部署任务。
单击主机部署。
制品:下拉选择上游构建阶段的产物,如制品名称.Artfacts_xxx。
主机组:
单击创建主机组,在新建主机组模态框中,填入自定义的主机组名称,然后单击确定。
进入主机详情页面,单击添加新主机,添加方式选择阿里云ECS,单击添加服务连接,按照提示完成RAM授权,创建服务连接。
地域选择杭州,选择创建的ECS,单击保存。
回到刚刚的主机部署页面,主机组选择刚刚创建的主机组。
部署脚本填入如下脚本
tar zxvf /home/admin/app/package.tgz -C /home/admin sh /home/admin/deploy.sh restart /home/admin/target/miniapp-demo-0.0.1-SNAPSHOT.jar
单击保存并运行。
验证
登录ECS控制台,在实例列表中找到之前创建的ECS实例,在IP地址列,复制公网IP。
粘贴到浏览器地址栏访问,看到如下页面表示服务已经正常启动。
小程序端搭建与部署
30
创建应用
开通多端低代码开发平台魔笔。
登录魔笔控制台。
在顶部导航栏选择应用管理,单击添加应用。
选择应用类型为 小程序,输入应用名称为待办事项管理平台,选择空白模板。
点击确定后,进入应用设计器。
搭建应用
创建导航栏。
在左侧导航组件中,从布局中拖拽一个容器到页面顶部。
从文本中拖拽一个文本放置到容器中,在右侧样式设置文字粗细为粗体;字色改为蓝色;对齐方式为中;行高设置为2;文字内容改为TODO List。
集成服务端API。
打开集成管理面板,点击添加连接器,点击 API 集成。
在接口定义面板中,填入API信息,打开调测模式,获取API返回结果。URL使用您后端服务的域名或ECS公网IP。单击测试按钮获取接口数据。
单击解析为Response Body,将数据解析为接口配置的Response。
单击保存结构体,将数据保存为结构体。然后单击确定,完成创建。
打开数据模型,点击添加结构体转实体映射。
在弹出的添加面板中,设置名称并选择结构体。
进入跳转页面后,单击自动生成映射,进入自动生成映射弹窗,单击内存实体,映射完成后,单击完成。
配置页面列表。
左侧菜单,选择页面管理,单击首页,进入首页配置。
在左侧菜单中,从数据容器拖拽一个List到页面中。
在右侧配置界面,选择逻辑流。
在选择后端逻辑流、前端逻辑流弹窗,单击添加逻辑流。在添加逻辑流弹窗,设置如下参数。数据模型选择解析的列表data数据。
单击箭头,跳转到逻辑流设计页面,进行配置。
展开左侧「其他操作」面板,将「后端调用指定的集成 API」操作拖入主干。鼠标聚焦「后端调用指定的集成 API」节点,并在右侧配置面板中选择之前集成的「查询TODOList」 API 。
在逻辑流中加入结构体对象转实体对象,配置数据转换。
配置查询对象,获取返回结果中的列表数据。
配置结果,设置返回值。
回到首页配置页面,单击一键填充组件,选择要填入的字段。
通过拖拽调整页面如下。
发布并下载源码
在顶部导航栏右侧,单击提交按钮,提交成功后,单击发布。
发布成功后,点击点击查看,跳转到部署信息页面,单击查看环境详情,下载小程序源码到本地。
下载支付宝小程序客户端运行小程序
上传到支付宝小程序审核需要一定时间,您可以在本地安装环境并下载小程序开发工具,进行本地验证。然后再上传到支付宝小程序。
下载微信小程序客户端运行小程序
上传到微信小程序审核需要一定时间,您可以在本地安装环境并下载小程序开发工具,进行本地验证。然后再上传到微信小程序。
在开发小程序之前,您需要先注册微信小程序。
安装小程序开发环境,并运行代码。
申请域名与证书
20
域名申请和备案
创建域名信息模板并实名认证。如果您已经拥有域名,可跳过此步骤。如果您使用当前部署的服务器去申请域名备案,因备案要求,需要将云服务ECS实例从按量计费转为包年包月,具体请参考按量付费转包年包月。
购买域名
查询域名。
登录阿里云域名注册。
在阿里云域名注册页面的搜索框中,搜索您想要注册的域名以及域名后缀,单击查询域名。
加入域名清单。
对于查询结果为未注册的域名,单击加入清单。
在域名清单中确认已添加的域名,单击立即购买。
确认订单信息。
在确认订单页面,选择域名的购买年限和域名所有者类型。
说明若您注册的是“.gov.cn”后缀域名,域名持有者类型只能为企业。
选择已完成实名认证的域名持有者信息模板。
选择支付方式后,单击立即支付。
ICP备案前准备
提交ICP备案
填写信息进行校验。
在阿里云ICP代备案管理系统,根据界面提示,按要求填写主办单位信息和网站/App信息等,系统将根据您所填信息,自动校验是否可以进行ICP备案。
阿里云初审。
提交ICP备案初审订单后,订单状态为阿里云审核中,阿里云将会在1个工作日左右进行审核,具体以实际审核时间为准。
(可选)邮寄资料。
说明阿里云初审后如果需要您邮寄资料,审核人员会通知您。如果您在初审时未收到需要邮寄资料的相关通知,则无需邮寄资料,ICP备案流程将进入下一个阶段。
工信部短信核验。
管局审核。
订提交管局后订单为待提交管局状态,阿里云审核专员将会在1个工作日左右将您的订单提交至管局审核,具体以实际提交时间为准
各省管局审核时间不同,实际审核时长会根据ICP备案场景有所不同,一般为1~20个工作日,具体以实际审核时间为准。管局审核通过后表示您的ICP备案即已完成,审核结果会发送至您的手机和邮箱。
ICP备案后操作
添加ICP备案号及版本所有 。
ICP备案成功后,您需要在互联网信息服务底部添加备案号和跳转至工信部的链接,以便访问者查询确认ICP备案信息。部分省份管局要求,例如江苏省,需要在互联网信息服务下方添加版权所有。详情请参见ICP备案后处理。
(可选)ICP许可证。
如果您的互联网信息服务属于经营性网站或App(通过互联网向上网用户有偿提供信息或者网页制作等服务活动),则需在ICP备案后申请经营性ICP许可证。详情请参见经营性备案。
说明弹性Web托管服务器不支持经营性备案。
公安联网备案。
依据 《计算机信息网络国际联网安全保护管理办法》相关规定,各互联网信息服务在工信部备案成功后,需在开通之日起30日内登录全国互联网安全管理服务平台提交公安联网备案申请。详情请参见公安联网备案及注销中国站备案文档中的公安联网备案。
申请SSL证书
领取免费证书额度。
登录数字证书管理服务控制台。
在左侧导航栏,选择。
在个人测试证书(原免费证书)页签,单击立即购买。
在立即购买面板,参考下表购买免费证书,仔细阅读并勾选服务协议,单击立即购买并完成支付。
配置项
示例
产品
个人测试证书
证书类型
个人测试证书(免费版)
服务
保持默认
购买数量
保持默认
其他服务
不需要
提交证书申请。
返回个人测试证书(原免费证书)页签,单击创建证书。
在证书申请面板,配置证书参数,选中快捷签发,单击提交审核。
配置项
说明
证书类型
选择个人测试证书(免费版):证书签发后有效期3个月。
证书剩余数量/总数
表示剩余可申请的证书个数/总共可申请的证书个数。只有当剩余可申请的证书个数不为0时,您才可以创建证书。
域名名称
填写该证书用于保护的网站域名。
数量
证书数量,默认为1,不支持增加。
快捷签发
说明快捷签发是指在当前步骤填写证书申请资料并提交审核。
域名验证方式
如果您当前的阿里云账号与域名的DNS云解析服务所在账号一致,申请证书时,阿里云数字证书管理服务将会自动识别,并默认选择自动DNS验证方式,且不支持修改,提交审核后,系统会自动进行DNS验证。
如果您当前的阿里云账号与域名的DNS云解析服务所在账号不一致,您可以选择以下任意一种方式进行域名所有权验证。
手动DNS验证:您需要手动修改域名的DNS解析记录,并在证书绑定域名的域名控制台,添加一条解析记录用于域名所有权验证。
域名授权自动化验证:您需要手动在对应的DNS域名解析服务商,添加一条CNAME类型的解析记录用于域名所有权验证。添加成功后,后续申请对应域名的SSL证书时可以直接选择该方式,且无需再添加域名解析记录。具体操作,请参见域名所有权验证。
文件验证:您需要手动从数字证书管理服务控制台下载一个专用的证书验证文件,然后将该文件上传到站点服务器的指定验证目录。
联系人
从下拉列表中选择本次证书申请的联系人(包含邮箱、手机号码等联系信息)。
重要收到证书申请请求后,CA中心会向联系人邮箱发送证书申请验证邮件或者通过联系人手机号码沟通审核相关事宜。因此,请务必确保联系人信息准确且有效。
如果您未创建过联系人,可以单击新建联系人,新建一个联系人。数字证书管理服务会保存新建的联系人信息,方便您下次使用。关于新建联系人的具体配置,请参见管理联系人。
所在地
选择申请人所在城市或地区。
密钥算法
证书使用的密钥算法。
默认选择为RSA,且不支持修改。RSA算法是目前在全球应用广泛的非对称加密算法,兼容性好。
CSR生成方式
CSR(Certificate Signing Request)文件是您的证书请求文件。该文件包含您的SSL证书信息,例如,证书绑定的域名、证书持有主体的名称及地理位置信息等。
您向CA中心提交证书申请时,必须提供CSR。CA中心审核通过您的证书申请后,将使用其根CA私钥为您提供的CSR签名,生成SSL证书公钥(即签发给您的SSL证书)。SSL证书的私钥即您在生成CSR时同时生成的私钥。
您可以选择以下CSR生成方式:
系统生成:表示由数字证书管理服务自动使用您在密钥算法指定的加密算法生成CSR文件(您可以在证书签发后下载证书和私钥)。推荐您使用该方式。
手动填写:表示您是使用OpenSSL或Keytool等工具手动生成的CSR和私钥文件,并将CSR内容复制粘贴到CSR文件内容(私钥文件由您自行保管)。关于如何制作CSR和私钥文件,请参见如何制作CSR文件。
重要CSR生成方式选择手动填写后,您将无法在数字证书管理控制台将该证书部署到阿里云产品中。
申请国密算法证书且选择手动填写CSR时,由于私钥不在阿里云,获得的加密证书需要私钥配合完成解密,请您联系私钥生成方协助完成解密工作。
您提供的CSR内容正确与否直接关系到证书申请流程是否能顺利完成,建议您使用数字证书管理服务自动生成的CSR(即选择系统生成方式),避免因提供的CSR内容不正确导致证书审核失败。
请确保您手动填写的CSR使用的加密算法与密钥算法中选择的算法相同,否则您将无法顺利提交证书审核。 如果您不清楚CSR使用的加密算法,您可以通过查看CSR工具查看,具体操作,请参见查看CSR详情。
在制作CSR文件时请务必保存好您的私钥文件。私钥和SSL证书一一对应,一旦私钥丢失,您的SSL证书也将不可使用。阿里云不负责保管您的私钥,如果您的私钥丢失,您必须重新购买SSL证书。
选择已有的CSR:表示从您在数字证书管理服务控制台创建的CSR或上传的CSR中,选择与证书绑定域名相匹配的CSR。
CSR文件内容
只有在CSR生成方式为手动填写或选择已有的CSR时,需要配置该参数。在此处填写您的CSR文件内容。
按照验证信息中的提示,完成域名所有权的验证。
域名所有权验证成功后,证书通常会在1~2个工作日完成签发,最快10分钟内签发。证书签发后,证书状态将变更为已签发。如果SSL证书长时间未签发,请您检查DNS验证配置是否正确。域名所有权验证更多信息和常见报错,请参见域名所有权验证。
说明如果您未选中快捷签发,创建证书申请后,您将获得一个证书(对应要申请的证书)。您需要在该证书操作列,单击证书申请,填写证书申请信息并提交审核后,再按照该步骤进行验证。
安装SSL证书
下载SSL证书。
登录数字证书管理服务控制台。
在左侧导航栏,选择。
在SSL证书管理页面,定位到目标证书,在操作列,单击下载。
在服务器类型为Nginx的操作列,单击下载。
解压缩已下载的SSL证书压缩包。
根据您在提交证书申请时选择的CSR生成方式,解压缩获得的文件不同,具体如下表所示。
CSR生成方式
证书压缩包包含的文件
系统生成或选择已有的CSR
证书文件(PEM格式):Nginx支持安装PEM格式的文件,PEM格式的证书文件是采用Base64编码的文本文件,且包含完整证书链。解压后,该文件以
证书ID_证书绑定域名
命名。私钥文件(KEY格式):默认以证书绑定域名命名。
手动填写
如果您填写的是通过数字证书管理服务控制台创建的CSR,下载后包含的证书文件与系统生成的一致。
如果您填写的不是通过数字证书管理服务控制台创建的CSR,下载后只包括证书文件(PEM格式),不包含证书密码或私钥文件。您可以通过证书工具,将证书文件和您持有的证书密码或私钥文件转换成所需格式。转换证书格式的具体操作,请参见证书格式转换。
在ECS实例上安装Nginx服务
登录ECS控制台,在列表操作列单击远程连接,在远程连接模态框,单击通过Workbench远程连接对应的立即登录。
安装nginx
执行命令安装Nginx。
sudo yum update && sudo yum -y install nginx
启动Nginx。
sudo systemctl start nginx
执行以下命令,查看Nginx服务的运行状态。
如果回显信息显示
Active:active(running)
时,表示Nginx已启动。systemctl status nginx
在Nginx服务器安装证书。
执行以下命令,在Nginx的conf目录下创建一个用于存放证书的目录。
cd /etc/nginx mkdir cert
在顶部导航栏,单击文件,单击打开新文件树。找到/etc/nginx/cert目录,右键打开菜单,单击上传文件。
将证书文件和私钥文件上传到Nginx服务器的证书目录(/etc/nginx/cert)。
编辑Nginx配置文件nginx.conf,修改与证书相关的配置。
执行以下命令,打开配置文件。
vim /etc/nginx/nginx.conf
删除行首注释符号#,并参考如下示例进行修改。。
server { listen 443 ssl http2; listen [::]:443 ssl http2; server_name _; root /usr/share/nginx/html; #填写证书文件绝对路径 ssl_certificate "/etc/nginx/cert/<cert-file-name>.pem"; #填写证书私钥文件绝对路径 ssl_certificate_key "/etc/nginx/cert/<cert-file-name>.key"; ssl_session_cache shared:SSL:1m; ssl_session_timeout 10m; ssl_ciphers PROFILE=SYSTEM; ssl_prefer_server_ciphers on; # Load configuration files for the default server block. include /etc/nginx/default.d/*.conf; #error_page 404 /404.html; location = /40x.html { } #error_page 500 502 503 504 /50x.html; location = /50x.html { } }
粘贴后,按Esc键,输入
:x
保存并退出编辑。重启Nginx。
nginx -s reload
验证SSL证书是否配置成功
证书安装完成后,您可以通过访问证书的绑定域名验证该证书是否安装成功。
如果网页地址栏出现小锁标志,表示证书已经安装成功。
配置域名解析
申请域名后,您需要配置域名解析到ECS实例的公网IP,以实现小程序可访问的服务。
登录云解析DNS控制台。
在域名解析页面,权威域名页签下,点击目标域名处的解析设置按钮,进入解析设置页面。
单击添加记录,填写域名解析信息,然后单击确认。
配置项
说明
示例值
记录类型
选择域名指向的类型。 此处选择A。
A
主机记录
根据域名前缀填写主机记录。本方案以顶级域名为例,例如
example.com
,输入@。@
记录值
填写ECS实例的公网ID。
10.0.x.x
TTL
域名的更新周期,保留默认值。
10分钟
清理和后续
10
清理资源
在本方案中,您创建了1台云服务器ECS实例、1个交换机、1个专有网络VPC、1个云数据库RDS MySQL实例。测试完方案后,您可以参考以下规则处理对应产品的实例,避免继续产生费用:
释放1台云服务器ECS实例:
登录ECS控制台,在实例页面,找到目标实例,然后在操作列选择>释放设置,根据界面提示释放实例。
释放1个交换机:
登录专有网络控制台,在交换机页面,找到目标交换机,然后在操作列单击删除,按照界面提示释放实例。
释放1个专有网络VPC:
登录专有网络控制台,在专有网络页面,找到目标VPC,然后在操作列单击删除,按照界面提示释放实例。
释放1个云数据库RDS MySQL实例:
登录云数据库RDS控制台,在集群列表页面,找到目标集群,然后在操作列中选择更多>释放实例。
删除流水线
删除云效的流水线。
进入我的流水线,点击流水线右侧->删除。
删除代码仓库。
若您的示例代码是从atomgit上clone,则可以考虑删除代码仓库。
进入仓库主页,点击左下角的设置->基本设置-> 删除代码库。
后续
如果您期望上线您的小程序,您需要做下面几件事:
在小程序配置后台,配置服务域名。
上传小程序并提交审核,可以参考微信小程序发布上线和支付宝小程序发布上线。
待审核通过后,手动上线小程序,就可以在微信/支付宝客户端中查看和使用小程序了。
为了您的服务安全,建议您使用Web应用防火墙保护您的小程序后端服务。
如果您的应用有静态资源需要存储,如图片、视频等,建议您使用对象存储 OSS 和内容分发网络 CDN存储静态资源并提升访问速度。
一键部署
100
https://www.aliyun.com/solution/tech-solution/develop-applets
方案概览
在本方案中,您可以使用阿里云多端低代码开发平台魔笔可视化搭建适配于微信和支付宝两个平台的小程序应用客户端,从而减少开发工作量。此外,本方案使用云效、云服务器等服务开发可持续构建的服务端应用。最终帮助您的企业快速搭建适用于多平台的小程序应用。
方案架构
方案提供的默认设置完成部署后在阿里云上搭建的多平台小程序应用架构如下图所示。
本方案相比于传统小程序开发,通过魔笔开发适配于多平台的小程序,可以提升开发效率降低维护成本,通过云效持续构建服务端应用,提升服务部署效率。本方案的技术架构包括以下内容:
应用
小程序服务端应用
支付宝小程序端应用
微信小程序端应用
基础设施和云服务
1个专有网络VPC:为云服务器ECS、云数据库 RDS MySQL 等云资源形成云上私有网络。
1台交换机:将1台云服务器ECS和1台云数据库RDS连接在同一网络上,实现它们之间的通信,并提供基本的网络分段和隔离功能。
1台云服务器ECS:用于部署小程序后端服务。
1个云数据库RDS MySQL:为小程序后端服务提供数据服务。
云解析DNS:将用户的请求解析到ECS。
1个域名:用于为小程序后端程序提供访问域名。
多端低代码开发平台魔笔:通过图形化界面可视化地配置应用程序,可导出支持多个平台的小程序代码。
云效:一站式 DevOps 平台,支持通过流水线构建持续交付的研发流程。
部署准备
10
开始部署前,请按以下指引完成账号申请、账号充值。
准备账号
一键部署
10
一键部署基于阿里云资源编排服务ROS(Resource Orchestration Service)实现,ROS模板已定义好脚本,可自动化地完成云资源的创建和配置,提高资源的创建和部署效率。ROS模板完成的内容包括:
操作步骤
您可以通过下方提供的ROS一键部署链接,来自动化地完成这些资源的创建和配置:
创建1台云服务器ECS实例。
创建1个专有网络VPC。
创建1台交换机。
创建1个云数据库RDS MySQL。
一键部署资源。
单击一键部署,在顶部导航栏选择地域。
在配置页面修改资源栈名称,按需选择和配置参数。
当资源栈信息页面的状态显示为创建成功时表示一键配置完成。
部署服务端
20
创建流水线
配置流水线
云效支持多种流水线源,如多种代码仓库、已经编译好的代码包、对接Jenkins及另一个流水线的产出物。
进入流水线后,界面会弹出主机部署界面,在右上角点“×”(第“4”步骤有指引),先在左侧点击添加流水线源
单击添加流水线源。
选择流水线源为代码源,选择Codeup。
点击新建代码仓库。
在代码管理页面右上角,单击导入库。
在导入代码库弹出框,选中URL导入,在源代码仓库地址填入
https://atomgit.com/aliyun_solution/miniapp-demo.git
,单击确定。回到流水线源配置页面,选择刚刚创建的代码仓库。并点击添加,完成流水线源的配置。
配置Java构建上传。
单击Java构建上传。
在右侧配置弹窗内,单击构建物上传,在打包路径下新增一个deploy.sh。
配置环境变量,您需要将数据库连接地址和账号密码配置到流水线环境变量中。
在页面顶部导航选中变量和缓存,在页面中字符变量模块单击新增变量。
填入数据库相关信息,并设置成私密模式。相关数据可在数据库控制台,进入数据实例详情页面查看。
变量名称
默认值
APPLETS_RDS_ENDPOINT
数据库连接地址
APPLETS_RDS_USER
数据库用户名
APPLETS_RDS_PASSWORD
数据库密码
APPLETS_RDS_DB_NAME
数据库名称
配置部署任务。
单击主机部署。
制品:下拉选择上游构建阶段的产物,如制品名称.Artfacts_xxx。
主机组:
单击创建主机组,在新建主机组模态框中,填入自定义的主机组名称,然后单击确定。
进入主机详情页面,单击添加新主机,添加方式选择阿里云ECS,单击添加服务连接,按照提示完成RAM授权,创建服务连接。
地域选择杭州,选择创建的ECS,单击保存。
回到刚刚的主机部署页面,主机组选择刚刚创建的主机组。
部署脚本填入如下脚本
tar zxvf /home/admin/app/package.tgz -C /home/admin sh /home/admin/deploy.sh restart /home/admin/target/miniapp-demo-0.0.1-SNAPSHOT.jar
单击保存并运行。
验证
登录ECS控制台,在实例列表中找到之前创建的ECS实例,在IP地址列,复制公网IP。
粘贴到浏览器地址栏访问,看到如下页面表示服务已经正常启动。
小程序端搭建与部署
30
创建应用
开通多端低代码开发平台魔笔。
登录魔笔控制台。
在顶部导航栏选择应用管理,单击添加应用。
选择应用类型为 小程序,输入应用名称为待办事项管理平台,选择空白模板。
点击确定后,进入应用设计器。
搭建应用
创建导航栏。
在左侧导航组件中,从布局中拖拽一个容器到页面顶部。
从文本中拖拽一个文本放置到容器中,在右侧样式设置文字粗细为粗体;字色改为蓝色;对齐方式为中;行高设置为2;文字内容改为TODO List。
集成服务端API。
打开集成管理面板,点击添加连接器,点击 API 集成。
在接口定义面板中,填入API信息,打开调测模式,获取API返回结果。URL使用您后端服务的域名或ECS公网IP。单击测试按钮获取接口数据。
单击解析为Response Body,将数据解析为接口配置的Response。
单击保存结构体,将数据保存为结构体。然后单击确定,完成创建。
打开数据模型,点击添加结构体转实体映射。
在弹出的添加面板中,设置名称并选择结构体。
进入跳转页面后,单击自动生成映射,进入自动生成映射弹窗,单击内存实体,映射完成后,单击完成。
配置页面列表。
左侧菜单,选择页面管理,单击首页,进入首页配置。
在左侧菜单中,从数据容器拖拽一个List到页面中。
在右侧配置界面,选择逻辑流。
在选择后端逻辑流、前端逻辑流弹窗,单击添加逻辑流。在添加逻辑流弹窗,设置如下参数。数据模型选择解析的列表data数据。
单击箭头,跳转到逻辑流设计页面,进行配置。
展开左侧「其他操作」面板,将「后端调用指定的集成 API」操作拖入主干。鼠标聚焦「后端调用指定的集成 API」节点,并在右侧配置面板中选择之前集成的「查询TODOList」 API 。
在逻辑流中加入结构体对象转实体对象,配置数据转换。
配置查询对象,获取返回结果中的列表数据。
配置结果,设置返回值。
回到首页配置页面,单击一键填充组件,选择要填入的字段。
通过拖拽调整页面如下。
发布并下载源码
在顶部导航栏右侧,单击提交按钮,提交成功后,单击发布。
发布成功后,点击点击查看,跳转到部署信息页面,单击查看环境详情,下载小程序源码到本地。
下载支付宝小程序客户端运行小程序
上传到支付宝小程序审核需要一定时间,您可以在本地安装环境并下载小程序开发工具,进行本地验证。然后再上传到支付宝小程序。
下载微信小程序客户端运行小程序
上传到微信小程序审核需要一定时间,您可以在本地安装环境并下载小程序开发工具,进行本地验证。然后再上传到微信小程序。
在开发小程序之前,您需要先注册微信小程序。
安装小程序开发环境,并运行代码。
申请域名与证书
20
域名申请和备案
创建域名信息模板并实名认证。如果您已经拥有域名,可跳过此步骤。如果您使用当前部署的服务器去申请域名备案,因备案要求,需要将云服务ECS实例从按量计费转为包年包月,具体请参考按量付费转包年包月。
购买域名
查询域名。
登录阿里云域名注册。
在阿里云域名注册页面的搜索框中,搜索您想要注册的域名以及域名后缀,单击查询域名。
加入域名清单。
对于查询结果为未注册的域名,单击加入清单。
在域名清单中确认已添加的域名,单击立即购买。
确认订单信息。
在确认订单页面,选择域名的购买年限和域名所有者类型。
说明若您注册的是“.gov.cn”后缀域名,域名持有者类型只能为企业。
选择已完成实名认证的域名持有者信息模板。
选择支付方式后,单击立即支付。
ICP备案前准备
提交ICP备案
填写信息进行校验。
在阿里云ICP代备案管理系统,根据界面提示,按要求填写主办单位信息和网站/App信息等,系统将根据您所填信息,自动校验是否可以进行ICP备案。
阿里云初审。
提交ICP备案初审订单后,订单状态为阿里云审核中,阿里云将会在1个工作日左右进行审核,具体以实际审核时间为准。
(可选)邮寄资料。
说明阿里云初审后如果需要您邮寄资料,审核人员会通知您。如果您在初审时未收到需要邮寄资料的相关通知,则无需邮寄资料,ICP备案流程将进入下一个阶段。
工信部短信核验。
管局审核。
订提交管局后订单为待提交管局状态,阿里云审核专员将会在1个工作日左右将您的订单提交至管局审核,具体以实际提交时间为准
各省管局审核时间不同,实际审核时长会根据ICP备案场景有所不同,一般为1~20个工作日,具体以实际审核时间为准。管局审核通过后表示您的ICP备案即已完成,审核结果会发送至您的手机和邮箱。
ICP备案后操作
添加ICP备案号及版本所有 。
ICP备案成功后,您需要在互联网信息服务底部添加备案号和跳转至工信部的链接,以便访问者查询确认ICP备案信息。部分省份管局要求,例如江苏省,需要在互联网信息服务下方添加版权所有。详情请参见ICP备案后处理。
(可选)ICP许可证。
如果您的互联网信息服务属于经营性网站或App(通过互联网向上网用户有偿提供信息或者网页制作等服务活动),则需在ICP备案后申请经营性ICP许可证。详情请参见经营性备案。
说明弹性Web托管服务器不支持经营性备案。
公安联网备案。
依据 《计算机信息网络国际联网安全保护管理办法》相关规定,各互联网信息服务在工信部备案成功后,需在开通之日起30日内登录全国互联网安全管理服务平台提交公安联网备案申请。详情请参见公安联网备案及注销中国站备案文档中的公安联网备案。
申请SSL证书
领取免费证书额度。
登录数字证书管理服务控制台。
在左侧导航栏,选择。
在个人测试证书(原免费证书)页签,单击立即购买。
在立即购买面板,参考下表购买免费证书,仔细阅读并勾选服务协议,单击立即购买并完成支付。
配置项
示例
产品
个人测试证书
证书类型
个人测试证书(免费版)
服务
保持默认
购买数量
保持默认
其他服务
不需要
提交证书申请。
返回个人测试证书(原免费证书)页签,单击创建证书。
在证书申请面板,配置证书参数,选中快捷签发,单击提交审核。
配置项
说明
证书类型
选择个人测试证书(免费版):证书签发后有效期3个月。
证书剩余数量/总数
表示剩余可申请的证书个数/总共可申请的证书个数。只有当剩余可申请的证书个数不为0时,您才可以创建证书。
域名名称
填写该证书用于保护的网站域名。
数量
证书数量,默认为1,不支持增加。
快捷签发
说明快捷签发是指在当前步骤填写证书申请资料并提交审核。
域名验证方式
如果您当前的阿里云账号与域名的DNS云解析服务所在账号一致,申请证书时,阿里云数字证书管理服务将会自动识别,并默认选择自动DNS验证方式,且不支持修改,提交审核后,系统会自动进行DNS验证。
如果您当前的阿里云账号与域名的DNS云解析服务所在账号不一致,您可以选择以下任意一种方式进行域名所有权验证。
手动DNS验证:您需要手动修改域名的DNS解析记录,并在证书绑定域名的域名控制台,添加一条解析记录用于域名所有权验证。
域名授权自动化验证:您需要手动在对应的DNS域名解析服务商,添加一条CNAME类型的解析记录用于域名所有权验证。添加成功后,后续申请对应域名的SSL证书时可以直接选择该方式,且无需再添加域名解析记录。具体操作,请参见域名所有权验证。
文件验证:您需要手动从数字证书管理服务控制台下载一个专用的证书验证文件,然后将该文件上传到站点服务器的指定验证目录。
联系人
从下拉列表中选择本次证书申请的联系人(包含邮箱、手机号码等联系信息)。
重要收到证书申请请求后,CA中心会向联系人邮箱发送证书申请验证邮件或者通过联系人手机号码沟通审核相关事宜。因此,请务必确保联系人信息准确且有效。
如果您未创建过联系人,可以单击新建联系人,新建一个联系人。数字证书管理服务会保存新建的联系人信息,方便您下次使用。关于新建联系人的具体配置,请参见管理联系人。
所在地
选择申请人所在城市或地区。
密钥算法
证书使用的密钥算法。
默认选择为RSA,且不支持修改。RSA算法是目前在全球应用广泛的非对称加密算法,兼容性好。
CSR生成方式
CSR(Certificate Signing Request)文件是您的证书请求文件。该文件包含您的SSL证书信息,例如,证书绑定的域名、证书持有主体的名称及地理位置信息等。
您向CA中心提交证书申请时,必须提供CSR。CA中心审核通过您的证书申请后,将使用其根CA私钥为您提供的CSR签名,生成SSL证书公钥(即签发给您的SSL证书)。SSL证书的私钥即您在生成CSR时同时生成的私钥。
您可以选择以下CSR生成方式:
系统生成:表示由数字证书管理服务自动使用您在密钥算法指定的加密算法生成CSR文件(您可以在证书签发后下载证书和私钥)。推荐您使用该方式。
手动填写:表示您是使用OpenSSL或Keytool等工具手动生成的CSR和私钥文件,并将CSR内容复制粘贴到CSR文件内容(私钥文件由您自行保管)。关于如何制作CSR和私钥文件,请参见如何制作CSR文件。
重要CSR生成方式选择手动填写后,您将无法在数字证书管理控制台将该证书部署到阿里云产品中。
申请国密算法证书且选择手动填写CSR时,由于私钥不在阿里云,获得的加密证书需要私钥配合完成解密,请您联系私钥生成方协助完成解密工作。
您提供的CSR内容正确与否直接关系到证书申请流程是否能顺利完成,建议您使用数字证书管理服务自动生成的CSR(即选择系统生成方式),避免因提供的CSR内容不正确导致证书审核失败。
请确保您手动填写的CSR使用的加密算法与密钥算法中选择的算法相同,否则您将无法顺利提交证书审核。 如果您不清楚CSR使用的加密算法,您可以通过查看CSR工具查看,具体操作,请参见查看CSR详情。
在制作CSR文件时请务必保存好您的私钥文件。私钥和SSL证书一一对应,一旦私钥丢失,您的SSL证书也将不可使用。阿里云不负责保管您的私钥,如果您的私钥丢失,您必须重新购买SSL证书。
选择已有的CSR:表示从您在数字证书管理服务控制台创建的CSR或上传的CSR中,选择与证书绑定域名相匹配的CSR。
CSR文件内容
只有在CSR生成方式为手动填写或选择已有的CSR时,需要配置该参数。在此处填写您的CSR文件内容。
按照验证信息中的提示,完成域名所有权的验证。
域名所有权验证成功后,证书通常会在1~2个工作日完成签发,最快10分钟内签发。证书签发后,证书状态将变更为已签发。如果SSL证书长时间未签发,请您检查DNS验证配置是否正确。域名所有权验证更多信息和常见报错,请参见域名所有权验证。
说明如果您未选中快捷签发,创建证书申请后,您将获得一个证书(对应要申请的证书)。您需要在该证书操作列,单击证书申请,填写证书申请信息并提交审核后,再按照该步骤进行验证。
安装SSL证书
下载SSL证书。
登录数字证书管理服务控制台。
在左侧导航栏,选择。
在SSL证书管理页面,定位到目标证书,在操作列,单击下载。
在服务器类型为Nginx的操作列,单击下载。
解压缩已下载的SSL证书压缩包。
根据您在提交证书申请时选择的CSR生成方式,解压缩获得的文件不同,具体如下表所示。
CSR生成方式
证书压缩包包含的文件
系统生成或选择已有的CSR
证书文件(PEM格式):Nginx支持安装PEM格式的文件,PEM格式的证书文件是采用Base64编码的文本文件,且包含完整证书链。解压后,该文件以
证书ID_证书绑定域名
命名。私钥文件(KEY格式):默认以证书绑定域名命名。
手动填写
如果您填写的是通过数字证书管理服务控制台创建的CSR,下载后包含的证书文件与系统生成的一致。
如果您填写的不是通过数字证书管理服务控制台创建的CSR,下载后只包括证书文件(PEM格式),不包含证书密码或私钥文件。您可以通过证书工具,将证书文件和您持有的证书密码或私钥文件转换成所需格式。转换证书格式的具体操作,请参见证书格式转换。
在ECS实例上安装Nginx服务
登录ECS控制台,在列表操作列单击远程连接,在远程连接模态框,单击通过Workbench远程连接对应的立即登录。
安装nginx
执行命令安装Nginx。
sudo yum update && sudo yum -y install nginx
启动Nginx。
sudo systemctl start nginx
执行以下命令,查看Nginx服务的运行状态。
如果回显信息显示
Active:active(running)
时,表示Nginx已启动。systemctl status nginx
在Nginx服务器安装证书。
执行以下命令,在Nginx的conf目录下创建一个用于存放证书的目录。
cd /etc/nginx mkdir cert
在顶部导航栏,单击文件,单击打开新文件树。找到/etc/nginx/cert目录,右键打开菜单,单击上传文件。
将证书文件和私钥文件上传到Nginx服务器的证书目录(/etc/nginx/cert)。
编辑Nginx配置文件nginx.conf,修改与证书相关的配置。
执行以下命令,打开配置文件。
vim /etc/nginx/nginx.conf
删除行首注释符号#,并参考如下示例进行修改。。
server { listen 443 ssl http2; listen [::]:443 ssl http2; server_name _; root /usr/share/nginx/html; #填写证书文件绝对路径 ssl_certificate "/etc/nginx/cert/<cert-file-name>.pem"; #填写证书私钥文件绝对路径 ssl_certificate_key "/etc/nginx/cert/<cert-file-name>.key"; ssl_session_cache shared:SSL:1m; ssl_session_timeout 10m; ssl_ciphers PROFILE=SYSTEM; ssl_prefer_server_ciphers on; # Load configuration files for the default server block. include /etc/nginx/default.d/*.conf; #error_page 404 /404.html; location = /40x.html { } #error_page 500 502 503 504 /50x.html; location = /50x.html { } }
粘贴后,按Esc键,输入
:x
保存并退出编辑。重启Nginx。
nginx -s reload
验证SSL证书是否配置成功
证书安装完成后,您可以通过访问证书的绑定域名验证该证书是否安装成功。
如果网页地址栏出现小锁标志,表示证书已经安装成功。
配置域名解析
申请域名后,您需要配置域名解析到ECS实例的公网IP,以实现小程序可访问的服务。
登录云解析DNS控制台。
在域名解析页面,权威域名页签下,点击目标域名处的解析设置按钮,进入解析设置页面。
单击添加记录,填写域名解析信息,然后单击确认。
配置项
说明
示例值
记录类型
选择域名指向的类型。 此处选择A。
A
主机记录
根据域名前缀填写主机记录。本方案以顶级域名为例,例如
example.com
,输入@。@
记录值
填写ECS实例的公网ID。
10.0.x.x
TTL
域名的更新周期,保留默认值。
10分钟
完成及清理
10
清理资源
您可以使用ROS一键删除创建的云资源,避免继续产生费用。
登录ROS控制台。
在左侧导航栏,选择资源栈。
在资源栈页面的顶部选择部署的资源栈所在地域,找到资源栈,然后在其右侧操作列,单击删除。
在删除资源栈对话框,选择删除方式为释放资源,然后单击确定,根据提示完成资源释放。
删除流水线
删除云效的流水线。
进入我的流水线,点击流水线右侧->删除。
删除代码仓库。
若您的示例代码是从atomgit上clone,则可以考虑删除代码仓库。
进入仓库主页,点击左下角的设置->基本设置-> 删除代码库。
后续
如果您期望上线您的小程序,您需要做下面几件事:
在小程序配置后台,配置服务域名。
上传小程序并提交审核,可以参考微信小程序发布上线和支付宝小程序发布上线。
待审核通过后,手动上线小程序,就可以在微信/支付宝客户端中查看和使用小程序了。
为了您的服务安全,建议您使用Web应用防火墙保护您的小程序后端服务。
如果您的应用有静态资源需要存储,如图片、视频等,建议您使用对象存储 OSS 和内容分发网络 CDN存储静态资源并提升访问速度。