部署一个微信小程序2 | 搭建小程序开发环境

2018-02-03 本文已影响644人臻甄

接上篇，原本以为一个上午就能搞定的小程序，没想到从零开始部署这么的麻烦，为此我也是给胖树同学捏一把汗，等我帮他把小程序的demo做出来之后，我应该会告诉他从入门到放弃的方法吧。

image.png

但是既然已经开始了，就善始善终吧，上篇把微信小程序部署需要的前提比如云服务器、域名、证书都申请配置好了，而且也都实名认证好了，同时也通过一个小的Web服务程序证明了环境已经配置成功。这一节就开启注册开发者账号和配置小程序开发环境等等工作吧。

Step1 注册开发者账号

在微信公众平台注册小程序的账号，注意，在微信公众平台中，订阅号、小程序的账号即便相同也是分开管理的，必须单独注册小程序的账号。
官方视频教程：注册开发者账号

Step2 配置小程序开发者账号信息

登陆微信公众平台，进入【设置】-【开发设置】-【服务器域名】-【开始配置】
扫码完成身份校验后，request合法域名和socket合法域名都需要填写在上一节中准备好的域名地址。就填前两项就好。

image.png

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    #重启服务

http服务中

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/文件夹下。

image.png

如果复制失败，应该是权限问题，可以先复制到用户目录文件夹/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>，会显示此网站不安全，那是因为没有对应的证书，属于正常的。

https服务中

Step6 在小程序中测试HTTPS访问

打开配套的小程序Demo，点击实验一：HTTPS，点击发送请求来测试访问结果。
如果服务器响应成功，请点击下一步。
PS：在小程序里我用的是上一节Step6购买的那个已经配置https网站的主机，并没有用前几部配置好的机器，在小程序里访问的只能是在开发设置中已经绑定好了的合法域名。

实验一：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

image.png

添加 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 连接配置都已经配置完毕。

部署一个微信小程序2 | 搭建小程序开发环境

Step1 注册开发者账号

Step2 配置小程序开发者账号信息

Step3 安装小程序开发工具并运行第一个Demo

Step4 搭建HTTP服务

4.1安装NodeJS

4.2 创建HTTP Server

4.3 运行HTTP服务

Step5 搭建HTTPS服务

5.1 安装和启动Nginx

5.2 配置 HTTPS 反向代理

Step6 在小程序中测试HTTPS访问

Step7 安装和配置MongoDB

Step8 实现小程序会话

猜你喜欢

热点阅读