[微信开发] 开发环境搭建

playmonkey — Sat, 11 Jul 2015 11:24:52 +0800

由于微信开发都是在微信内浏览器运行，不管是登陆还是支付都不能在 PC 开发端愉快地玩耍，但世界我们还是需要拯救的。

由于自己换了新电脑，第一次做微信开发跟大家分享一下我的开发环境，欢迎拍砖交流。

一般的第三方开发永远离不开两个配置，域名 & 回调，有一些平台支持 localhost 的域名&回调会方便，更有支持随意更改端口的，微信上面貌似都没有。

好了，假定我们的域名是 playmonkey.me

域名

微信登陆，JSAPI 以及支付都有域名限制，所以需要让手机微信上打开 palymonkey.me 时，访问到我们本地的 development server。

干这个勾当的当属 Charles 神器。

下载安装打开 Charles
Proxy -> Proxy Setting -> Http Proxy勾选 Enable.... 开启 http proxy 代理，端口默认是 8888
Tool -> DNS Spoofing Settings 勾选 Enable DNS Spoofing
然后把 palymonkey.me 加到 DNS Spoofs，指向本机 127.0.0.1

Charles 好了，下一步配置手机，确保你的手机网络和电脑在同一局域网，配置手机的 HTTP 代理到电脑的 IP 上，端口 8888；

访问http://playmonkey.me；

什么？挂了？当然，酱紫访问的是本地的 80 端口。

好了，我们再来用 Nginx 反向代理搞定这个问题，让手机端的 playmonkey.me 访问到本地 development server 的 3000 端口上。

首先安装启动 Nginx，用 Apache 的朋友对不起了，你们要自食其力 XD

配置 Nginx

server {
      listen 80;
      server_name playmonkey.me;
      charset utf-8;
      location / {
        proxy_pass          http://monkey_servers;
        proxy_redirect      default;
        proxy_set_header    X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header    X-Real-IP $remote_addr;
        proxy_set_header    Host $http_host;
        proxy_next_upstream http_502 http_504 error timeout invalid_header;

      }

    }
    upstream palymonkey_servers{
      server 127.0.0.1:3000;
    }

再用手机访问http://playmonkey.me ，Nice....这回看到页面了。到此我们可以在微信上用 playmonkey.me 访问本地的 dev server，可以愉快地调用 JSAPI & 微信 oauth 登陆 & 发起支付。

噢，如果做的是 PC 端的 oauth 微博登录怎么办？在本地 host 加上 127.0.0.1 palymonkey.com。Nice XD、

异步回调

上面说到发起支付，微信的支付结果是通过异步回调的，所以需要做内网穿透，这里推荐两个工具 ngrok OR localtunnel

localtunnel

localtunnel 是 node 写的，用起来非常简单

$ npm install -g localtunnel
$ lt --port 3000
your url is: https://gqgh.localtunnel.me

这样外网打开https://gqgh.localtunnel.me 就可以访问到本地的 3000 端口

但是 localtunnel 是国外的，公司网络刚刚搭好，经常不稳定果断抛弃转入 ngrok；

ngrok（不想折腾的可以忽略 XD）

悲催的是 ngrok 也是国外的，而且服务器给墙了，BUT，问题不大，我们可以 pull ngrok 1.X 的源码自己编译，2.0 会报证书错误如果没有合法的 https 证书。

好了我们来编译 ngrok，噢，对了，ngrok 是 Go 写的，编译出来直接是一个可执行文件，爽歪歪有木有，哈~

在服务器端（每家都有一只 staging 服务器吧）

NGROK_DOMAIN 设置为您自己拥有的域名，并指向 Ngrok server 运行的服务器

NGROK_DOMAIN="my.domain.com"
git clone https://github.com/inconshreveable/ngrok.git
cd ngrok

openssl genrsa -out rootCA.key 2048
openssl req -x509 -new -nodes -key rootCA.key -subj "/CN=$NGROK_DOMAIN" -days 5000 -out rootCA.pem
openssl genrsa -out device.key 2048
openssl req -new -key device.key -subj "/CN=$NGROK_DOMAIN" -out device.csr
openssl x509 -req -in device.csr -CA rootCA.pem -CAkey rootCA.key -CAcreateserial -out device.crt -days 5000

cp rootCA.pem assets/client/tls/ngrokroot.crt
# make clean
make release-server release-client

编译完有两个可执行文件 bin/ngrok & bin/ngrokd 将 bin/ngrok copy 到你本机在服务器上开启 ngrok server bin/ngrokd -tlsKey=device.key -tlsCrt=device.crt -domain="$NGROK_DOMAIN" -httpAddr=":8000" -httpsAddr=":8001"

本地端

NGROK_DOMAIN="my.domain.com"
echo -e "server_addr: $NGROK_DOMAIN:4443\ntrust_host_root_certs: false" > ngrok-config
./ngrok -config=ngrok-config -subdomain=playmonkey 3000 // 配置subdomain到本地3000端口，这样外网通过playmonkey.NGROK_DOMAIN 就可以访问到本地dev server的3000端口

或者用 SSH forwarding

./ngrok -config=ngrok-config -subdomain=3000 --proto=tcp 22

以上 Ngrok 编译&配置出自 How to setup Ngrok with a self-signed SSL cert

至此我们在发起微信支付时回调 URL 的 HOST 就可以设置为 playmonkey.NGROK_DOMAIN

至此我们可以愉快地开发测试微信的 oauth 登录 & JSAPI & 支付 & 支付回调，好吧，很多 BUG 一点都不愉快。另外感谢 @ruby_sky 的这篇微信支付文章微信支付做起来如丝般顺滑；内微信文档看起来太蛋疼了，各种配置也是找半天，大家有兴趣我可以总结一下微信各个开发的各种配置 XD。

playmonkey (zyj)

[微信开发] 开发环境搭建

域名

异步回调

localtunnel

ngrok（不想折腾的可以忽略 XD）

在服务器端（每家都有一只 staging 服务器吧）

本地端