微信小程序线上化改造

基础知识:基于小程序对网络的限制,必须使用域名、https 协议和证书检验。
线上化改造目的:将开发好的小程序服务端代码部署到 Linux 服务器上,并满足小程序对于网络通信接口的要求。
线上化改造流程:安装生产环境 Node.js -> 部署小程序 demo -> 启用域名&证书 -> 运行小程序 demo。

安装生产环境Node.js

现在腾讯云官网获取服务器公网 ip。通过 Xshell 进行远程连接。
以 root 用户登录腾讯云服务器,顺序执行以下两条命令:
curl --silent --location https://rpm.nodesource.com/setup_8.x|sudo bash -
yum install nodejs -y
检查安装是否成功:
node --version

部署小程序 demo

使用 xftp 将本地源码包上传至腾讯云的 Linux 服务器 /home 路径下。
在 Xshell 中打开 /home 目录,进行命令 unzip 解压刚刚上传的代码包。
之后进入小程序的 server 目录,执行 npm install 命令安装依赖包

启用域名&证书

配置域名解析:
在腾讯云控制台上,找到已申请到的域名记录,点击解析按钮,添加一条 A 记录。
主机记录填写为 www,记录值填写为腾讯云服务器的公网 ip。
配置完成后,可以 ping 通。

SSL证书申请:
证书类型选择默认类型,域名身份认证选择自动 DNS 认证。
然后将申请的证书下载到本地。
将证书部署到服务器上时,需要用到 NGINX 这个服务端软件。
通常小程序客户端向服务端发起 http 请求时会用到 80 端口。所以 node.js 也是监听在 80 端口号上的,但小程序客户端向服务端发起 https 请求时会用到 443 端口,所以我们也需要向 443 端口进行监听。因此我们引入 NGINX 来实现 https 协议的转换,同时协助我们进行 SSL 证书的管理。我们会令 NGINX 监听在 443 端口上,当受到请求后再转发给监听在 80 端口上的 node.js

具体操作:

  • 安装 NGINX:在 Xshell 上,直接运行代码 yum install nginx -y
  • 安装完成后,执行命令 nginx 即可启动 nginx。
  • 然后将域名证书用 Xftp 上传到 /etc/nginx 目录下,
  • cd /etc/nginx,然后更新 nginx.conf 文件中关于注释掉的 https 的这部分内容:
server{
  listen 443 ssl http2 default_server;
  server_name #填写绑定证书的域名;
  ssl on;
  ssl_certificate #填写自己申请到的域名证书;
  ssl_certificate_key #填写自己申请到的证书名;
  ssl_session_timeout 5m;
  ssl_protocols TLSv1 TLSv1.1 TLSv1.2; #按照这个协议配置
  ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:HIGH:!aNULL:!MD5:!RC4:!DHE; #按照这个套件配置
  ssl_prefer_server_ciphers on;
  location / {
    proxy_pass http://127.0.0.1:80; #设置转发到 Node.js
  }
}
  • 配置完成后我们先执行 nginx -t 测试配置是否成功。
  • 成功后执行 nginx -s reload 重启 Nginx 以使配置生效。

对于小程序前端的修改配置:

  • 微信公众平台中,设置合法的域名。设置-开发设置-服务器域名
  • 将客户端代码中的 URL 改为 https + 域名模式。
  • 在小程序开发者工具中,打开【检验合法域名和证书】开关。

运行小程序 demo

执行npm install nodemon -g
接着执行npm start

所有线上化改造完成,经测试无误后,就可以将小程序提交审批,发布正式版本了,大家也来试试吧!~~

你可能感兴趣的:(微信小程序线上化改造)