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

接上篇,原本以为一个上午就能搞定的小程序,没想到从零开始部署这么的麻烦,为此我也是给胖树同学捏一把汗,等我帮他把小程序的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 实现小程序会话

首先安装两个模块

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

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 206,214评论 6 481
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 88,307评论 2 382
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 152,543评论 0 341
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 55,221评论 1 279
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 64,224评论 5 371
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,007评论 1 284
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,313评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,956评论 0 259
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,441评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,925评论 2 323
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,018评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,685评论 4 322
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,234评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,240评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,464评论 1 261
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,467评论 2 352
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,762评论 2 345

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,599评论 18 139
  • 第一章 Nginx简介 Nginx是什么 没有听过Nginx?那么一定听过它的“同行”Apache吧!Ngi...
    JokerW阅读 32,642评论 24 1,002
  • 你说,过去就过去了。 我说,现在是过去的现在。 你说,记忆丢掉就算了。 我说,我想找回。 你说,执念太深,也许会伤...
    阮柒月阅读 273评论 0 0
  • 回家的路上开始下小雨了,沿途无人及开始打雷闪电了,我一点也不害怕且心里也充满了开心。到家后雨开始更大更强烈,雨...
    94b12bf49730阅读 196评论 0 0
  • 读普希金的《冬天的早晨》,诗人描写细腻,抒情饱满,一个北国冬日里清晨的美好跃然纸上,浮现眼前。我自己也不自觉地越来...
    可比克克阅读 433评论 4 6