利用ngrok和kong在调试微信公众号指定域名下的H5页面

微信公众号一些功能， 比如jssdk要在微信指定的域名下才能正常调用， 没有dev模式， 一点都不友好。 想要快速的调试代码， 需要一些trick。

基本思路是利用ngrok把本地的server代理到服务器上， 然后在服务器kong上设置映射， 最后让服务器的域名指向自己的机器。

启动ngrok

先不折腾自己搭建服务器， 直接用官网 https://ngrok.com/。
针对react工程， 把本地的localhost:8080映射到xxx.ngrok.io上， 下载客户端后， 运行命令：

ngrok http 8080 -host-header="localhost:8080"

启动了把本地localhost:8080映射到了https://XXX.ngrok.io（命令执行完毕有提示） 。

配置kong

我们项目的kong有网页配置端， 直接用，

image.png

注意有个配置要取消， 不然映射到本地的路径不对：

image.png

添加upstreams， target设置为：74ee1aa6.ngrok.io:80

image.png

done

已经能够在指定的虚拟路径访问到自己的机器了

因为利用了公司服务器的kong， 和ngrok的官网， 没买会员（猜的）的情况下每次启动客户端打洞的时候， 都要更换子域名， 还是比较麻烦， 就只是简单记录一下。