作者归档:白宦成

关于白宦成

独立开发者, 自由职业者, 写作者

给你的 console.log 添加一些特定的输出

在写 Node.js 代码时,常常会使用 console.log 来输出内容,以便于调试。但默认的 console.log 只能标准的输出,在很多需要上下文 debug 的时候,可能信息是不足的。除了使用 debugger 以外,你还可以试着改造 console.log

在你的 index.js 顶部添加如下代码,即可实现在使用 console.log 时自动在前面加上时间信息。当然,你也可以实现自己需要的上下文,比如当前的文件、当前的行数等。

console.log = (function() {
  var console_log = console.log;
  return function() {
    var args = [];
    args.push(`${new Date().toLocaleString()}` + ' -> ');
    for(var i = 0; i < arguments.length; i++) {
      args.push(arguments[i]);
    }
    console_log.apply(console, args);
  };
})();

这个函数的逻辑不复杂,对 console.log 进行了覆盖,写如了新的函数,并通过 arguments 将开发者传入的参数重新打印,以确保不丢失开发者传入的参数。

《哆啦A梦:大雄与天空的理想乡》观后感

我看的动漫不多,哆啦 A 梦、火影、中华小当家。哆啦 A 梦出了大电影,也确实有空,就必然要去看看的。

以下内容包含剧透,如你尚未看此影片且准备去看,建议关掉当前页面,后续看完再回来看本文。

这部电影,如果说让我印象深刻的,大概是以下几点:

回环、价值观

回环

看完整部电影后,我觉得设计最巧妙的便是一开始的蓝色甲虫。在电影的开始,甲虫的出现显得略显无用,似乎也没有在推动剧情的发展。

然而当你看到最后,看到蓝色甲虫竟成了哆啦 A 梦重回人间的锚点,也就不得不感叹这个伏笔有意思,前面蓝色甲虫直奔大雄而去也就有了原因。

挺好。

价值观单一是问题

在普拉多普亚,所有人都是听从三贤人的安排,自然而然,也就要遵循三贤人的价值观。然而,当整个普拉多普亚都是三贤人的价值观的时候,任何违反三贤人的价值观的都成为了错误,甚至要被三贤人的价值观重新洗脑。

如果三贤人真的是贤人,倒也罢了。但三贤人并不是真正意义上的贤人,也不存在绝对意义上的贤人。所以,价值观单一成了问题。

多彩多元的价值观,才能让我们更加开心。

做自己

和上一条接近,如果说,放在自顶向下的角度来看,价值观单一是问题,那么自底向上的便是要做自己,这个自己,是遵从内心的自己,而不是别人告诉你的自己(当然,找到自己的内心是一件很难的事情)。

做自己,才能真正达到完美。如果不是做自己,不过是在和别人眼中的自己做磨合,终究是会磨合的血肉模糊的。

总结

总体来说,可以看,算是合家欢电影,带小朋友去看也没啥问题。不会出现一些奇奇怪怪的事情,影响小朋友的价值观。我这种老朋友,就是去怀念一下自己小时候的哆啦 A 梦罢了。

linux terminal

如何将 Zed 编辑器设置为你的命令行默认编辑器

我最近在使用 Zed 作为我的主要编辑器,在编辑一些命令行文件时,也会使用 Zed 来编辑。但有些时候,一些应用程序的命令会自动调用默认的编辑器,这个时候会默认使用 nano 或者 vim ,而不是 Zed,体验略差。所以我希望将命令行默认的编辑器修改为 Zed 编辑器。

如果需要将 Zed 作为自己的命令行编辑器,首先需要确认 Zed 是否支持等待模式(wait model),在命令行中执行 zed --help,可以看到 Zed 是支持等待模式的。接下来就可以进行后续的步骤来进行测试了。

这里为是在写 Rails 时用到的,因此,我继续使用 rails credentials 来测试。执行如下命令来确认该命令是否可用。

EDITOR="zed --wait" rails credentials:edit

执行后,可以正常唤起,则说明整个链路已经通畅,接下来只需要将其配置在系统的默认环境变量里即可,将如下代码放在 .zshrc 中即可。

export EDITOR="zed --wait"

