接上篇,原本以为一个上午就能搞定的小程序,没想到从零开始部署这么的麻烦,为此我也是给胖树同学捏一把汗,等我帮他把小程序的demo做出来之后,我应该会告诉他从入门到放弃的方法吧。
但是既然已经开始了,就善始善终吧,上篇把微信小程序部署需要的前提比如云服务器、域名、证书都申请配置好了,而且也都实名认证好了,同时也通过一个小的Web服务程序证明了环境已经配置成功。这一节就开启注册开发者账号和配置小程序开发环境等等工作吧。
Step1 注册开发者账号
Step2 配置小程序开发者账号信息
- 登陆微信公众平台,进入 【设置】-【开发设置】-【服务器域名】-【开始配置】
-
扫码完成身份校验后,request合法域名和socket合法域名都需要填写在上一节中准备好的域名地址。就填前两项就好。
Step3 安装小程序开发工具并运行第一个Demo
下载
1.小程序开发工具 :下载后安装在自己电脑上
2.实验配套源码lab-weapp-client:下载后解压启动开发工具,微信扫码登陆,选择【本地小程序项目】-【添加项目】
1.APPID:在公众平台的【设置】-【开发设置】-【开发者ID】中复制过来
2.项目名称:自己填
3.项目目录:选择刚刚解压的源码目录(包含了app.js的那个目录)
4.官方视频教程:运行配套小程序代码在开发工具中给Demo源码配置域名:在开发工具的 编辑 面板中,选中 app.js 进行编辑,需要修改小程序通信域名,比如下面这样,改完记得保存。
App({
config: {
host: 'www.yourdomain.com' // 这个地方填写你的域名
},
onLaunch () {
console.log('App.onLaunch()');
}
});
Step4 搭建HTTP服务
Node+Express可以搭建一个HTTP服务器
4.1安装NodeJS
sudo apt-get update
sudo wget https://mc.qcloudimg.com/static/archive/262420521a966befe17dfa0070ddb272/node-v6.11.0.tar.gz
sudo tar xvf node-v6.11.0.tar.gz
cd node-v6.11.0
sudo ./configure
sudo make #这一步时间比较久
sudo make install
sudo cp /usr/local/bin/node /usr/sbin/
查看版本测试一下看是否安装完成
node -v
4.2 创建HTTP Server
创建要给服务器专用工作目录,进入目录
sudo mkdir -p /data/release/webapp
cd /data/release/webapp
在工作目录下创建package.json文件,修改文件访问权限
sudo touch package.json
sudo chmod a+r+w package.json
vim编辑package.json,添加服务器包和版本号,然后保存退出,参考示例
# /data/release/webapp/package.json 文件目录
{
"name":"webapp"
"version":"1.0.0"
}
创建app.js
cd /data/release/webapp
sudo touch app.js
sudo chmod a+r+w app.js
编辑app.js
// 引用 express 来支持 HTTP Server 的实现
const express = require('express');
// 创建一个 express 实例
const app = express();
// 实现唯一的一个中间件,对于所有请求,都输出 "Response from express"
app.use((request, response, next) => {
response.write('Response from express');
response.end();
});
// 监听端口,等待连接
const port = 8765;
app.listen(port);
// 输出服务器启动日志
console.log(`Server listening at http://127.0.0.1:${port}`);
4.3 运行HTTP服务
安装npm和PM2。pm2 是一个带有负载均衡功能的Node应用的进程管理器.
当你要把你的独立代码利用全部的服务器上的所有CPU,并保证进程永远都活着,0秒的重载, PM2是完美的。它非常适合IaaS结构,但不要把它用于PaaS方案。这里有详细用法
sudo apt-get install npm
sudo npm install -g pm2 #这一步可以用国内的镜像npm install pm2 -g --registry=https://r.cnpmjs.org/
#PM2安装的时间比较长
用npm来安装Express,然后用PM2来启动HTTP服务
cd /data/release/webapp
sudo npm install express --save
pm2 start app.js
现在,HTTP 服务已经在 http://<自己的 CVM IP 地址>:8765
运行
然后我们可以用PM2来进行Node进程的运行,监控和管理
pm2 logs #查看服务输出的日志
pm2 restart app #重启服务
Step5 搭建HTTPS服务
微信小程序要求和服务器的通信都通过HTTPS进行
5.1 安装和启动Nginx
sudo apt-get install nginx -y #安装
sudo /etc/init.d/nginx start #启动 Nginx
此时访问 http://<域名>可以看到 Nginx 测试页面
5.2 配置 HTTPS 反向代理
修改 /etc/nginx 目录的读写权限
sudo chmod a+rw /etc/nginx
将之前下载的 SSL 证书(解压后 Nginx 目录分别以 crt 和 key 作为后缀的文件)通过拖动到左侧文件浏览器 /etc/nginx 目录的方式来上传文件到服务器上。
从证书管理处下载证书,找到nginx的对应的csr和key文件,把他们俩复制到CVM主机的/etc/nginx/文件夹下。
如果复制失败,应该是权限问题,可以先复制到用户目录文件夹/home/ubuntu/下,再在终端里移动文件到/etc/nginx/下
在 /etc/nginx/conf.d 目录创建 ssl.conf 文件
cd /etc/nginx/conf.d
sudo touch ssl.conf
sudo chmod a+rw ssl.conf
修改ssl.conf 文件为如下内容
server {
listen 443;
server_name www.example.com; # 改为绑定证书的域名
# ssl 配置
ssl on;
ssl_certificate 1_www.example.com_bundle.crt; # 改为自己申请得到的 crt 文件的名称
ssl_certificate_key 2_www.example.com.key; # 改为自己申请得到的 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:8765;
}
}
保存配置文件,让 Nginx 重新加载配置使其生效:
sudo nginx -s reload
在浏览器打开https://<你的域名>,如果访问正常,说明HTTPS服务已经安装好。注意,如果打开的是https://<你的IP>,会显示此网站不安全,那是因为没有对应的证书,属于正常的。
Step6 在小程序中测试HTTPS访问
打开配套的小程序Demo,点击 实验一:HTTPS,点击 发送请求 来测试访问结果。
如果服务器响应成功,请点击下一步。
PS:在小程序里我用的是上一节Step6购买的那个已经配置https网站的主机,并没有用前几部配置好的机器,在小程序里访问的只能是在开发设置中已经绑定好了的合法域名。
Step7 安装和配置MongoDB
MongoDB 是一款 NoSQL 数据库,支持 JSON 格式的结构化文档存储和查询,对 JavaScript 有着友好的支持
sudo apt-get install mongodb-server mongodb -y #安装MongoDB
sudo mongod --version #安装结束后查看版本检查是否成功
sudo mongo --version
启动MongoDB
sudo mkdir -p /data/mongodb #创建目录用来存储数据
sudo mkdir -p /data/logs/mongodb #创建目录用来存储日志
sudo mongod --fork --dbpath /data/mongodb --logpath /data/logs/mongodb/webapp.log #启动,首次启动大概花费1min
检查是否启动成功:MongoDB 默认监听 27017 端口等待连接,下面的命令查看当前 27017 端口被哪个进程占用,如果是 MongoDB 的进程,则表示启动成功
netstat -ltp | grep 27017
添加 MongoDB 用户,先登陆本地mongoDB服务
sudo mongo
登录后创建用户,注意保存好创建的用户名和密码
use webapp;
db.createUser({ user: 'webapp', pwd: 'webapp-dev', roles: ['dbAdmin', 'readWrite']});
exit #创建后推出命令行工具
Step8 实现小程序会话
首先安装两个模块
- connect-mongo:通过连接到 MongoDB 为会话提供存储
- wafer-node-session :是由腾讯云提供的独立小程序会话管理中间件
cd /data/release/webapp
sudo npm install connect-mongo wafer-node-session --save
实现小程序会话
在工作目录创建配置文件 config.js
cd /data/release/webapp
sudo touch config.js
sudo chmod a+rw config.js
修改config.js为下面的配置,注意替换掉的App ID和AppSecret,也注意修改mongoDB的账号和密码
module.exports = {
serverPort: '8765',
// 小程序 appId 和 appSecret
// 请到 https://mp.weixin.qq.com 获取 AppID 和 AppSecret
appId: 'YORU_APP_ID',
appSecret: 'YOUR_APP_SECRET',
// mongodb 连接配置,生产环境请使用更复杂的用户名密码
mongoHost: '127.0.0.1',
mongoPort: '27017',
mongoUser: 'webapp',
mongoPass: 'webapp-dev',
mongoDb: 'webapp'
};
编辑 app.js,添加会话实现逻辑
// 引用 express 来支持 HTTP Server 的实现
const express = require('express');
// 引用 wafer-session 支持小程序会话
const waferSession = require('wafer-node-session');
// 使用 MongoDB 作为会话的存储
const MongoStore = require('connect-mongo')(waferSession);
// 引入配置文件
const config = require('./config');
// 创建一个 express 实例
const app = express();
// 添加会话中间件,登录地址是 /login
app.use(waferSession({
appId: config.appId,
appSecret: config.appSecret,
loginPath: '/login',
store: new MongoStore({
url: `mongodb://${config.mongoUser}:${config.mongoPass}@${config.mongoHost}:${config.mongoPort}/${config.mongoDb}`
})
}));
// 在路由 /me 下,输出会话里包含的用户信息
app.use('/me', (request, response, next) => {
response.json(request.session ? request.session.userInfo : { noBody: true });
if (request.session) {
console.log(`Wafer session success with openId=${request.session.userInfo.openId}`);
}
});
// 实现一个中间件,对于未处理的请求,都输出 "Response from express"
app.use((request, response, next) => {
response.write('Response from express');
response.end();
});
源码编写完成后,重启服务:
pm2 restart app
重启后,使用配套的小程序完成会话测试:打开配套小程序 - 点击 实验二:会话 - 获取会话,如果能看到自己的微信头像,那就表示会话已经成功获取了。
至此,服务器运行端口、小程序配置、MongoDB 连接配置都已经配置完毕。