Loading... <blockquote class="wp-block-quote"> <p><img class="alignnone wp-image-146" src="https://jrboy.oss-cn-chengdu.aliyuncs.com/wp-content/uploads/2019/07/2019070716031855-300x119.png" alt="" width="1016" height="403" style=""></p> <p>使用ngrok 服务可以分配给你一个域名让你本地的 web 项目提供给外网访问,特别适合向别人展示你本机的 web demo 以及调试一些远程的 API ( 比如微信公众号,企业号的开发 ) ,附手机版内网穿透。</p> </blockquote> <!-- /wp:quote --> <!-- wp:paragraph --> <p>先来个效果展示图:</p> <p><img class="alignnone wp-image-126 size-full" src="https://jrboy.oss-cn-chengdu.aliyuncs.com/wp-content/uploads/2019/07/2019070715175643.png" alt="" width="1202" height="639" style=""></p> <p><img class="alignnone wp-image-127 size-full" src="https://jrboy.oss-cn-chengdu.aliyuncs.com/wp-content/uploads/2019/07/2019070715184489.png" alt="" width="1110" height="648" style=""></p> <!-- /wp:paragraph --> <!-- wp:image {"id":126} --><!-- /wp:image --> <!-- wp:image {"id":127} --><!-- /wp:image --> <!-- wp:paragraph {"textColor":"vivid-red","fontSize":"large"} --> <p class="has-text-color has-large-font-size has-vivid-red-color"><strong>正文开始:</strong></p> <!-- /wp:paragraph --> <!-- wp:paragraph --> <p>1,开启ngrok 服务</p> <!-- /wp:paragraph --> <!-- wp:paragraph --> <p>服务下载地址:<span class="external-link"><a class="no-external-link" href="http://ngrok.zmide.com/" target="_blank"><i data-feather="external-link"></i>http://ngrok.zmide.com/</a></span> 根据自己的系统选择(本次将在win10下操作)</p> <!-- /wp:paragraph --> <!-- wp:paragraph --> <p><img class="alignnone wp-image-131 size-full" src="https://jrboy.oss-cn-chengdu.aliyuncs.com/wp-content/uploads/2019/07/2019070715312955.png" alt="" width="1696" height="683" style=""></p> <!-- /wp:paragraph --> <!-- wp:image {"id":131} --><!-- /wp:image --> <!-- wp:paragraph --> <p>在命令行下进入到 ngrok 客户端目录下 :将下载好的压缩包解压,进入解压后的文件夹,路径输入cmd回车</p> <p><img class="alignnone wp-image-132 size-full" src="https://jrboy.oss-cn-chengdu.aliyuncs.com/wp-content/uploads/2019/07/2019070715343544.png" alt="" width="987" height="706" style=""></p> <!-- /wp:paragraph --> <!-- wp:image {"id":132} --><!-- /wp:image --> <!-- wp:image {"id":133} --><!-- /wp:image --> <!-- wp:paragraph --> <p>执行 ngrok -config=ngrok.cfg -subdomain test 80 ( test 是你连接注册的的域名前缀,如果连接失败可以换个前缀 )<img class="alignnone wp-image-135 size-full" src="https://jrboy.oss-cn-chengdu.aliyuncs.com/wp-content/uploads/2019/07/2019070715395858.png" alt="" width="1223" height="639" style=""></p> <!-- /wp:paragraph --> <!-- wp:image {"id":135} --><!-- /wp:image --> <!-- wp:paragraph --> <p>回车确定开启,如下图则为成功开启 ngrok 服务。</p> <p><img class="alignnone wp-image-136 size-full" src="https://jrboy.oss-cn-chengdu.aliyuncs.com/wp-content/uploads/2019/07/2019070715403184.png" alt="" width="1202" height="639" style=""></p> <!-- /wp:paragraph --> <!-- wp:image {"id":136} --><!-- /wp:image --> <!-- wp:paragraph --> <p> </p> <!-- /wp:paragraph --> <!-- wp:paragraph --> <p>2,安装 PHPCUSTOM 软件(也可以不使用这个软件,这里方便演示举例使用,也可以使用nginx等其他web服务器!!)</p> <!-- /wp:paragraph --> <!-- wp:paragraph --> <p>软件下载地址:<span class="external-link"><a class="no-external-link" href="http://www.phpcustom.com/" target="_blank"><i data-feather="external-link"></i>http://www.phpcustom.com/</a></span></p> <!-- /wp:paragraph --> <!-- wp:paragraph --><!-- /wp:paragraph --> <!-- wp:paragraph --> <p> </p> <!-- /wp:paragraph --> <!-- wp:paragraph --> <p>将压缩包解压,双击“PHPCUSTOM.exe”打开 ,如果打不开请安装NET4.6(解压文件里有)</p> <p><img class="alignnone wp-image-128 size-full" src="https://jrboy.oss-cn-chengdu.aliyuncs.com/wp-content/uploads/2019/07/2019070715241267.png" alt="" width="987" height="706" style=""></p> <!-- /wp:paragraph --> <!-- wp:image {"id":128} --><!-- /wp:image --> <!-- wp:paragraph --> <p>点击网站管理;</p> <p><img class="alignnone wp-image-129 size-full" src="https://jrboy.oss-cn-chengdu.aliyuncs.com/wp-content/uploads/2019/07/2019070715271740.png" alt="" width="998" height="680" style=""></p> <!-- /wp:paragraph --> <!-- wp:image {"id":129} --><!-- /wp:image --> <!-- wp:paragraph --> <p>然后左上角“添加站点”</p> <p><img class="alignnone wp-image-130 size-full" src="https://jrboy.oss-cn-chengdu.aliyuncs.com/wp-content/uploads/2019/07/2019070715285970.png" alt="" width="1110" height="648" style=""></p> <!-- /wp:paragraph --> <!-- wp:image {"id":130} --><!-- /wp:image --> <!-- wp:paragraph --> <p>依次填写网站名称、网站目录等数据。</p> <p><img class="alignnone wp-image-137 size-full" src="https://jrboy.oss-cn-chengdu.aliyuncs.com/wp-content/uploads/2019/07/2019070715421226.png" alt="" width="1222" height="364" style=""></p> <!-- /wp:paragraph --> <!-- wp:image {"id":137} --><!-- /wp:image --> <!-- wp:paragraph --> <p>完成后添加网站,回到主页“重启服务器”</p> <p><img class="alignnone wp-image-138 size-full" src="https://jrboy.oss-cn-chengdu.aliyuncs.com/wp-content/uploads/2019/07/2019070715435520.png" alt="" width="998" height="680" style=""></p> <!-- /wp:paragraph --> <!-- wp:image {"id":138} --><!-- /wp:image --> <!-- wp:paragraph --> <p>重启完成后,就可以输入网址访问了。</p> <p><img class="alignnone wp-image-139 size-full" src="https://jrboy.oss-cn-chengdu.aliyuncs.com/wp-content/uploads/2019/07/2019070715445834.png" alt="" width="1177" height="880" style=""></p> <!-- /wp:paragraph --> <!-- wp:image {"id":139} --><!-- /wp:image --> <!-- wp:paragraph --> <p>教程已结束,如果你需要用自己的域名链接本地服务器的话,请继续往下看</p> <!-- /wp:paragraph --> <!-- wp:paragraph --> <p>附加:</p> <!-- /wp:paragraph --> <!-- wp:paragraph --> <p>使用自己的域名访问本地服务器</p> <!-- /wp:paragraph --> <!-- wp:paragraph --> <p>将自己的域名 A 解析到 IP <code>152.32.128.230</code> (测试是将test.jrgsq.top A记录 解析到 152.32.128.230 )</p> <p><img class="alignnone wp-image-140 size-full" src="https://jrboy.oss-cn-chengdu.aliyuncs.com/wp-content/uploads/2019/07/2019070715495858.png" alt="" width="866" height="259" style=""></p> <!-- /wp:paragraph --> <!-- wp:image {"id":141} --><!-- /wp:image --> <!-- wp:paragraph --> <p>cmd进入到 ngrok 目录下</p> <!-- /wp:paragraph --> <!-- wp:paragraph --> <p>执行 <code>ngrok -config=ngrok.cfg -hostname xxx.xxx.xxx 80 </code> ( xxx.xxx.xxx 是你自己的顶级域名, 测试是填写的 test.jrgsq.top )</p> <p><img class="alignnone wp-image-142 size-full" src="https://jrboy.oss-cn-chengdu.aliyuncs.com/wp-content/uploads/2019/07/2019070715544321.png" alt="" width="1223" height="639" style=""></p> <!-- /wp:paragraph --> <!-- wp:image {"id":142} --><!-- /wp:image --> <!-- wp:paragraph --> <p>修改/添加 网站域名填写你的域名 (测试填写 的是 test.jrgsq.top)</p> <p><img class="alignnone wp-image-143 size-full" src="https://jrboy.oss-cn-chengdu.aliyuncs.com/wp-content/uploads/2019/07/2019070715553916.png" alt="" width="1110" height="648" style=""></p> <!-- /wp:paragraph --> <!-- wp:image {"id":143} --><!-- /wp:image --> <!-- wp:paragraph --> <p>访问域名成功!!</p> <p><img class="alignnone wp-image-144 size-full" src="https://jrboy.oss-cn-chengdu.aliyuncs.com/wp-content/uploads/2019/07/2019070715560361.png" alt="" width="1235" height="819" style=""></p> <!-- /wp:paragraph --> <!-- wp:image {"id":144} --><!-- /wp:image --> <!-- wp:paragraph --> <p> </p> <!-- /wp:paragraph --> <!-- wp:paragraph --> <p><strong>技术支持:</strong></p> <!-- /wp:paragraph --> <!-- wp:paragraph --> <p><strong>免费 Ngrok 服务官网:</strong><span class="external-link"><a class="no-external-link" href="http://ngrok.zmide.com/" target="_blank"><i data-feather="external-link"></i>http://ngrok.zmide.com/</a></span></p> <p><strong>手机版 Ngrok下载:</strong></p> <p><strong><span class="external-link"><a class="no-external-link" href="http://img.zmkj6.top/file/zm_app/img/1612287301_2958.apk" target="_blank"><i data-feather="external-link"></i>http://img.zmkj6.top/file/zm_app/img/1612287301_2958.apk</a></span></strong></p> <!-- /wp:paragraph --> <!-- wp:paragraph --> <p><strong>PHPCUSTOM</strong>官网: <span class="external-link"><a class="no-external-link" href="http://www.phpcustom.com/" target="_blank"><i data-feather="external-link"></i>http://www.phpcustom.com/</a></span></p> <!-- /wp:paragraph --> 最后修改:2021 年 08 月 12 日 © 允许规范转载 打赏 赞赏作者 支付宝微信 赞 1 如果觉得我的文章对你有用,请随意赞赏