其他编辑器的命令参考

# Sublime Text
export EDITOR="subl --wait"
# VSCode
export EDITOR="code --wait"
analog watch at 1 00

天津车检记录

买车记录里,我说过,我目前开的车是一辆 2017 年的雪铁龙 C3 XR,按照最新的汽车年检的规定,刚好满 6 年,需要进行年检,于是我又快速体验了一次年检。

如何进行年检?

年检有两种方式

  • 一种是前置预约的检查,可以在 12306 上预约(或者使用平安车主的代检服务),这种往往检查的速度比较快,虽然也要排队,但是排队的长度比较短,只有几辆车。
  • 另一种是直接去检测机构检查,就需要根据实际的情况来排队,运气不好的话,排队好几个小时是很正常的。

如果你要预约,直接在 12306 App 上找到【机动车检验预约】,就可以预约车辆的年检了。

在预约时,你需要选择时间和地点,并准备抵达现场进行预约检查。到达预约检测地点的时候,一定要问一下哪里是 12306 预约通道,不要和大量的未预约车辆一起排队!避免你预约了,但走的是常规排队通道,浪费时间。

通道里有个“12306预约检验通道”的标志来提醒

当你进入预约通道以后,会让你进行一个预检查登记,大概像下面这样,

填写完成以后,从后备箱拿出三脚架,放在前挡风玻璃处,开车排队,并将车辆开上检验通道,你的事情就做完了,接下来只需要把钥匙交给工作人员,工作人员会将你的车开上检验通道,进行检查。

此刻你只需要到办事大厅,缴费、拍照、等结果即可。汽车检查的速度很快,基本上我去交完费,等了 5 分钟,就已经完成检验,领钥匙走人了。

一些 Tips

  1. 年检的时候记得带上你的三脚架,检查的时候会用到。当然,更好的方案是把三脚架就放在后备箱里,别拿出来,避免用的时候没有。
  2. 记得提前预约,真的要好很多。
  3. 记得检查你的交强险状态,如果交强险时间较短,有可能会无法入库(但到底多短算短我也不知道),最好是保持2个月以上吧。

总结

汽车年检比我想象的要简单,之前我听别人讲,汽车年检都要耗费一天,甚至是需要找专人代为检查。一方面可能是因为他们的车辆较老,各项基础设施都已经出现故障,有可能因为故障的原因导致无法完成年检。另一方面,也可能是因为习惯了排队,而不是预约,导致车检的耗时比较长,所以也就不愿意自己去年检了。

Read More

Feed 订阅调整说明

本站一直以来,都开放了 Feed 的全文订阅,方便读者阅读,不过由于博客时间较长,文章越来越多,导致 Feed 越来越大,目前已经到达了 1.3 MB

较大的 Feed 文件会导致在进行新读者加载时耗费较多时间,因此,我将 Feed 输出的条目调整为 50 条,内容依旧保持全文开启,以方便使用 Feed 订阅的同学。

调整后,Feed 大小只有 64 KB,加载速度也更快。

如果你希望看到我所有的历史文章,可以直接访问本站的归档页面查看。

雪铁龙 C3 XR 车机升级 – 航睿 / 兜风帮 TS7

在拿到驾照后的几次租车里,我基本上都在租一些带 CarPlay 的汽车,所以这次自己买车,车机上不带 CarPlay,让我觉得非常不爽,再加上这个车的原装车机竟然是 Windows CE,所以决定买一个第三方车机换上去。

选择车机

我的主要诉求是 CarPlay,所以对我来说这个事情就十分简单,我只要买一个支持 CarPlay 的车机即可。至于原装车机,因为我没有打算使用,所以够用就行。

处于上述的条件,我有几个选项:

  1. 只需要带 Wi-Fi 的车机即可:因为我并不会使用车机自带的高德导航,而是使用 CarPlay 的高德导航。所以车机是否能够 4G 联网并不重要,我定期使用手机热点给车机系统升级即可。
  2. 配置够用就行,不追求高配:因为我对于车机的预期是开机就进入 CarPlay,所以只要其性能足够运转 CarPlay 即可。结合市场上的车机基本的配置,1G 内存的车机已经足够我跑 CarPlay 了。

