(这篇文章虽然是产品写的,但是需要你有一点技术基础,可能才能看懂)
事情是这样的,最近我们产品在落实一项工作,在提供需求文档的同时,也需要提供页面交互逻辑,这是为了让开发哥哥和测试妹妹们能更好的理解需求内容。确实是个好事情,记得我在刚入职的时候,用交互的原型给大家讲小程序的页面功能,发现比文档清晰多了,根本不用看文档就能理解来做的大概是个什么东西了。
这是个好事情,因为我们都用sketch画原型,根本没法清晰表现页面跳转的关系,自带的功能就免了,太垃圾了。
于是乎,我尝试了各种能展示页面交互的工具。先是各种第三方插件,以User flows为代表的这种连线工具试了一堆,但是只能在页面上画线条,最难受的它们其实是相当于替我在sketch页面上面画连线,有的时候我复制粘贴一顿操作之后连线就乱了,遂放弃。之后我又试了很多第三方工具,比如最早画小程序原型的墨刀,起初还惊讶于竟然有sketch插件,但是被它的页面流程工具给吓傻了,估么着还处于MVP的第一阶段吧。主要还是我希望能把所有页面平铺在页面上,而且还能表示出来交互的过程,墨刀这类软件注重于模拟真实的页面交互,必须得点点点的,每次只能看到一个页面。预览功能还行,但是不利于全局理解。
后来发现了OverFlow这个工具,我被惊艳到了。话不多说,直接上图。

但是这个工具是Mac独占,想要共享给大家看,那就只能想办法共享了。overflow提供了导出到图像和PDF格式,但是这种文件只是个画面,无法让看图的人享受到自动跳转的爽爽的感觉,最重要的是,有时候页面太多,线条那么多,靠眼睛的话跟走迷宫差不多,肯定不行的。还好overflow提供了一个beta版云服务,上传之后,可以在浏览器上交互式地查看页面图,我天,这开发者就是我亲哥。
后来发现, 这货用的亚马逊的云服务,不翻墙看不了。这不又一次坑了自己亲弟弟嘛,不可能保证大家人人都能翻墙吧,这就纠结了。
于是乎,想到一个非技术看来非常黑科技的方法,反向代理!就是通过一个中转路由器,把内容转发一下,当做以一个代理服务器。还好,我有个Vultr的主机,刚好可以做这件事。开整!
最先想到的是Nginx,这不大家都用的服务器软件嘛,也可以实现反向代理,网上搜了一下,很简单几个配置文件就搞定了。踢里哐啷在daocloud里面创建了一个项目,本地dockerfile和配置文件一写,运行成功

FROM daocloud.io/nginx
COPY nginx.conf /etc/nginx/nginx.conf

百度直接就打开了,洋气洋气。然后修改到overflow的地址 overflow.io,打击感瞬间就来了,这货只支持HTTPS,http的访问直接就给重定向到https了。

一直报这个错误,从这时候起,我就走上了弯道狂飙的道路上:
第一步:自己域名没证书,自己生成的浏览器会提示风险,感觉不专业,到时会大家看到我发的连接肯定会鄙视我的。尝试失败。
第二步:腾讯云申请免费域名证书,为我的域名加了一个证书= =。

修改配置文件和dockerfile

提交、上传,构建成功,发布。
开心激动的试了一下,还是这样的错误。握手失败,我就想干脆先改成http把配置什么调通再解决这个问题,毕竟是我的知识盲区。
第三步:改成http之后访问,拒绝访问403,从信息看到是用的亚马逊的cloudfont

遂改配置文件,尝试各种配置,寻找报403的根源。哇,这中间我踩了多少坑,花了一下午时间,都没搞定这个问题。

这配置里面加了注释的,都是我从网上各种找的配置,删删减减,终于找到了合适的配置。不报403了,确实重定向到https的域名了。
第五步:继续在https中尝试各种配置,发现一直都是那个协议握手失败

中间还顺手加了爬虫过滤和http重定向= =。没办法,思维就是这么发散。
但是怎么弄,都是出错,对方的TLS是1.2的,我也改了对应的协议,发现还是一样的错误。这时候要疯了,凌晨2点,依然没有搞定。睡觉。
梦中,我想到了一个绝妙的方法,换工具呀,哈哈,开心的我一下子就不瞌睡了。然后继续搞。
第六步:尝试了traefik,我深深的被自己的知识深度打击了,放弃,纠结了几天之后,我又回到了nginx的怀抱,决定啃下这个问题
第七步:思考握手失败的问题根源,而不再无脑尝试。事情出现了转机。
用 curl查看了一下连接过程。我***,想骂自己

还记得大学学的网络7层结构,我改的那么多配置,这都是在握手之后才能生效的呀,握手都没成功,怎么可能有效呢= =。

终于,终于发现了这个配置。SNI是个啥,我已经没有兴趣去研究了,心累,总之,成功了。(期间顺便了解了location的“/”到底是啥,估计服务器同学都觉得我好弱哈哈)

第八步:处理页面里面其他的链接跳转与重定向
正在进行中,有个资源是通过302重定向访问的,然后这里的重定向域名依然是overflow.io,所以需要再过滤一下redirect。后面再把图片资源的地址也转发一下,大工就告成。

等元旦过了,这些肯定就搞定了,给你们个链接自己体会一下吧哈哈
https://prototype.bearchao.com/s/N4S3JH/
生命不息,折腾不止!
最后,我真的想感叹一句,Axure真香。不过现在用的也很顺手了,加上子恒给大家做的sketch组件库,无敌。