搭建微信网页本地开发环境

需求场景:微信公众号开发基本配置中填入的服务器地址只能是公网地址,然而,开发调试阶段又是建立在本地服务,这样就需要将被微信认可的公网域名映射到开发者本机的服务器地址,才能调试微信公众号提供的接口功能

系统: Mac;

工具:Nginx    Gas Mask    Charles    iPhone

准备:假设你拥有Mac和iPhone各一台,并且下载并安装了所列的应用工具,网上有很多对应的安装教程

具体步骤

一. 利用Gas Mask修改hosts文件,将公网域名映射到本机,如图1-1


图1-1


二. 利用Mac上安装配置好的Charles工具代理掉自己的iPhone,需要提醒的是手机和电脑必须连接同一个局域网,网上有很多优秀教程,请自行股沟

三. 修改nginx配置文件

   1.  运行    nginx -t    找到nginx.conf文件目录,如图2-1


图2-1

    2. 选中Finder窗口,点击快捷键    shift+command+G,调出前往文件夹输            入框,将上一步获取的路径复制黏贴进去,点击“前往”,最终可以找到需要修改的nginx.conf文件,如图2-2


图2-2

    3. 修改nginx.conf文件,新建一个server块,假设本地开发环境的端口是8080,如图2-3


图2-3

    4. 保存对nginx.conf文件的修改后,运行 sudo nginx 或 sudo nginx -s reload 启动nginx服务,然后在浏览器的地址栏输入localhost,如果能正常显示nginx页面,则表示配置正确且80端口已经启动,如图2-4


图2-4

四. 运行本地开发环境,端口号要与nginx.conf中对应的配置保持一致。

五. 用手机微信客户端直接访问为公众号配置的公网地址,到这一步就可以在手机上调试微信相关功能了

总结:

    其实,方法不止一种,每种方法也可以有不同的实现,本文旨在用最简易流畅的阐述方式告知读者如何快捷有效的解决现实问题,因此并未对其他方法以及此方法中各环节展开描述。至于,为何引入nginx来反向代理本地服务,我的目的是为了避免每次提交代码都要手动更改端口号,除非开发者所有本地服务都启用80端口,显然这不是一个明智的选择。至于,实际的使用读者自行抉择。

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 117,206评论 15 132
  • 前言 近期在准备搭建一个vue.js+node.js全栈开发的社区,之前由于没有云服务器搭建经验,这篇文章做一下相...
    技术宅小青年阅读 3,386评论 1 30
  • 我不知道这么说对不对,但是这一周我深深地感受到了,如果你对他还不确定该不该携手一生,那么一起养只宠物吧。 在此之前...
    fanoo阅读 89评论 0 0