综上所属,再加上一些基本的搜索,我选择了航睿的车机,最后 1089 拿下了一个包含行车记录仪 + 倒车影像+ CarPlay 的车机。

具体的流程

1. 淘宝采购

当你有了基础的预算和目标以后,就可以在淘宝上选择合适的车机了。记得搜的时候,搜你自己的车型,然后加上你需要的配置。如果你不知道具体的配置的话,就加上 CarPlay、CarLife 这样的关键词,找到合适的、眼缘不错的车机以后,问问客服是否支持你的车型即可。

2. 等待发货 & 验货

一般来说,如果你的车机本身不是 Android 的,你需要购买一个包含 Android 平板的车机。如果已经是 Android 的,则可以直接购买 CarPlay 盒子。盒子主要的作用是提供 CarPlay 芯片。

如果是车机,则要注意是否给你带了协议盒子,以及前面板。协议盒子用于兼容你的汽车的方向盘控制,而前面板则是为了替换默认车机的看板。

3. 联系安装服务

一般来说,现在的车机厂商都会有一些合作的修理厂,你可以和车机客服沟通,了解到具体的安装服务。由于是第三方,我还是推荐先用车机合作的店铺去安装,这样才能在后续遇到问题时,方便维护保修。

这里有一个吐槽点:所谓的车机厂商有可能只是临时合作,而非长期合作。因为我自己实际安装时,遇到了车机店老板也是第一次和航睿车机合作的情况(当时老板给我看了航睿的客服找他支持的微信,本质上就是航睿帮你找了个安装厂,替你支付了安装费用)。

4. 进行安装

等你联系好安装厂之后,提前预约时间,进行安装,就可以完成车机的安装了。大概需要 1 ~ 2 个小时,速度整体还是可以的。安装完成,你就可以上车验收你的新车机了。

验车时,我建议你验证的几个模块(划重点):

  1. GPS 模块:一般车机上都会带有 GPS 模块,用于高德地图的导航,所以要验证你的 GPS 模块,从而确保这个模块本身是可以正常工作的。根据实际情况,有可能你买的车机是不包含的,则看看其是否可以使用车身自带的 GPS 模块。可以通过打开高德导航,或者使用 GPS Test 软件来查看是否可以获取到卫星信号。
  2. 行车记录仪、倒车影像:这个模块也是很多人加装的原因,所以你在验车的时候,一定要注意观察这个是否可用,避免安装好了到家才发现没得用。
  3. 方向盘控制:有些车机会送一个协议盒,用于在车机和汽车之间对齐协议,从而让你安装的第三方车机可用使用自带的方向盘控制,所以你在验车的时候,也一定要验证方向盘控制模块。
  4. 音箱:毕竟买车机是为了听歌、听导航,所以一定要验证音箱是否一切正常。有些车机还提供了音频调整的模块,可以一并试试看。

安装后效果

心得

整体来说,我买了以后是比较满意的。毕竟这个车机自带了无线 CarPlay,比之前我租车时的有线 CarPlay 要好得多,我的核心目标是已经达成了。不过因为雪铁龙本身的车系的原因,方控不是很好使了,还在找卖家沟通售后。

但在这个安装、使用过一段时间后,我又开始反思,我是否真的需要 CarPlay?用 CarPlay 是一个执念,因为我希望可以在 CarPlay 一个更大的屏幕当中,来使用我的手机操作,包括使用 Pocketcasts 听播客、用高德和苹果自带的导航界面看界面。但另一方面,似乎我也只用到这些,这些一个更好用的车机(而不一定是 CarPlay)是不是也可以达成目标?

从这个角度来看,似乎我也不一定需要 CarPlay,只要是个好用的车机就行。这个好用的车机有即时的高德导航、反应灵敏,能够很好的与手机蓝牙结合,或许就可以满足我的需要了。

这些经历,让我开始慢慢放下对于 CarPlay 的执念。或许下辆车,我可以接受一个没有 CarPlay 的汽车呢(Tesla,说的就是你,自带的百度导航太挫了)。

总结

