一般说来 SPA 的项目我们只要启一个静态文件 Server 就可以了，但是针对传统项目就不一样了，一个项目会依赖很多服务端程序。之前我们的开发模式是在一台开发机上部署开发环境，所有人都在这台开发机上使用 Samba 连接开发。老式开发是没什么问题的，但是前端因为引入了编译流程，增加了 Webpack 打包构建的行为，当多人共同开发的时候经常会因为内存爆满进程被杀导致打包失败。痛定思痛后为了解决这个问题，我决定将 Docker 引入我们的开发环境，通过将开发环境本地化来解决这个问题，所以有了本文。
本文内容主要是我之前分享的文字版，若想看重点的话可以看之前的 Slide：
也可以查看分享视频：http://cloud.live.360vcloud.net/theater/play?roomid=2321
大家好，我是奇舞团，大家可以叫我小舞。第一届全宇宙 JavaScript 开发者大会三天后就要举行了，作为举办方的我简直忙极了。好在场地已经选好了，由我司生产的不写代码只写BUG牌人工智能机器人们已经在帮我布置会场了。本次大会场地定在了木星上，谁让地球上根本没办法容纳几亿来自五宇四宙观众的场地呢。作为第一届在外星球上举办的技术大会，我得把准备工作做足了才行，可千万不能丢了我们地球人的脸。这不，讲者的演讲稿都还没有发给我呢，我得赶紧去催催。
大家好，我是尼古拉斯·D·路飞，大家可以叫我路飞。对，隔壁海贼王片场的蒙奇·D·路飞和我并没有什么关系。（观众：没有关系对毛对！）作为名字带D致力成为JS王的男人，我很荣幸被邀请成为第一届全宇宙 JavaScript 开发者大会的演讲嘉宾。本次我要分享的内容是《去中心化的JS在地球上的运用》。这个内容其实之前我已经分享过，我只要用我之前的 PPT 更新下就好啦，so eas……等下，我的文档呢！！！此时天空中响起了一声系统提示：“尊敬的 VIP 用户您好，由于您的会员已到期，我们已任性地将您的资料全部都清空叻！”所以老天这是要我三天之内把 PPT 准备好的意思？我此时的心情只能如下图了。
Web开发过程中离不开调试，WebView 页面开发更是如此。本篇会和大家讲述在 iOS WebView 中一般是如何调试的。其实除去系统差异带来的区别之外，两者调试的原理上其实都差不多。
抓包即我们查看下 WebView 中的所有网络请求，在很多无法获取到机器的时候非常有用。通常页面行为不正常往往是接口请求的参数不正确，或者是接口返回的数据有异常。甚至于页面行为存在打点，根据打点请求来判断行为是否正常。通过这种“望闻问切”的方式，有些问题能够浮出水面。市面上抓包软件很多，Windows 上大家一般都是用 Fiddler, Mac 上则使用 Charles，还有其它的这里就不一一列举了。不过软件很多原理确实一样，简单的说来则是使用 HTTP 代理将所有的请求转发到软件记录本次 HTTP 请求的相关数据。
首先我们需要保证手机和电脑在同一个局域网中，软件中开启 Proxy 配置，这里以 Charles 为例，如图勾选"Enable transparent HTTP Proxying"即可。然后手机 WiFi 上配置 HTTP 代理 IP 为你的电脑 IP，端口为刚才软件中配置的端口（默认8888）。配置完后如无问题就可以在软件中看到请求流了。我们可以类似于 Chrome 开发者工具中的 Network 一样详细的查看请求的请求报文和响应报文。
WebView 是一个客户端浏览器控件，可以实现加载并渲染网页的逻辑。但是这个控件并不能完全同等于浏览器，而且我们页面的一些行为会依赖客户端的交互所以我们需要在 WebView 环境中进行调试。下面我就来说一说简单的 WebView 调试方法。
抓包即我们查看下 WebView 中的所有网络请求，在很多无法获取到机器的时候非常有用。通常页面行为不正常往往是接口请求的参数不正确，或者是接口返回的数据有异常。甚至于页面行为存在打点，根据打点请求来判断行为是否正常。通过这种“望闻问切”的方式，有些问题能够浮出水面。市面上抓包软件很多，Windows 上大家一般都是用 Fiddler, Mac 上则使用 Charles，还有其它的这里就不一一列举了。不过软件很多原理确实一样，简单的说来则是使用 HTTP 代理将所有的请求转发到软件记录本次 HTTP 请求的相关数据。
首先我们需要保证手机和电脑在同一个局域网中，软件中开启 Proxy 配置，这里以 Charles 为例，如图勾选"Enable transparent HTTP Proxying"即可。然后手机 WiFi 上配置 HTTP 代理 IP 为你的电脑 IP，端口为刚才软件中配置的端口（默认8888）。配置完后如无问题就可以在软件中看到请求流了。我们可以类似于 Chrome 开发者工具中的 Network 一样详细的查看请求的请求报文和响应报文。
前文我们介绍了 Android 的 WebView 交互方式，iOS 从原理上来说和 Android 还是非常类似的。在 iOS 中 WebView 需要分为UIWebView 和 iOS8 中新增的 WKWebView 两种类型。其中 WKWebView 相较于 UIWebView 优势在于能够直接使用系统 Safari 渲染引擎去渲染页面，支持更多的 HTML5 特性，渲染性能也会更好点。由于对 iOS 开发了解不太多，以下的代码大多是网络整理，没有 swift 的实现，如果有任何错误还请及时联系。
两个 WebView 类型提供了不同的调用方式，但是基本上可以归类成以下两种：
在 UIWebView 中，iOS7+ 提供了 JavascriptCore 让我们能够直接在 WebView 中获取到 JSContext，也就是当前执行环境的 JS 上下文。在这里我们就可以获取到对应的 JS 方法并执行，是非常高效的执行方式。同时这种方式的好处是能够拿到 JS 执行的结果，并转换成对应的 JS 类型。定义好 jsContext 之后就可以调用 evaluateScript 方法来执行 JS 了。
- (void)webViewDidFinishLoad:(UIWebView *)webView
{
JSContext *jsContext = [self.webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
//设置JS执行报错捕获
[self.jsContext setExceptionHandler:^(JSContext *context, JSValue *exception){
NSLog(@"%@", exception);
}];
JSValue *value = [self.jsContext evaluateScript:@"document.title"];
self.navigationItem.title = value.toString;
}
| Objective-C 数据类型 | 对应 JavaScript 数据类型 |
|---|---|
| nil | undefined |
| NSNull | null |
| NSString | string |
| NSNumber | number, boolean |
| NSDictionary | Object object |
| NSArray | Array object |
| NSDate | Date object |
| NSBlock | Function object |
| id | Wrapper object |
| Class | Constructor object |
WebView 是移动端应用中的一个控件，提供了类似浏览器可以在 App 中加载网页的功能。现在市面上很多应用都会使用这种方式内嵌一些 h5 页面用来实现产品功能。使用这种方式带来的好处就是支持快速迭代更新，并且页面的功能是全网升级。当然目前 RN 和 Codorva 给我们带来的热更新方案也是可以的，只是目前 Apple 的态度很拒绝，这里我们略过不表。在 WebView 中的网页势必存在和客户端进行交互的动作，进行数据的共享。下面我们就来说说 Android WebView 中 JS 和 Native 的交互方式。
我们明白 WebView 其实就是在加载网页，所以客户端可以直接访问 javascript:console.log('hello') 这样的伪 URL 即可实现在页面注入需要执行的 JS 代码。调用方法如下：
WebView webview = (WebView) findViewById(R.id.webView);
webview.loadUrl("javascript:console.log('hello')");
这样我们就实现了调用 JS 的目的了。loadUrl() 的方案从另外一个角度来看可以算是 hack 方案了，对客户端来说，他们的 JS 交互本质上其实就是一个拼接 JS 字符串的过程。
刚才我们也说了 loadUrl() 不是 Android 的正经解决方法。好在官方也想到了这点，在 Android 4.4+ 之后，官方给提供了原生的方法支持调用，那就是 evaluateJavascript()。这个方法最大的好处就是能够直接在一次执行的时候获取到 JS 返回的结果。如果是使用 loadUrl() 的方式的话，执行完后对客户端来说这句话就结束了，如果想要拿到返回的结果的话另外需要 JS 调用客户端的方法返回。
Drone 是一款基于Docker的CI工具，不仅运行环境是容器化的，甚至于 CI 流中的每一个插件也是 docker 容器。基于容器的 Drone 插件一大特色就是允许我们使用任何语言去开发插件，Python, PHP, Nodejs, bash... 这些都是可以的。每个开发者都可以使用自己熟悉的语言去开发自己想要的插件。Drone 的官方插件市场罗列了很多插件，并且在文档提供了 Golang 和 Bash 版本的插件开发文档，并开源了一个插件脚手架。
官方插件里有一个 drone-telegram 插件，不过插件目前是不支持自定义 telegrame 请求地址的，对于我这种机器部署在国内需要使用反代的方式访问 telegram 的用户来说不是很方便。搜索到 node-telegram-api 这个模块可以配置，下面我就简单说说基于 Nodejs 写一个 telegram 消息通知的插件。
最近有使用 Telegram 机器人相关的服务，之前是部署在境外服务器上，运行良好。某天脑子抽风把服务迁移到国内机器了，发现一直 Timeout，后来才反应过来 Telegram 被墙了。由于我使用的是 Telegram bot 相关服务，请求的都是 https://api.telegram.org 这个域名的地址，于是我就想到了能不能借助国外的机器设置反向代理解决这个问题。
首先我想到的是不修改服务代码，直接将我本地的 api.telegram.org 解析到我的境外服务器，然后在服务器上做反向代理。这个方案是可行的，唯一需要解决的是服务器上 api.telegram.org 证书信任的问题。解决方法也很简单，服务器上自建证书后在本地设置强制信任即可。
这里比较坑的一点在于网上给的教程一般都是说如何在 Linux 上创建自建证书然后在客户端例如 Windows 上信任。很少有教程会说如何在 Linux 上信任的，所以当时搜的资料很少。使用如下命令可为 Linux 添加证书：
sudo mkdir /usr/share/ca-certificates/extra
sudo cp foo.crt /usr/share/ca-certificates/extra/foo.crt
sudo dpkg-reconfigure ca-certificates
Caddy 是一款由 Go 编写的 Web Server 工具，在折腾 Drone 的时候，我最终就是使用的它提供 Web 服务。回到标题，为什么要用 Caddy 替换掉 Nginx 呢？最主要的原因是 Caddy 能让网站自动支持 HTTPS。同样是使用 Let's Encrypt，换成 Nginx 我们就必须手工操作，并且还需要设置三个月更新证书的计划任务。而且默认还支持 http/2，很多事情都不需要我们再配置了。另外它的配置文件也比 Nginx 的要简单很多，几十行的 Nginx 配置文件 Caddy 仅需要几行就可以搞定了。
Caddy 提供了一键安装命令生成功能，访问 https://caddyserver.com/download 选择对应的平台，插件可默认为空，最后选择对应的协议后下方即会生成一键安装命令，例如：
$ curl https://getcaddy.com | bash -s personal
