近日獲得一份微信營銷系統(tǒng)的代碼，看其功能比較豐富，便開始窺其代碼的實現(xiàn)。為了將整個業(yè)務(wù)系統(tǒng)跑起來，還真的花了不少時間琢磨，幸好不負我的幾十年功力，終于將運營環(huán)境和開發(fā)環(huán)境搭建成功，并將系統(tǒng)的授權(quán)代碼全部剔除（軟件廠商控制使用授權(quán)）。
準備條件：
1. 互聯(lián)網(wǎng)服務(wù)器（必須開啟80，443端口）
2. 申請域名，且綁定到服務(wù)器
3. 微信公眾號申請，并通過微信認證（300人民幣）
先上系統(tǒng)部署圖 ：
環(huán)境配置.jpg)
幾個部件需要介紹一下：
1. xampp ： 開發(fā)php的套件，包含了apache，php，mysql，用起來很簡單，不過我是部署在linux和mac 上，要留意的是文件目錄訪問權(quán)限的問題，mac下 所有的服務(wù)進程跑在root用戶下；
2. phpstrom： 開發(fā)php的ide，出自jetbrains（我個人理解是目前開發(fā)工具最牛逼的公司）。 管理數(shù)據(jù)庫推薦 DataGrip 軟件。
3. xdebug ： 這個東西是php與phpstrom的調(diào)試接口 ，apche接收到http請求，轉(zhuǎn)給php解釋器，php解釋器再phpStorm進行調(diào)試互動（建立xdebug的9000端口的tcp連接），開發(fā)者可以在phpStorm里面隨意下斷點。 注意： 在php.ini中需配置 ide-key:scott , 我是在nginx的轉(zhuǎn)發(fā)頭里面添加了 XDEBUG_SESSION=scott,令所有經(jīng)過 nginx 服務(wù)器的http請求都被轉(zhuǎn)到phpStorm中，否則無法實現(xiàn)代碼斷點。
4. wxDebuger： 這是微信提供的本地微信頁面調(diào)試工具，開發(fā)這可以利用winre來調(diào)試手機上的頁面，也可以脫離手機，直接調(diào)試微信頁面（要調(diào)試微信的wxjssdk必須使用wxDebuger）。
5. nginx ： 在公網(wǎng)服務(wù)器部署nginx作為http服務(wù)器，接收各種用戶請求，并將其轉(zhuǎn)發(fā)到xampp。
6. vpn : 這個是關(guān)鍵，為了實現(xiàn)本地開發(fā)調(diào)試的目的，我在公網(wǎng)服務(wù)器上部署了openvpn，并在mac開發(fā)機上部署了xampp，phpstorm等，并安裝vpn客戶端 Tunnelblick，其自動撥號到公網(wǎng)服務(wù)器，獲得地址10.8.0.6，nginx將http請求轉(zhuǎn)發(fā)到了我本地的開發(fā)機器上，這樣我可以很方便的進行遠程和本地調(diào)試了。
主要的功能描述：
1. 手機、瀏覽器、調(diào)試器 發(fā)起的http請求到達公網(wǎng)服務(wù)器，nginx通過vpn轉(zhuǎn)發(fā)到本地開發(fā)機，開發(fā)者在phpstorm中斷點調(diào)試代碼，并將處理結(jié)果按原路返回。
2. 微信服務(wù)器的主要作用是獲取 粉絲信息、oauth認證回調(diào)、服務(wù)器鑒權(quán)等功能 ， HTTP(302)是 oauth的靈魂 。
3. 這種配置架構(gòu)很靈活的可以將開發(fā)模式切換到部署模式，只需要將xampp部署到公網(wǎng)服務(wù)器，并在 nginx的反向代理指到本地xampp服務(wù)即可。
附錄 nginx.conf
server {
listen 80;
server_name wx.xxxx.com www.xxxx.com;
proxy_set_header X-real-ip $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
location / {
proxy_pass http://10.8.0.6:8081;
proxy_set_header Cookie "$http_cookie;XDEBUG_SESSION=scott";
proxy_set_header Host $host;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-real-ip $remote_addr;
}
}