总的来说,目前的车机系统比我想象的要方便,提供的能力也很强。如果你的车机太老,又想升级,那么淘宝买个设备,装上来,绝对可以提升你的开车爽感。不过,需要注意的是,如果你要购买车机厂商的 4G 设备,一定要关注厂商的规模,太小的厂商可能后续升级乏力,或者是倒闭,都有可能让你无法继续使用 4G,影响较大。Wi-Fi 的因为不依赖厂商,所以当成一个定期升级的设备,预期不一样,也就对于厂商的依赖更小。

当然,如果可以的话,希望每个车机厂商都可以长长久久的活下去,这样我们的车机才能越来越好用。

雪铁龙 C3 XR – 自配钥匙记录

由于我买的是一台二手的雪铁龙,只有一把钥匙,但我和女朋友都能开车,为了方便分别开车,也为了方便留一把钥匙做一个备份,我决定再配置一把钥匙,以便不时之需。

汽车配钥匙原理

现在的汽车钥匙往往采用的是 300Mhz ~ 400 Mhz 的射频信号,由汽车上的信号接收器接收到相应的信号,并执行后续的操作。

而汽车配钥匙的原理也如此,将新的信号规则(暂且称之为规则,实际上有比较复杂的信号设计)写入到新的钥匙当中,即可完成钥匙的配对。

根据车企的安全配置不同,可能存在一些安全流程,比如我的雪铁龙是不能后补钥匙的,要配置,就必须把旧的钥匙刷机,重新写入新的,不支持 append 模式。

需要准备什么?

  1. 去淘宝下单,购买一把和你车型相同的钥匙,并把你的车钥匙的齿拍照给对方,方便其帮你在钥匙上开齿。
  2. 找淘宝客服,租用一个配置钥匙的设备。

具体步骤

1. 收货,轻点物资

你收到货以后,应该收到如下东西:

  1. 一把全新的已经开好齿的钥匙,可以用其打开你的车门(插入钥匙孔的方式),但无法启动车辆。
  2. 一个基于 OBD 接口的读写设备,如下所示。

2. 将设备插入到汽车的 OBD 接口当中。

将 OBD 设备连接好,并将 OBD 接口与汽车连接好。不同的车位置不同,但大多在司机侧。

3. 启动设备配对的 App

你收到货时,可以联系买家,了解相关设备的对接 App,卖家会给你 App 信息,下载安装相关的 App,并在 App 当中连接你当前的设备。

4. 进行防盗匹配

App 当中会有不同的功能,我这里选择的是【防盗匹配】,选择后下载资源包,即可进行相应的防盗匹配。这里根据不同的 App ,操作会有所不同,具体的操作以店家的指南说明为准。

总结

之前我自己以为汽车配钥匙是一件十分复杂的事情,不过自己实际配置以后,我觉得整体来说,难度还好,特别是现在的淘宝卖家都有现成的工具借给你用,对于新手来说,成本大大降低。而且自己配置的一个好处是不用担心有风险,异地的卖家,再给你留存的可能性大大降低,如果有诉求,完全可以自己试试。

瓜子二手车买车全纪实

为什么是二手车?

天津摇号的文章我提到,我其实是想买电动车(Tesla)的,但 Tesla 的车价较高,对于我来说,属于超前消费了,所以我就暂时不考虑买 Tesla 了,等后续各项条件齐备了再购买(比如在天津买完房了、也有自己的家桩了)。

而从我自己目前的现金来看,买一个二手车是最靠谱的。毕竟低端的合资车我看不上,高端的买不起(高尔夫有点小贵),买个二手车即可以降低当下资产的减少,也可以满足我用车的需求。

买了什么车?

最后我买的是一辆 2017 年的雪铁龙 C3XR 1.6L 自动先锋版。车龄 6 年,刚好在年检的年限附近,车龄虽不算短,但完全算不得长,里程 8.8万公里,里程在这个车龄里也不算多。

怎么买的?

1. 确定预算

对于我来说,当下可以买的车在 10 万以内,其中 5 万以内可以现金全款;10万以内,则需要首付 + 按揭。考虑到我的目标是低成本获得一个还可以开几年的车,所以我最终定下的预算就是 5 万元以内。

