全栈开发的几个调试方法

2017技术博文第一弹，先分享一下一些周边。这里所谓的周边，包括很多议题，比如 IDE, 开发环境，系统，测试环境，调试环境等。。。叔叔打算分几个章节来分享，谈谈本叔叔在开发中所用到的一些小技巧，当然可能有更好的方案，可以通过Email 联系到叔叔， ecstorm(AT)gmail.com。

本文打算讲讲调试部分，叔叔目前的技术栈是 Java ， Vuejs。操作系统 Mac OS Sierra。Web 服务器使用 Nginx 。 JVM 容器使用 Jetty。

问题

先讲讲问题，目前互联网的 Web 应用，很多都倾向于使用前端框架，例如单页面的应用，后台应用等场景，当然，手机Web网站也可以使用，做成多个入口，既多个单页应用。对于后端的数据，完全使用 Ajax 来加载数据，甚至使用 WebSocket。

那么以此种方式开发，技术上，必然分成前端和后端不同的两组或者多组人，或者说对于全栈开发来说，必然要估计前端后端两方面，开发和调试就比较麻烦了。

方案

面对以上的问题，加之叔叔有个重要的属性:懒。因此，折腾了下用了几个方案。

单兵作战

作为一个全栈，首先要有台 Mac，首先，准备工作做好

• 安装好 Nginx，无所谓 brew 或者 源码安装。叔叔年轻时都是源码安装，老 Mac 当 Linux 用，后来折腾的差不多了，嫌麻烦，新 Mac 都是 brew。
• 修改 /etc/hosts ，增加你要调试的域名，之后访问就用此域名。叔叔年轻时都是 Vi 或者 Vim 修改，老了又变懒了，做软链接，或者外面修改好sudo 拷贝过去，因为要把 google 的 host 更新进去，啊哈哈哈。
• 修改 Nginx 配置，下面贴出一些 demo 示例，基本思路就是 80 端口用来访问域名，后端开个端口让 Nginx 监听，比如 8080， 然后前端应用起个端口，比如 4000，也让 Nginx 监听，然而路径分开，比如 前端直接在根目录 / 下，后端在 /app-name 下，那么前端所有 Ajax 请求就会是以 host 里面加的域名 + /app-name 来的路径来请求。

server {
    listen 80;
    server_name     www.mydomain.dev mydomain.dev; //这里是在host里面新加的调试域名

    // 下面的 location 用来监听前端起的服务，并代理到 80 端口
    location / {
        proxy_pass_header Server;
        proxy_set_header Host $http_host;
        proxy_redirect off;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Scheme $scheme;
        proxy_pass http://localhost:4000;
    }
    // 下面的 location 用来监听后端起的服务，并代理到 80 端口
    location /app-name {
        proxy_pass_header Server;
        proxy_set_header Host $http_host;
        proxy_redirect off;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Scheme $scheme;
        proxy_pass http://localhost:8080/app-name;
    }

}

然后讲后端， 后端必然有个 Web 服务，如下：

Web 服务器	技术语言	容器/应用	端口
Nginx	Java	Tomcat/Jetty	8080
Nginx	PHP	PHP-Fpm	9000
Nginx	Python	gunicorn	5000
Nginx	Ruby	Rails	3000
Nginx	NodeJs	ExpressJS	6000

是的，以上列出，本叔叔都尝试过，思路上大致是一样的。

前端目前主要使用 VueJS， 叔叔虽然不大写了，看还是能看懂的，基本上的原理也明了，因此，这里有点概念上的东西要理理清楚，因为此处所用的事实上也是依托 ExpressJS 来启动了一个应用，

事实上，Gulp 和 Webpack 都可以启动个 HTTP 服务，来查看前端页面，当然外置个 ExpressJS 事实上也一样。

一切的准备完成，npm 把前端代码 run 起来，后端服务开起来，Nginx 开起来，然后域名就能访问了。这里 Nginx 无需重启，如果要修改后端，那么重启后端，要修改前端，那么重启前端，十分方便。

多人协作

多人的思路大致也一样，只是有相当的演进，花了不少时间，按照问题来说

• 测试域名问题，有网关的做网关，之后网关来起 DHCP，各种host 加，会影响全部局域网的机器。当然域名也可以，就是每台机器都要自己配好。这里因为是多人协作，可能需要很多个域名，按照规则分开，比如叔叔的域名结尾以前一直用jk，www.mydomain.jk。
• Nginx 问题，此处，Nginx 必定要放到局域网的某一台公用服务器上。
• 服务端口的，这里要看如何操作，一般要多人协作的不大可能是全栈开发，所以，此处有两种方式，一种是后端代码打包放在局域网服务器，供Nginx 监听，之后，前端开发人员可以起服务，端口各自分配协定好，那么自己的应用自己调试。第二种，前端代码放在服务器上，道理一样，开发人员启动服务，让Nginx 监听，使用公用的前端调试。

多人协作其实和单名开发者非常相似，主要是一定要协商好，域名各自用什么，IP尽量用网关配，或者自己配静态IP。

讲讲以前的演进，以前叔叔没有用 Mac 的时候，开发人员公用一台强劲的服务器，各自协商，共用服务，主要是以服务器共享磁盘，或者客户机共享磁盘的方式，这里的坑有个 Nginx 的 sendfile，对网络磁盘挂载的目录有点问题。还有一种方式是用虚拟机，叔叔比较喜欢 FreeBSD，因此用的是上面的虚拟化工具 jail， 挺好用的。

工具

总结一下工具，以上其实已经说的很清楚了，Nginx，Tomcat/Jetty， Nodejs等。

最主要的有几点

• 平台统一化，使用 *nix 系统，不要因为兼容性的问题降低开发效率，资深的开发人员，公司给配台高配的 MBP，绝对有必要
• 脚本化，发挥“懒”字诀，能自动化的尽量自动化，重心移到业务开发上来
• 可监控化，调试必须要能看到日志输出，*nix 的tail 命令无疑是性价比高的最佳选择