接上篇，原本以為一個上午就能搞定的小程序，沒想到從零開始部署這么的麻煩，為此我也是給胖樹同學捏一把汗，等我幫他把小程序的demo做出來之后，我應該會告訴他從入門到放棄的方法吧。
但是既然已經開始了，就善始善終吧，上篇把微信小程序部署需要的前提比如云服務器、域名、證書都申請配置好了，而且也都實名認證好了，同時也通過一個小的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 #重啟服務
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 連接配置都已經配置完畢。