2. 看网上的分享贴,大致确定车型

我看了抖音、Youtube、小红书、知乎、懂车帝、汽车之家等一系列论坛和平台,大致知道了这个价位的车有哪些可选的(比如起亚的 K2、K3、铃木雨燕、10年左右的高尔夫)。

在看这些分享贴的时候,还需要注意你所在城市的迁入标准,比如天津是允许异地的国五标准车迁入,所以如果是国四的车,就不能买了,一些老车可能会因为环保标准达不到要求,而不得不放弃选择。

3. 了解一些核心的问题点

在看这些车的时候,其实网上有不少可以选的车,只要年限够久,总能找到便宜的好车。但年限久意味着问题多,不同的车系也有自己的问题,你需要根据自己的实际情况来选择是否认可这些核心点。

比如以我为例:

  • 这辆车我大概会开几年后续还会换车,不管是买 tesla 还是买新的油车,总归是要换车的,所以我需要确保我买的这辆车后续还能卖的出去。
  • 年限超过 10 年的车需要每年年检一次,我嫌麻烦,所以最好年限短一点,这样我可以少去年检几次。
  • 我没有太多的修车预算,所以一些年限特别久的豪车不在考虑范围内(修不起)
  • 我有日常开车出去玩的需求,也会装一些东西, SUV 会比轿车更适合我。

结合这些问题分析,已经大致知道我自己想要什么样的车型了。接下来就可以进入到具体的选车的过程了。

4. 使用 App 选车

我是使用瓜子来选车的,当然,你也可以用任何你喜欢的 App,比如懂车帝、汽车之家之类的。作为一个第一次买车的人,我需要规避重大的事故车、水泡车,而这些问题,这些二手车平台都提供了保障,更适合我。

打开 App ,选择你需要上牌的城市(涉及到需要筛选你所在城市能够迁入的环保标准)

然后根据自己的需要,圈定范围,然后等平台帮你筛选出符合你范围的车。

选完这些基础的细节以后,平台就会给你推荐一批符合你要求的车了,接下来你就可以再细筛选具体的车系、颜色之类的,来选择一个适合你自己的车,比如看看照片、看看视频啥的。瓜子还提供了预约讲车的服务,你可以预约时间让卖家给你讲一下车的情况。

在选车的时候,除了看拍好的视频和图片,我个人还会比较看平台提供的几个信息,具体包括:

  1. 是否是事故车或水泡车
  1. 是否有你需要的智能化能力?我是比较喜欢用 CarPlay 的,所以我会比较关注汽车的亮点配置(当然, Carplay 可以后装)。我建议你购买有定速巡航(开高速实用)、倒车影像和倒车雷达(日常很实用)、无钥匙启动(主要是省的插钥匙了,不过也不复杂,不需要特别纠结)、遥控钥匙(只要不是特别老的车,基本都有了)
  1. 如果你关注的车能查到保险记录,则一定要看一下保险记录,保险记录展示了这个车历史上经历过的事故,对于你判断车库可以提供一些基本的判断。

5. 下订金买车

当你选好了车之后,下一步就是支付一笔 1000 元左右的订金,来让卖家运车给你(这里的订金是可退的,如果你试车完成后,觉得不喜欢,是可以退款的)。

下订金时,会让你填写一些基本的信息。等你填写完基本的信息,平台会对汽车进行二次的复检,从而确保车况和描述一致。

支付完订金,平台会通过板车等方式,将车从车源地,送到你所在的城市,等你来提车。

6. 提车

当车辆送到你所在的城市后,平台会二次复检,并邀请你到当地的交付中心来提车。此时,你需要带上你的指标,以及银行卡,来现场支付费用,并提车体验。支付完费用后,此时先不会让你过户,而是会把车给你,让你拿走开一周。这一周里,你可以尽情的开(但别超过 450KM,会影响退车),体验和磨合,确保这辆车符合你的预期。如果期间你发现不符合预期,这个车还可以退掉,你只需要支付相关的基础费用即可,车款会原封不动的退给你。

这里我没有体验退款的流程,因为我后续体验不错,就做过户了。你在实际买车的时候,建议找客服二次确认。

