全栈开发的几个调试方法

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 命令无疑是性价比高的最佳选择

你可能感兴趣的:(全栈开发的几个调试方法)