10分钟搭建微信小程序
手动部署
75
https://www.aliyun.com/solution/tech-solution/develop-your-wechat-mini-program-in-10-minutes
方案概览
近年来,越来越多的人通过手机或平板电脑访问网页。根据统计,目前网站访问量中移动访问量已经超过了桌面访问量,移动端开发个人博客不仅能够满足现代用户的访问习惯和需求,还能提升博客的可达性和用户体验。小程序作为轻量级的移动应用主要优势在于:
便捷访问:用户无需下载安装额外的应用程序即可通过微信快速访问博客内容。
跨平台分享:基于微信生态的小程序具有良好的社交属性,使得文章可以非常容易地被分享给朋友或者发布到朋友圈,增加内容传播性。
成本效益高:在小程序上建立个人博客相较于开发独立App或维护复杂的网站系统来说,无论是从技术难度还是经济投入上看都要更低廉得多。
本文为您介绍如何在阿里云提供的网站服务基础之上快速搭建微信小程序。
方案架构
方案提供的默认设置完成部署后在阿里云上搭建的网站运行环境如下图所示。实际部署时您可以根据资源规划修改部分设置,但最终形成的运行环境与下图相似。
当前部署架构为单机部署,主要用于解决方案场景演示,存在单点故障问题,如果存在高可用性要求,可以在多可用区进行分布式部署。
本方案的技术架构包括以下基础设施和云服务:
域名:一个已经完成备案的域名。
数字证书管理服务:一个 SSL 证书用于实现 HTTPS 加密通信。
云解析 DNS:将用户访问网站的域名请求解析到云服务器。
专有网络 VPC:一个专有网络,构建云上私有网络。
云服务器 ECS:一台云服务器用于部署博客网站服务。
云数据库 RDS:一个云数据库 RDS MySQL 实例,为博客网站提供数据服务。
部署准备
5
开始部署前,请按以下指引完成账号申请、账号充值。
准备账号
部署资源
20
规划好资源后,请按照以下步骤部署方案中的所有资源。
创建专有网络VPC和交换机
您需要创建专有网络VPC和交换机,为云服务器ECS实例构建云上的私有网络。
登录。
在左侧导航栏,单击专有网络。
在顶部菜单栏,选择华东1(杭州)地域。
在专有网络页面,单击创建专有网络。
在创建专有网络页面,配置1个专有网络和1台交换机。配置交换机时,请确保交换机所属的可用区的ECS处于可用状态。
配置项
说明
示例值
地域
您的云服务部署的地域。选择地域的基本原则请参见地域和可用区。
华东1(杭州)
名称
建议您在部署过程中新建一个VPC作为本方案的专有网络。部署过程中填写VPC名称即可创建对应名称的VPC。
长度为2~128个字符,以英文大小写字母或中文开头,可包含数字、下划线(_)和连字符(-)。
vpc_hz
IPv4网段
在创建VPC时,您必须按照无类域间路由块(CIDR block)的格式为您的专有网络划分私网网段。阿里云VPC支持的网段信息请参见专有网络组成部分。
在网络规划时可以按照管理网段-开发网段-测试网段-生产网段等规则做好规划。网段一旦投入使用,调整过程复杂,因此规划十分重要。
192.168.0.0/16
交换机名称
建议您在部署过程中在新建的VPC内创建虚拟交换机。部署过程中填写交换机名称即可创建对应名称的虚拟交换机。
长度为2~128个字符,以英文大小字母或中文开头,可包含数字、下划线(_)和连字符(-)。
vsw_001
可用区
建议选择排序靠后的可用区,一般此类可用区较新。新的可用区资源更充沛,新规格也会在新的可用区优先上线。
可用区 B
IPv4网段
每台虚拟交换机需要一个IPv4网段。
192.168.1.0/24
创建安全组
您已经在1个专有网络 VPC 下创建了1台交换机。接下来您需要创建1个安全组,用于限制该专有网络 VPC 下的交换机的网络流入和流出。
在左侧导航栏,选择网络与安全>安全组。
在顶部菜单栏,选择华东1(杭州)地域。
在安全组页面,单击创建安全组。
在创建安全组页面,按照以下规划配置安全组,单击创建安全组。
配置项
说明
示例值
名称
设置安全组的名称。
SecurityGroup_1
网络
选择之前规划的专有网络 VPC。
vpc_hz
安全组类型
本方案选择普通安全组,具体差异您可以参考普通安全组与企业级安全组。
普通安全组
访问规则
入方向添加端口号22,80,3306,分别用于 ECS 远程登录,HTTP 服务和数据库连接。
22,80,3306
创建云服务器ECS
接下来您需要创建1个云服务器 ECS 实例,用于部署博客网站服务。
在左侧导航栏,选择实例与镜像>实例。
在顶部菜单栏,选择华东1(杭州)地域。
在实例页面,单击创建实例。
在云服务器ECS购买页面,选择自定义购买页签,按照以下配置创建1台云服务器 ECS 实例。
项目
说明
示例值
付费类型
付费类型影响实例的计费和收费规则。ECS 计费的详细信息请参见计费方式概述。
按量付费
地域
实例所在地域
华东1(杭州)
网络及可用区
选择刚刚创建的专有网络 VPC 和交换机。
vpc_hz、vsw_001
实例
ECS 的实例规格及内核、vCP U数量。关于 ECS 选型的最佳实践请参见实例规格选型指导。
ecs.g8a.large
镜像
ECS 的“装机盘”,为 ECS 实例提供操作系统、预装软件等。
在公共镜像中选择CentOS
镜像版本
镜像的版本。
CentOS 7.9 64位
系统盘类型
硬盘类型。
ESSD Entry
系统盘容量
硬盘容量。
40 GiB
公网IP
用于访问外网和提供企业门户网站服务。
选中分配公网 IPv4 地址
带宽计费方式
由于本方案为解决方案示例,因此选择按使用流量,以节省流量成本。
按使用流量(CDT)
带宽值
本方案以5 Mbps为例。
5 Mbps
安全组
使用之前创建的安全组。选择已有安全组。
SecurityGroup_1
管理设置
选择设置自定义密码,方便后续登录机器安装服务环境。
自定义密码
在购买页右下角,勾选协议,单击确认下单完成购买。
创建云数据库RDS
接下来您需要创建 RDS MySQL 实例、数据库、数据库账号。您需要记录创建的 RDS MySQL 数据库的内网连接地址、数据库名称、账号、密码用于之后的博客网站搭建配置。
登录云数据库RDS控制台。
创建云数据库 RDS MySQL 实例:
在左侧导航栏,选择实例列表。
在顶部菜单栏,选择华东1(杭州)地域。
在实例列表页面,按照以下配置完成数据库实例创建。
配置项
说明
示例值
计费方式
RDS 计费的详细信息请参见计费概览。
按量付费
地域
RDS 实例所在地域。
华东1(杭州)
引擎
本方案以 MySQL 为例。
MySQL 8.0
产品系列
本方案采用单节点部署,性价比高,用于学习或测试。
基础系列
存储类型
RDS 的数据存储类型。关于 RDS 数据存储类型的对比,请参见存储类型。
ESSD PL1 云盘
VPC
选择网络规划中创建的专有网络 VPC。
vpc_hz
加入白名单
将 VPC 网段加入到 RDS 实例白名单中,使得同一 VPC 下的 ECS 实例可以访问 RDS 实例。
是
主可用区及网络
选择云服务 ECS 实例的交换机作为 RDS 主节点交换机。
vsw_001
实例规格
RDS 的实例规格及内核、vCPU 数量。关于 RDS 选型请参见产品系列概述。
mysql.n2m.medium.2c
存储空间
存储空间的最小调整量为5GB。部分实例(基于本地SSD盘)的存储空间大小与实例规格绑定,SSD 云盘不受此限制。
50 GB
进入实例基本信息页面:
在左侧导航栏,选择实例列表。
在实例列表页面,单击目标实例,进入实例管理页面。
创建数据库账号:
在左侧导航栏,选择账号管理。
在用户账号页签下,单击创建账号。
在创建账号面板,设置数据库账号名称,选择账号类型为普通账号,设置密码,然后单击确定。
创建数据库:
在左侧导航栏,选择数据库管理。
单击创建数据库。
在创建数据库面板,设置数据库名称,选择授权账号为上一步创建的账号,然后单击创建。
获取数据库的内网地址:
在左侧导航栏,选择数据库连接。
在数据库连接区域下,复制内网地址。
配置博客网站服务
20
创建了云服务后,接下来您需要执行以下操作初始化 WordPress 博客网站服务并开启 WordPress REST API 以便于应用程序和服务进行数据交互。
初始化博客网站服务
登录ECS管理控制台。
在左侧导航栏,选择实例与镜像>实例。
在顶部菜单栏,选择华东1(杭州)地域。
部署博客网站服务:
在实例页面,找到上述步骤所创建的 ECS 实例,在右侧操作列,单击远程连接。
在远程连接对话框的通过Workbench远程连接区域,单击立即登录,然后根据页面提示登录。
将 RDS MySQL 数据库实例的内网连接地址,数据库名称,用户名和密码设置为环境变量。
cat << EOF >> ~/.bash_profile export DB_NAME="<数据库名称>" export DB_USERNAME="<用户名>" export DB_PASSWORD="<密码>" export DB_CONNECTION="<连接地址>" EOF source ~/.bash_profile
安装 WordPress 并启动服务。
curl -fsSL https://help-static-aliyun-doc.aliyuncs.com/install-script/develop-your-wechat-mini-program-in-10-minutes/install.sh|bash
初始化博客网站:
在实例页面,复制云服务器 ECS 的公网 IP 地址,然后在浏览器中访问
http://<IP>
。在欢迎页面设置您的站点标题、用户名、密码和电子邮箱地址,然后单击安装WordPress,完成 WordPress 的初始化。
开启REST API
小程序通过 REST API 和服务端进行交互,下文介绍如何开启 REST API。
通过 Workbench 远程连接 ECS 后,执行以下命令进入 WordPress 安装目录。
cd /var/www/html
配置 WordPress 网站访问规则和重写规则。WordPress 是通过
.htaccess
文件用于配置网站的访问规则和重写规则,在开启 URL 重写之后 WordPress 才能正确处理请求,使得用户友好的永久链接可用。新建
.htaccess
文件,添加以下配置,保存并退出。# BEGIN WordPress <IfModule mod_rewrite.c> RewriteEngine On RewriteBase / RewriteRule ^index\.php$ - [L] RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule . /index.php [L] </IfModule> # END WordPress
调整 Apache HTTP 服务配置,允许
.htaccess
文件中配置的所有指令都能生效执行。编辑 Apache HTTP 服务配置文件
/etc/httpd/conf/httpd.conf
,将WordPress配置AllowOverride None
修改为AllowOverride All
,保存并退出。执行以下命令重新启动 Apache HTTP 服务。
systemctl restart httpd
在浏览器中访问 WordPress REST API 入口函数
http://<IP>/wp-json
,其中变量 IP 为 ECS 的公网 IP 地址,校验返回结果是否与以下 JSON 结构一致。
身份验证和鉴权(可选)
当您的博客小程序需要集成内容编辑与发布,评论管理等能力时,需要引入身份验证和鉴权,通过JWT插件生成Token令牌,可以实现安全的身份验证和授权。下文安装JWT插件并开启鉴权。
WordPress 通过FTP文件传输协议来安装插件,因此安装插件之前需要在ECS中搭建FTP服务器软件,具体搭建详情请参见搭建FTP站点(Linux)。
在浏览器中访问
http://<IP>/wp-admin
,将其中变量<IP>
替换为ECS的公网IP,如果未登录,请在登录界面输入用户名和密码,进入WordPress管控后台。在左侧菜单栏单击插件>安装插件,在插件广场页面搜索JWT Authentication for WP REST API,单击目标插件卡片上立即安装。
在弹出的连接信息配置页面,输入搭建好的FTP站点(默认ECS公网IP),FTP服务用户名以及密码单击继续,完成 JWT 插件安装。
在左侧菜单栏单击插件>已安装的插件中启用 JWT Authentication for WP-API。
在 HTTP 请求头中开启授权 Authorization,使得 Authorization 能够传递至服务。
编辑
/var/www/html/.htaccess
文件,并添加以下配置,并保存退出。RewriteCond %{HTTP:Authorization} ^(.*) RewriteRule ^(.*) - [E=HTTP_AUTHORIZATION:%1]
说明上述代码应该紧跟在
RewriteEngine On
之后,确保规则优先生效。JWT需要一个密钥来签署令牌,这个密钥必须是唯一的,并且不会泄露。
可以通过以下命令生成密钥并进行复制。
openssl rand -base64 32
编辑WordPress配置文件
/var/www/html/wp-config.php
,添加以下配置项,将<SecretKey>
替换为上一步生成的密码并保存退出。define('JWT_AUTH_SECRET_KEY', '<SecretKey>'); define('JWT_AUTH_CORS_ENABLE', true);
将以下命令中
<your_domain>
,<your_username>
,<your_password>
分别替换成ECS公网IP,WordPress管控后台访问账号和密码,在终端执行查看是否正常生成Token令牌。在后续步骤中可使用该令牌进行身份验证和鉴权。curl -X POST http://<your_domain>/wp-json/jwt-auth/v1/token -d "username=<your_username>&password=<your_password>"
小程序开发
5
小程序开发准备。
创建个人博客小程序项目并进行本地调试。
点击下载前端项目代码,解压前端项目代码压缩包。
打开开发者工具,单击菜单栏中项目>导入项目,选择上一步下载的小程序项目代码所在的根路径,单击选择。
在导入项目配置页面,将上一步获取的 AppID 进行设置,其余配置保持默认,单击创建。
打开小程序项目配置文件
miniprogram/config.ts
,将常量BLOG_HOST
、ADMIN_ACCOUNT
和ADMIN_PASSWORD
的值分别替换为http://<IP>
(其中<IP>为ECS公网IP地址),WordPress 管控后台登录账号和密码。说明建议使用应用程序密码(Application Passwords),应用程序密码用于为第三方应用和服务提供一种安全且便捷的方式来进行身份验证,可以在不影响主账户安全的情况下重置或撤销单个应用的访问权限,这有效地提高了安全性,同时便于应用的集成和管理。具体操作可参考创建应用程序密码。
在工具栏中单击真机调试图标,会对整体项目进行编译并构建生成一个二维码,使用微信扫描二维码之后就可以在微信上测试小程序。
说明使用模拟器模拟客户端逻辑和界面表现时,由于存在系统差异以及微信客户端特有的一些交互逻辑,少部分API无法在模拟器上进行模拟,此时需要在真机环境进行调试。
发布上线(可选)
如果您仅想体验方案,无需申请域名和备案,可以跳过此步骤。
当完成小程序开发并且测试通过之后,开始对小程序进行发布。小程序发布的前提条件包括:
不能使用IP地址,需要使用独立域名,且域名必须经过 ICP 备案。
域名只支持 HTTPS 和 WSS 协议。
域名申请和备案
创建域名信息模板并实名认证。
购买域名
查询域名。
登录阿里云域名注册。
在阿里云域名注册页面的搜索框中,搜索您想要注册的域名以及域名后缀,单击查询域名。
加入域名清单。
对于查询结果为未注册的域名,单击加入清单。
在域名清单中确认已添加的域名,单击立即购买。
确认订单信息。
在确认订单页面,选择域名的购买年限和域名所有者类型。
说明若您注册的是“.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日内登录全国互联网安全管理服务平台提交公安联网备案申请。详情请参见公安联网备案及注销。
域名解析
申请域名后,您需要配置域名解析到 ECS 实例的公网 IP,实现通过域名访问网站。
登录。
在左侧菜单栏点击公网DNS解析>权威域名解析,在权威域名解析页面的域名列表中找到目标域名,在右侧操作列中点击解析设置。
在域名解析设置页签中点击添加记录,填写域名解析信息,然后单击确认。
配置项
说明
示例值
记录类型
选择域名指向的类型。此处选择A。
A
主机记录
根据域名前缀填写主机记录。本方案以顶级域名为例,例如
example.com
,输入框中填写@。@
记录值
填写ECS实例的公网IP。
10.0.x.x
TTL
域名的更新周期,保留默认值。
10分钟
证书配置
小程序要求与Web服务器间通过 HTTPS 协议进行通信,HTTPS 协议使用 SSL(Secure Sockets Layer)对数据进行加密。将 SSL 证书安装至服务器或对应的云产品,实现 HTTPS 加密通信,从而保护用户隐私和数据安全。
阿里云提供了有效期为三个月的个人测试证书(免费版),以支持个人和小规模使用场景中在开发测试阶段快速启用 HTTPS 协议,详情请参见申请个人测试证书。
步骤一:下载SSL证书
登录。
在左侧导航栏,选择。
在SSL证书管理页面,定位到目标证书,在操作列,单击更多,然后选择下载页签。
在服务器类型为Apache的操作列,单击下载。
解压缩已下载的SSL证书压缩包。
根据您在提交证书申请时选择的CSR生成方式,解压缩获得的文件不同,具体如下表所示。
CSR生成方式
证书压缩包包含的文件
系统生成或选择已有的CSR
证书文件(CRT格式):默认以证书绑定域名_public命名。CRT格式的证书文件采用Base64-encoded编码的文本文件。
证书链文件(CRT格式):默认以证书绑定域名_chain命名。
私钥文件(KEY格式):默认以证书绑定域名命名。
手动填写
如果您填写的是通过数字证书管理服务控制台创建的CSR,下载后包含的证书文件与系统生成的一致。
如果您填写的不是通过数字证书管理服务控制台创建的CSR,下载后只包括证书文件(PEM格式),不包含证书密码或私钥文件。您可以通过证书工具,将证书文件和您持有的证书密码或私钥文件转换成所需格式。转换证书格式的具体操作,请参见证书格式转换。
步骤二:在Apache服务器安装证书
执行以下命令,在Apache的安装目录下创建一个用于存放证书的cert目录。
sudo mkdir /etc/httpd/cert
说明/etc/httpd/
是使用yum方式安装Apache时默认安装目录。如果您手动修改过该目录或使用其他方式安装的Apache,请根据实际配置调整。将证书文件和私钥文件上传至
/etc/httpd/cert
目录。说明您可以使用远程登录工具附带的本地文件上传功能,上传文件。例如PuTTy、Xshell或WinSCP等。如果您使用的阿里云云服务器 ECS,上传文件具体操作,请参见上传或下载文件(Windows)或上传文件到Linux云服务器。
检查
LoadModule ssl_module modules/mod_ssl.so
(用于加载mod_ssl.so模块启用SSL服务) 和Include conf.modules.d/*.conf
(用于加载SSL配置目录)是否被注释,如果被注释,请删除#注释。由于操作系统以及Apache安装方式不同,以上内容所处的位置也不同。可能出现在Apache安装目录的以下位置:
conf.modules.d/00-ssl.conf:本文中
LoadModule ssl_module modules/mod_ssl.so
位于该配置文件下(/etc/httpd/conf.modules.d/00-ssl.conf
)。httpd.conf:本文中
Include conf.modules.d/*.conf
位于该配置文件下(/etc/httpd/httpd.conf
)。http-ssl.conf
重要如果仍未找到以上参数,请确认您的Apache服务器中是否已经安装mod_ssl.so模块。如未安装,可执行
yum install -y mod_ssl
命令安装,安装后,可执行httpd -M | grep 'ssl'
命令检查mod_ssl.so是否安装成功。2022年1月1日起CentOS官方将不再对CentOS 8提供服务支持,如果您的操作系统是CentOS 8,yum命令可能无法正常使用,具体解决办法,请参见CentOS 8 EOL如何切换源?。
打开ssl.conf,修改与证书相关的配置。
打开ssl.conf。
sudo vim /etc/httpd/conf.d/ssl.conf
重要ssl.conf文件在不同操作系统的位置和名称不一样,在没有ssl.conf文件的情况下,请您查看Apache安装目录是否存在
conf/extra/http-ssl.conf
配置文件。在ssl.conf配置文件中,定位到以下参数,按照中文注释修改。
<VirtualHost _default_:443> #自定义设置使用的TLS协议的类型以及加密套件(以下为配置示例,请您自行评估是否需要修改) #TLS协议版本越高,HTTPS通信的安全性越高,但是相较于低版本TLS协议,高版本TLS协议对浏览器的兼容性较差 SSLProtocol all -SSLv2 -SSLv3 SSLCipherSuite HIGH:3DES:!aNULL:!MD5:!SEED:!IDEA #将domain_name_public.crt替换成您证书文件名。 SSLCertificateFile /etc/httpd/cert/domain_name_public.crt #将domain_name.key替换成您证书的私钥文件名。 SSLCertificateKeyFile /etc/httpd/cert/domain_name.key #将domain_name_chain.crt替换成您证书的证书链文件名。 SSLCertificateChainFile /etc/httpd/cert/domain_name_chain.crt </VirtualHost>
可选:在
/etc/httpd/conf/httpd.conf
文件中添加以下重定向代码,设置HTTP请求自动跳转HTTPS。RewriteEngine on RewriteCond %{SERVER_PORT} !^443$ RewriteRule ^(.*)$ https://%{SERVER_NAME}$1 [L,R]
执行以下命令,重启Apache服务器使SSL配置生效。
sudo systemctl restart httpd
步骤三:验证SSL证书是否安装成功
证书安装完成后,访问网站域名,如果网页地址栏出现小锁标志,表示证书已经安装成功。
https://yourdomain #需要将yourdomain替换成证书绑定的域名。
小程序发布
域名切换。
微信开发者工具导入小程序项目,打开项目配置文件
miniprogram/config.ts
,将常量BLOG_HOST
替换为完成备案的 HTTPS 域名。预览小程序。
在微信开发者工具中,单击预览图标,开发者工具会自动打包当前项目,并上传小程序代码至微信的服务器,成功之后会在界面上显示一个二维码。使用当前小程序开发者的微信扫码即可看到小程序在手机客户端上的真实表现。
上传代码。
在微信开发者工具中,单击右上角上传图标,在设置版本号以及备注信息后单击上传。
提交审核。
登录小程序管理后台,在左侧导航栏单击管理>版本管理,在版本管理页面开发版本列表中找到目标版本,单击提交审核,按照页面提示填写相关信息。
说明需要确保严格测试了版本之后,再提交审核, 过多的审核不通过,可能会影响后续的时间。
执行发布。
审核通过之后,管理员的微信中会收到小程序通过审核的通知,在小程序管理后台左侧导航栏单击管理>版本管理,在版本管理页面审核版本列表中找到目标版本,单击发布。
说明小程序提供了两种发布模式:全量发布和分阶段发布。全量发布是指当点击发布之后,所有用户访问小程序时都会使用当前最新的发布版本。分阶段发布是指分不同时间段来控制部分用户使用最新的发布版本。一般来说,普通小程序发布时采用全量发布即可,当小程序承载的功能越来越多,使用的用户数越来越多时,采用分阶段发布是一个非常好的控制风险的办法。
获取小程序码。
发布完成之后即可在微信中根据名称搜索到小程序,此外小程序管理平台提供了小程序码的预览和下载,开发者可以自行下载用于线上和线下的小程序服务推广。您可以在小程序管理后台左侧导航栏单击小程序码获取小程序码进行分享和推广。
完成及清理
20
方案验证
通过小程序开发工具模拟器,验证博客列表以及博客内容是否可以正常查阅。
当您完成 JWT 插件安装(一键部署默认已安装)之后,可以在小程序端实现内容创作。在模拟器底部菜单切换至我的,单击游客图标,在登录页面点击注册用户,通过页面引导完成新用户注册并登录,在底部菜单我的点击立即创作,在内容编辑器中创作并发布。
清理资源
在本方案中,您创建了1台云服务器 ECS 实例、1个交换机、1个专有网络 VPC、1个云数据库 RDS MySQL 版实例。测试完方案后,您可以参考以下规则处理对应产品的实例,避免继续产生费用:
释放1台云服务器 ECS 实例:
登录ECS 控制台,在实例页面,找到目标实例,然后在操作列选择>释放设置,根据界面提示释放实例。
删除1个安全组:
登录ECS 控制台,在安全组页面,找到目标安全组,然后在操作列单击删除,按照界面提示删除安全组。
删除1台交换机:
登录专有网络控制台,在交换机页面,找到目标交换机,然后在操作列单击删除,按照界面提示删除实例。
删除1个专有网络 VPC:
登录专有网络控制台,在专有网络页面,找到目标 VPC,然后在操作列单击删除,按照界面提示删除实例。
释放1个云数据库 RDS MySQL 版实例:
登录云数据库 RDS 控制台,在实例列表页面,找到目标实例,然后在操作列中选择更多>释放实例。
一键部署
10
https://www.aliyun.com/solution/tech-solution/develop-your-wechat-mini-program-in-10-minutes
方案概览
近年来,越来越多的人通过手机或平板电脑访问网页。根据统计,目前网站访问量中移动访问量已经超过了桌面访问量,移动端开发个人博客不仅能够满足现代用户的访问习惯和需求,还能提升博客的可达性和用户体验。小程序作为轻量级的移动应用主要优势在于:
便捷访问:用户无需下载安装额外的应用程序即可通过微信快速访问博客内容。
跨平台分享:基于微信生态的小程序具有良好的社交属性,使得文章可以非常容易地被分享给朋友或者发布到朋友圈,增加内容传播性。
成本效益高:在小程序上建立个人博客相较于开发独立App或维护复杂的网站系统来说,无论是从技术难度还是经济投入上看都要更低廉得多。
本文为您介绍如何在阿里云提供的网站服务基础之上快速搭建微信小程序。
方案架构
方案提供的默认设置完成部署后在阿里云上搭建的网站运行环境如下图所示。实际部署时您可以根据资源规划修改部分设置,但最终形成的运行环境与下图相似。
当前部署架构为单机部署,主要用于解决方案场景演示,存在单点故障问题,如果存在高可用性要求,可以在多可用区进行分布式部署。
本方案的技术架构包括以下基础设施和云服务:
域名:一个已经完成备案的域名。
数字证书管理服务:一个 SSL 证书用于实现 HTTPS 加密通信。
云解析 DNS:将用户访问网站的域名请求解析到云服务器。
专有网络 VPC:一个专有网络,构建云上私有网络。
云服务器 ECS:一台云服务器用于部署博客网站服务。
云数据库 RDS:一个云数据库 RDS MySQL 实例,为博客网站提供数据服务。
部署准备
5
开始部署前,请按以下指引完成账号申请、账号充值。
准备账号
一键部署
5
一键部署基于阿里云资源编排服务ROS(Resource Orchestration Service)实现,模板是描述基础设施和架构的蓝图,通过ROS模板可自动化地完成云资源的创建和配置,提高资源的创建和部署效率。本方案提供的ROS模板完成资源的创建和配置内容包括:
一个专有网络VPC,构建云上私有网络。
一台交换机VSwitch,提供基本的网络分段和隔离功能。
一台云服务器ECS,搭建了一个基于WordPress的博客网站,开启了REST API以便与客户端进行数据交互,并安装了 JWT 插件用于身份验证和鉴权。
一个云数据库RDS MySQL实例,为博客网站提供数据服务。
操作步骤
打开一键部署模板链接前往ROS控制台,系统自动打开使用新资源创建资源栈的面板。
说明ROS控制台默认处于您上一次访问控制台时的地域,请根据您创建的资源所在地域修改地域后再执行下一步。
在配置参数页面完成ECS和RDS配置(本教程以华东1(杭州)为例)后,单击下一步:检查并确认。
配置项
参数
说明
示例值
网络配置
专有网络网段
服务所在的网络网段。
192.168.0.0/16
交换机子网网段
服务所在的子网网段。
192.168.0.0/24
可用区ID
服务所在的可用区。
可用区 B
ECS配置
实例类型
ECS实例的架构、分类和规格配置。
ecs.g8a.large
实例密码
ECS实例的密码。
RDS配置
实例规格
云数据库RDS实例的规格。
mysql.n2m.medium.2c
数据库名称
创建的数据库名称。
RDS数据库账号
RDS实例的数据库账号和密码。
RDS数据库密码
WordPress配置
WordPress用户名
WordPress管控后台管理账号用户名、密码和用户邮箱。
WordPress密码
WordPress用户邮箱
在资源配置预览页面,确认模板参数以及费用之后,单击创建。
当资源栈信息页面的状态显示为创建成功时表示一键配置完成。
在资源栈管理页面,单击输出页签,单击输出关键字 WordPressUrl 对应的值,在登录界面输入账号密码进入WordPress管控后台。
在初始化配置页面设置您的站点标题、用户名、密码和电子邮箱地址,然后单击安装WordPress,完成博客初始化。
小程序开发
5
小程序开发准备。
创建个人博客小程序项目并进行本地调试。
点击下载前端项目代码,解压前端项目代码压缩包。
打开开发者工具,单击菜单栏中项目>导入项目,选择上一步下载的小程序项目代码所在的根路径,单击选择。
在导入项目配置页面,将上一步获取的 AppID 进行设置,其余配置保持默认,单击创建。
打开小程序项目配置文件
miniprogram/config.ts
,将常量BLOG_HOST
、ADMIN_ACCOUNT
和ADMIN_PASSWORD
的值分别替换为http://<IP>
(其中<IP>为ECS公网IP地址),WordPress 管控后台登录账号和密码。说明建议使用应用程序密码(Application Passwords),应用程序密码用于为第三方应用和服务提供一种安全且便捷的方式来进行身份验证,可以在不影响主账户安全的情况下重置或撤销单个应用的访问权限,这有效地提高了安全性,同时便于应用的集成和管理。具体操作可参考创建应用程序密码。
在工具栏中单击真机调试图标,会对整体项目进行编译并构建生成一个二维码,使用微信扫描二维码之后就可以在微信上测试小程序。
说明使用模拟器模拟客户端逻辑和界面表现时,由于存在系统差异以及微信客户端特有的一些交互逻辑,少部分API无法在模拟器上进行模拟,此时需要在真机环境进行调试。
发布上线(可选)
如果您仅想体验方案,无需申请域名和备案,可以跳过此步骤。
当完成小程序开发并且测试通过之后,开始对小程序进行发布。小程序发布的前提条件包括:
不能使用IP地址,需要使用独立域名,且域名必须经过 ICP 备案。
域名只支持 HTTPS 和 WSS 协议。
域名申请和备案
创建域名信息模板并实名认证。
购买域名
查询域名。
登录阿里云域名注册。
在阿里云域名注册页面的搜索框中,搜索您想要注册的域名以及域名后缀,单击查询域名。
加入域名清单。
对于查询结果为未注册的域名,单击加入清单。
在域名清单中确认已添加的域名,单击立即购买。
确认订单信息。
在确认订单页面,选择域名的购买年限和域名所有者类型。
说明若您注册的是“.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日内登录全国互联网安全管理服务平台提交公安联网备案申请。详情请参见公安联网备案及注销。
域名解析
申请域名后,您需要配置域名解析到 ECS 实例的公网 IP,实现通过域名访问网站。
登录。
在左侧菜单栏点击公网DNS解析>权威域名解析,在权威域名解析页面的域名列表中找到目标域名,在右侧操作列中点击解析设置。
在域名解析设置页签中点击添加记录,填写域名解析信息,然后单击确认。
配置项
说明
示例值
记录类型
选择域名指向的类型。此处选择A。
A
主机记录
根据域名前缀填写主机记录。本方案以顶级域名为例,例如
example.com
,输入框中填写@。@
记录值
填写ECS实例的公网IP。
10.0.x.x
TTL
域名的更新周期,保留默认值。
10分钟
证书配置
小程序要求与Web服务器间通过 HTTPS 协议进行通信,HTTPS 协议使用 SSL(Secure Sockets Layer)对数据进行加密。将 SSL 证书安装至服务器或对应的云产品,实现 HTTPS 加密通信,从而保护用户隐私和数据安全。
阿里云提供了有效期为三个月的个人测试证书(免费版),以支持个人和小规模使用场景中在开发测试阶段快速启用 HTTPS 协议,详情请参见申请个人测试证书。
步骤一:下载SSL证书
登录。
在左侧导航栏,选择。
在SSL证书管理页面,定位到目标证书,在操作列,单击更多,然后选择下载页签。
在服务器类型为Apache的操作列,单击下载。
解压缩已下载的SSL证书压缩包。
根据您在提交证书申请时选择的CSR生成方式,解压缩获得的文件不同,具体如下表所示。
CSR生成方式
证书压缩包包含的文件
系统生成或选择已有的CSR
证书文件(CRT格式):默认以证书绑定域名_public命名。CRT格式的证书文件采用Base64-encoded编码的文本文件。
证书链文件(CRT格式):默认以证书绑定域名_chain命名。
私钥文件(KEY格式):默认以证书绑定域名命名。
手动填写
如果您填写的是通过数字证书管理服务控制台创建的CSR,下载后包含的证书文件与系统生成的一致。
如果您填写的不是通过数字证书管理服务控制台创建的CSR,下载后只包括证书文件(PEM格式),不包含证书密码或私钥文件。您可以通过证书工具,将证书文件和您持有的证书密码或私钥文件转换成所需格式。转换证书格式的具体操作,请参见证书格式转换。
步骤二:在Apache服务器安装证书
执行以下命令,在Apache的安装目录下创建一个用于存放证书的cert目录。
sudo mkdir /etc/httpd/cert
说明/etc/httpd/
是使用yum方式安装Apache时默认安装目录。如果您手动修改过该目录或使用其他方式安装的Apache,请根据实际配置调整。将证书文件和私钥文件上传至
/etc/httpd/cert
目录。说明您可以使用远程登录工具附带的本地文件上传功能,上传文件。例如PuTTy、Xshell或WinSCP等。如果您使用的阿里云云服务器 ECS,上传文件具体操作,请参见上传或下载文件(Windows)或上传文件到Linux云服务器。
检查
LoadModule ssl_module modules/mod_ssl.so
(用于加载mod_ssl.so模块启用SSL服务) 和Include conf.modules.d/*.conf
(用于加载SSL配置目录)是否被注释,如果被注释,请删除#注释。由于操作系统以及Apache安装方式不同,以上内容所处的位置也不同。可能出现在Apache安装目录的以下位置:
conf.modules.d/00-ssl.conf:本文中
LoadModule ssl_module modules/mod_ssl.so
位于该配置文件下(/etc/httpd/conf.modules.d/00-ssl.conf
)。httpd.conf:本文中
Include conf.modules.d/*.conf
位于该配置文件下(/etc/httpd/httpd.conf
)。http-ssl.conf
重要如果仍未找到以上参数,请确认您的Apache服务器中是否已经安装mod_ssl.so模块。如未安装,可执行
yum install -y mod_ssl
命令安装,安装后,可执行httpd -M | grep 'ssl'
命令检查mod_ssl.so是否安装成功。2022年1月1日起CentOS官方将不再对CentOS 8提供服务支持,如果您的操作系统是CentOS 8,yum命令可能无法正常使用,具体解决办法,请参见CentOS 8 EOL如何切换源?。
打开ssl.conf,修改与证书相关的配置。
打开ssl.conf。
sudo vim /etc/httpd/conf.d/ssl.conf
重要ssl.conf文件在不同操作系统的位置和名称不一样,在没有ssl.conf文件的情况下,请您查看Apache安装目录是否存在
conf/extra/http-ssl.conf
配置文件。在ssl.conf配置文件中,定位到以下参数,按照中文注释修改。
<VirtualHost _default_:443> #自定义设置使用的TLS协议的类型以及加密套件(以下为配置示例,请您自行评估是否需要修改) #TLS协议版本越高,HTTPS通信的安全性越高,但是相较于低版本TLS协议,高版本TLS协议对浏览器的兼容性较差 SSLProtocol all -SSLv2 -SSLv3 SSLCipherSuite HIGH:3DES:!aNULL:!MD5:!SEED:!IDEA #将domain_name_public.crt替换成您证书文件名。 SSLCertificateFile /etc/httpd/cert/domain_name_public.crt #将domain_name.key替换成您证书的私钥文件名。 SSLCertificateKeyFile /etc/httpd/cert/domain_name.key #将domain_name_chain.crt替换成您证书的证书链文件名。 SSLCertificateChainFile /etc/httpd/cert/domain_name_chain.crt </VirtualHost>
可选:在
/etc/httpd/conf/httpd.conf
文件中添加以下重定向代码,设置HTTP请求自动跳转HTTPS。RewriteEngine on RewriteCond %{SERVER_PORT} !^443$ RewriteRule ^(.*)$ https://%{SERVER_NAME}$1 [L,R]
执行以下命令,重启Apache服务器使SSL配置生效。
sudo systemctl restart httpd
步骤三:验证SSL证书是否安装成功
证书安装完成后,访问网站域名,如果网页地址栏出现小锁标志,表示证书已经安装成功。
https://yourdomain #需要将yourdomain替换成证书绑定的域名。
小程序发布
域名切换。
微信开发者工具导入小程序项目,打开项目配置文件
miniprogram/config.ts
,将常量BLOG_HOST
替换为完成备案的 HTTPS 域名。预览小程序。
在微信开发者工具中,单击预览图标,开发者工具会自动打包当前项目,并上传小程序代码至微信的服务器,成功之后会在界面上显示一个二维码。使用当前小程序开发者的微信扫码即可看到小程序在手机客户端上的真实表现。
上传代码。
在微信开发者工具中,单击右上角上传图标,在设置版本号以及备注信息后单击上传。
提交审核。
登录小程序管理后台,在左侧导航栏单击管理>版本管理,在版本管理页面开发版本列表中找到目标版本,单击提交审核,按照页面提示填写相关信息。
说明需要确保严格测试了版本之后,再提交审核, 过多的审核不通过,可能会影响后续的时间。
执行发布。
审核通过之后,管理员的微信中会收到小程序通过审核的通知,在小程序管理后台左侧导航栏单击管理>版本管理,在版本管理页面审核版本列表中找到目标版本,单击发布。
说明小程序提供了两种发布模式:全量发布和分阶段发布。全量发布是指当点击发布之后,所有用户访问小程序时都会使用当前最新的发布版本。分阶段发布是指分不同时间段来控制部分用户使用最新的发布版本。一般来说,普通小程序发布时采用全量发布即可,当小程序承载的功能越来越多,使用的用户数越来越多时,采用分阶段发布是一个非常好的控制风险的办法。
获取小程序码。
发布完成之后即可在微信中根据名称搜索到小程序,此外小程序管理平台提供了小程序码的预览和下载,开发者可以自行下载用于线上和线下的小程序服务推广。您可以在小程序管理后台左侧导航栏单击小程序码获取小程序码进行分享和推广。
完成及清理
20
方案验证
通过小程序开发工具模拟器,验证博客列表以及博客内容是否可以正常查阅。
当您完成 JWT 插件安装(一键部署默认已安装)之后,可以在小程序端实现内容创作。在模拟器底部菜单切换至我的,单击游客图标,在登录页面点击注册用户,通过页面引导完成新用户注册并登录,在底部菜单我的点击立即创作,在内容编辑器中创作并发布。
清理资源
您可以使用ROS一键删除创建的云资源,避免继续产生费用。
登录ROS控制台。
在左侧导航栏,选择资源栈。
在资源栈页面的顶部选择部署的资源栈所在地域,找到资源栈,然后在其右侧操作列,单击删除。
在删除资源栈对话框,选择删除方式为释放资源,然后单击确定,根据提示完成资源释放。