在这一周里,你可以使用这个车上自带的号牌,但等一周后,就需要启动过户手续,过户到你自己的名下了。

在提车时,瓜子提供了短期的试驾险,你可以根据自己的需要购买试驾险(我的建议是购买,避免有更大的风险),试驾险在你后续通过瓜子购买了车险的时候,会退回一半的钱, 并送你道路救援之类的服务。

7. 过户 & 选号

当你一周后,觉得这个车不错,打算继续走后续的流程,你需要将车开到交付中心,和交付中心的人一起办理过户手续。

这里根据车所在的车源地会有所不同,如果是异地车源,可能需要等 3-4 个工作日,将车辆的资料从异地迁出当地迁入,然后才能过户。如果是当地车源,可能当前就可以过户了。

过完户之后,你就可以进行选号了,下载 12123 app,在其中找到「在用车选号」,选择一个你满意的车牌号即可。

选号完成,你的车过户、上牌就算整体完成了,此时车管所会给你一个临时牌照,用于你短期的开车驾驶(毕竟没牌照不能上路)。

8. 购买车险

一般来说,你买车的时候,车是会自带交强险的,但没有第三方的商业险。你可以根据自己的需要购买第三方的商业险。此外,车身自带的交强险可能时间比较短,很快就过期了,记得检查你的车险的到期时间,及时补购车险。

这里我是直接用瓜子合作的平安车险购买了商业险和交强险,主要是图个省心。

9. 结束

到这里,你整个车的购买过程就算结束了,只需要等待车管所将你的新车牌发送给你,你再自己安装上新的车牌,就算整个流程都结束了。

流程的 Overview

总结

作为一个新手买车人,瓜子给我提供的最大的价值莫过于非事故车的保障,以及试车可退的保障,这让我可以规避掉一些二手车买卖的常见问题 — 事故车、水泡车,也无需担心买到的车不合心意。

最后看一下总体我提车的成本,一共花了 43900 ,没有超出预算。

天津汽车摇号攻略

来到天津以后,考了驾照,下一步自然考虑的是买车了。不过天津作为一个直辖市,汽油车指标还是要摇号的,所以我便开始了自己的摇号之旅。今天也分享一下自己的摇号经历

为什么要摇号?

我家是河南的,女朋友家是湖北的,考虑到以后少不了开车回家的场景,所以还是需要一个汽油车指标,用于应急。此外,天津的好处是汽油车指标可以用来买电动车和汽油车。但新能源指标不能反过来购买,所以摇号还是必要的。

此外,我自己整体来说是比较喜欢新能源汽车的(具体指 Tesla),但说实话,车价太贵,且天津所处的北方冬天气温是在 0 度以下的,对于电车来说不太友好(容易打骨折),所以暂时先不买电车,等等电池的容量进一步提升了再购买。

什么样的人可以参与天津摇号?

需要你是居住在天津的人(有天津户籍/居住证)、名下无车、个人有驾驶证。我因为前几年已经办理了天津的户口,所以可以直接参与天津摇号。

在哪参与摇号?

天津市小客车调控管理信息系统

摇号摇了多久?

我一共摇了 13 次,一年出头,还行。坚持每 3 个月去更新一下状态,始终参与摇号就行。

相关政策

可以参考天津市人民政府关于印发天津市小客车总量调控管理办法的通知

具体的步骤

1. 访问天津市小客车调控管理信息系统,注册并登录

想要参与摇号,你首先需要注册一个天津市小客车调控管理系统的账号,用来后续持续登录。这个账号也和天津市的其他一些政务系统的账号打通,所以注册的时候要记得账号密码,以便于后续使用

2. 填写申请表

当你登录完成后,会让你填写申请表,根据你的个人信息填写申请表即可。

3. 等待资质审核

当你填写完成后,需要等待资质审核,一般来说是每个月 8 号 ~ 23 号审核完成,26 号摇号,你填写完成后, 记得去看自己的资质是否审核通过。如果审核通过,接下来就是等着摇号了。

4. 定期更新状态

