全栈开发的几个调试方法

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 命令无疑是性价比高的最佳选择
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 202,980评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,178评论 2 380
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 149,868评论 0 336
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,498评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,492评论 5 364
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,521评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,910评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,569评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,793评论 1 296
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,559评论 2 319
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,639评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,342评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,931评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,904评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,144评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,833评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,350评论 2 342

推荐阅读更多精彩内容