由于每次你的申请表只在 3 个月内有效,所以你在资质通过申请之后,可以每个月上去看一次,或者每两个月上去看一次,并更新一下自己的指标,确保自己的指标信息始终是可用的,从而避免忘记了,导致指标失效了,实际上并没有参与摇号。

5. 等待摇号成功

在一段漫长的等待和摇号成功后,你会看到如下这样的界面,提示你已经中签。(同期还会有短信提醒,所以不用担心会遗漏)。

在下方的【我的指标】里,就是你摇号摇到的指标,后续买车的时候打印出来,带到买车的地方就行。

text

为 Next.js 加上 Git Commit 版本号

在开发服务端应用的时候,由于服务端应用本身的特性,其实是没有一个明确的版本的概念。毕竟不需要专门下载,理论上每次都是最新的,所以也没有版本的概念。

但在实际开发调试过程中,我们又的确需要关注版本的概念,因为会影响具体的表现形态,所以就需要有一个前后端协调的版本号概念,来帮助我们更好的定位问题,避免前后端之间的扯皮。

一个比较好的思路是,虽然服务端没有版本号概念,但大部分时候会有一个对应的 Commit ID(毕竟现在开发项目完全不用版本控制工具的还是挺少见的)。所以,你可以选择将 Commit ID 作为版本号,进行输出,从而让协作者知道当前线上跑的版本,便于 debug。

在具体实现时,有两种方式:

1. 将 Commit ID 放在 Header 里

我自己平时会把 Vercel 和 Next.js 提供的 API Route 作为一个简单的 Serverless FaaS 环境来使用,因此一个诉求便是在 API Route 当中返回具体的 Commit ID。而为了避免对代码的侵入,将其放在 Response Header 当中是比较合适的。

添加完成的效果。

而如果你希望和我一样,达成对特定路由下的返回结果添加特定的 Header(比如上面截图中 x-build-sha 就是我添加的 Commit ID 的 Header),则需要借助于 Next.js 提供的自定义 Header 能力

通过在 next.config.js 当中的 header 属性中添加具体的配置,来实现对特定的路径下添加自定义 Header。

module.exports = {
  async headers() {
    return [
      {
        source: '/about',
        headers: [
          {
            key: 'x-custom-header',
            value: 'my custom header value',
          },
          {
            key: 'x-another-custom-header',
            value: 'my other custom header value',
          },
        ],
      },
    ];
  },
};

这里面比较关键的是 source 字段,这个字段定义了究竟哪些路由下会返回特定的 Header。比如上面的这段配置就是只给 /about 添加具体的 Header。你可以使用 /:path* 来匹配所有路由,从而实现给所有路由都添加上具体的 Header。

以我为例,我在线上跑的配置实际上是下面这段配置:

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  async headers() {
    return [
      {
        source: '/:path*',
        headers: [{ key: 'X-Build-SHA', value: process.env.VERCEL_GIT_COMMIT_SHA }]
      }
    ];
  }
}

module.exports = nextConfig

在上面这段配置中,我给所有的路径都配置了一个 x-build-sha 的 header ,并从进程的变量中提取出 VERCEL_GIT_COMMIT_SHA 变量(这个变量在 Vercel 的部署环境中指向具体的 Commit ID)的值,将其返回。

2. 将 Commit ID 放在 UI 里

除了在 Header 中返回,如果你是需要去 Debug UI 的话,版本号同样重要,这个时候,你可以选择将 Commit ID 放在界面上,从而实现快速找到 Commit ID。

在 Vercel 部署的 Next.js 上,有一批 Next.js 框架所属的环境变量, 可以直接在 UI 当中引用(上面的 VERCEL_GIT_COMMIT_SHA 是不能在 UI 中直接引用的)。

只需要在特定的位置,加入SHA: {process.env.NEXT_PUBLIC_VERCEL_GIT_COMMIT_SHA} ,就可以展示具体的 Commit ID。

(除了 Next.js,其他框架也有类似的框架变量可以使用,你可以根据自己的需求来选择)。

总结

在服务端 Debug 时,将你的 Commit ID 以某种方式返回可以有效的帮助快速定位问题,试着给你的 Next.js 添加上这个 Commit ID,来加速你的问题排查吧~