vscode 通過 ssh 遠程開發(fā)解決 node.js 版本問題

vscode 通過官方提供的 Remote-ssh 插件,讓我們可以直接通過 ssh 的連接方式悲幅,打開服務(wù)器上的代碼庫邮偎,遠程進行開發(fā)湿颅。

我相信,“高端” vscode 玩家一定嘗試過該玩法,簡直好處多多症概。

但是用久了,難免會碰到一些問題早芭。

問題

比如彼城,最近我老是會碰到因為 node.js 版本,導(dǎo)致退个,項目沒法直接通過資源管理器中的 NPM SCRIPTS 運行起來的問題募壕。

什么?语盈!有前端童鞋說自己沒碰到過舱馅?那么該反思下自己,是不是不喜歡用最新版本的 node.js 去構(gòu)建項目了刀荒。

還是說回咱的問題吧代嗤。

之前有個項目,由于比較老了,只能用 14.xx 版本的 node.js 才能正常運行胧卤,用更高的版本的 node.js 運行勿侯,會有一堆依賴報錯的問題,導(dǎo)致項目沒法正常的跑起來溶锭。

但是,如果升級依賴吧符隙,代價又太大趴捅。畢竟這種吃力不討好的事情,職場老鳥都會避而遠之霹疫,除非老板同意你這么做拱绑,否則沒做好的話,鍋可少不了丽蝎。

用 vscode 遠程連上服務(wù)器的項目后猎拨,選擇 NPM SCRIPTS 列表中的 npm 腳本膀藐,沒法正常執(zhí)行,因為此時用的 node.js 版本不對红省。

但是额各,如果通過 vscode 的終端進去,如果版本剛好合適吧恃,你會發(fā)現(xiàn)可以直接調(diào)用類似 npm start 這種命令虾啦,直接正常運行項目。

如果不對痕寓,也不打緊傲醉,可以用 nvm 切換 node.js 版本,接下來你會發(fā)現(xiàn)系統(tǒng)中默認的 node.js 版本調(diào)整好了呻率,通過類似 npm start 這種命令硬毕,項目就可以正常運行了。

但是礼仗,直接通過 NPM SCRIPTS 命令還是無法運行昭殉,個人推測大概是因為這里還是用的老版本的 node.js。

機緣巧合

雖然這個問題不影響開發(fā)藐守,通過命令行去跑項目運行挪丢,也不太影響使用體驗,但是總感覺有點不爽快卢厂。

畢竟發(fā)現(xiàn)問題乾蓬,卻沒法解決,只能通過別的方式來規(guī)避慎恒,作為一枚富有探索精神的程序員來說任内,多少心有不甘。

后來也試圖找過一些解決方案融柬,換了好多關(guān)鍵詞去 google死嗦,甚至 ChatGPT 都想方設(shè)法地問了好多次,官方 issue 也翻爛了粒氧,還是沒找到合適的解決方案越除。

后來有一次,機緣巧合下外盯,主機升級摘盆,重啟了。

再連上去饱苟,發(fā)現(xiàn)用 NPM SCRIPTS 孩擂,直接就可以正常運行了,遂恍然大悟箱熬。

原來类垦,是因為 vscode-server 每次啟動運行的時候狈邑,會自動獲取當前環(huán)境中的 node.js 版本,并用這個版本的 node.js 來運行服務(wù)蚤认,服務(wù)沒重啟當然不能更換其使用的 node.js 版本了米苹。

驗證推測

為了驗證自己的推測,連到服務(wù)器上探究了一番烙懦,果不其然,跟我的猜想一致赤炒。

原來當你通過 Remote-SSH 插件連上遠程的機器的時候氯析,該插件會在遠程的機器的用戶文件夾下,創(chuàng)建一個隱藏的目錄 .vscode-server莺褒,然后順手在該目錄中安裝下 vscode-server 軟件掩缓,然后啟動一個 vscode-server 服務(wù)。本地的 vscode 其實就是不斷地和機器上的 vscode-server 在通信遵岩,從而支持通過本地的 vscode 進行遠程開發(fā)你辣。

# 查看運行的進程
ps -ef |grep .vscode-server
root      1253     1  0 15:00 ?        00:00:00 sh /root/.vscode-server/bin/1a5daa3a0231a0fbba4f14db7ec463cf99d7768e/bin/code-server --start-server --host=127.0.0.1 --accept-server-license-terms --enable-remote-auto-shutdown --port=0 --telemetry-level all --connection-token-file /root/.vscode-server/.1a5daa3a0231a0fbba4f14db7ec463cf99d7768e.token
root      1265  1253  0 15:00 ?        00:00:18 /root/.vscode-server/bin/1a5daa3a0231a0fbba4f14db7ec463cf99d7768e/node /root/.vscode-server/bin/1a5daa3a0231a0fbba4f14db7ec463cf99d7768e/out/server-main.js --start-server --host=127.0.0.1 --accept-server-license-terms --enable-remote-auto-shutdown --port=0 --telemetry-level all --connection-token-file /root/.vscode-server/.1a5daa3a0231a0fbba4f14db7ec463cf99d7768e.token
root      1368  1265  0 15:00 ?        00:00:03 /root/.vscode-server/bin/1a5daa3a0231a0fbba4f14db7ec463cf99d7768e/node /root/.vscode-server/bin/1a5daa3a0231a0fbba4f14db7ec463cf99d7768e/out/bootstrap-fork --type=ptyHost --logsPath /root/.vscode-server/data/logs/20231204T150019
root      7379  1368  0 15:49 pts/4    00:00:00 /bin/bash --init-file /root/.vscode-server/bin/1a5daa3a0231a0fbba4f14db7ec463cf99d7768e/out/vs/workbench/contrib/terminal/browser/media/shellIntegration-bash.sh
root      8272  1265  0 15:53 ?        00:00:06 /root/.vscode-server/bin/1a5daa3a0231a0fbba4f14db7ec463cf99d7768e/node --dns-result-order=ipv4first /root/.vscode-server/bin/1a5daa3a0231a0fbba4f14db7ec463cf99d7768e/out/bootstrap-fork --type=extensionHost --transformURIs --useHostProxy=false
root      8283  1265  0 15:53 ?        00:00:00 /root/.vscode-server/bin/1a5daa3a0231a0fbba4f14db7ec463cf99d7768e/node /root/.vscode-server/bin/1a5daa3a0231a0fbba4f14db7ec463cf99d7768e/out/bootstrap-fork --type=fileWatcher
root      8356  8272  0 15:53 ?        00:00:00 /root/.vscode-server/bin/1a5daa3a0231a0fbba4f14db7ec463cf99d7768e/node /root/.vscode-server/bin/1a5daa3a0231a0fbba4f14db7ec463cf99d7768e/extensions/json-language-features/server/dist/node/jsonServerMain --node-ipc --clientProcessId=8272
root      8601  8374  0 15:53 ?        00:00:00 /root/.vscode-server/code-1a5daa3a0231a0fbba4f14db7ec463cf99d7768e command-shell --cli-data-dir /root/.vscode-server/cli --parent-process-id 8374 --on-port --require-token 420f17f0d59a
root      8753  8272  0 16:15 ?        00:00:01 /root/.vscode-server/bin/1a5daa3a0231a0fbba4f14db7ec463cf99d7768e/node --max-old-space-size=3072 /root/.vscode-server/bin/1a5daa3a0231a0fbba4f14db7ec463cf99d7768e/extensions/node_modules/typescript/lib/tsserver.js --serverMode partialSemantic --useInferredProjectPerProjectRoot --disableAutomaticTypingAcquisition --cancellationPipeName /tmp/vscode-typescript0/a6e9883aad51f1da31b8/tscancellation-5a954acdf4ef24e6466c.tmp* --locale zh-cn --noGetErrOnBackgroundUpdate --validateDefaultNpmLocation --useNodeIpc
root      8754  8272  1 16:15 ?        00:00:04 /root/.vscode-server/bin/1a5daa3a0231a0fbba4f14db7ec463cf99d7768e/node --max-old-space-size=3072 /root/.vscode-server/bin/1a5daa3a0231a0fbba4f14db7ec463cf99d7768e/extensions/node_modules/typescript/lib/tsserver.js --useInferredProjectPerProjectRoot --enableTelemetry --cancellationPipeName /tmp/vscode-typescript0/a6e9883aad51f1da31b8/tscancellation-2340bc35bd699f3648c0.tmp* --locale zh-cn --noGetErrOnBackgroundUpdate --validateDefaultNpmLocation --useNodeIpc
root      8770  8754  0 16:15 ?        00:00:00 /root/.vscode-server/bin/1a5daa3a0231a0fbba4f14db7ec463cf99d7768e/node /root/.vscode-server/bin/1a5daa3a0231a0fbba4f14db7ec463cf99d7768e/extensions/node_modules/typescript/lib/typingsInstaller.js --globalTypingsCacheLocation /root/.cache/typescript/5.2 --enableTelemetry --typesMapLocation /root/.vscode-server/bin/1a5daa3a0231a0fbba4f14db7ec463cf99d7768e/extensions/node_modules/typescript/lib/typesMap.json --validateDefaultNpmLocation
root      8797   543  0 16:19 pts/0    00:00:00 grep --color=auto .vscode-server

所以,了解了原理以后尘执,再想解決我們碰到的問題舍哄,就很簡單了。

我們把服務(wù)器上的 vscode-server 服務(wù)關(guān)掉誊锭,重開一下就好了表悬。

不要用 vscode 指令

當然,這里其實還有個坑丧靡。

在 vscode 界面蟆沫,按住 ctrl+p,然后在出現(xiàn)的輸入框里鍵入 > remote-ssh 會自動列出一些可以使用的 remote-ssh 命令温治。

里面會有 在主機上終止 VS Code 服務(wù)器饭庞、在主機上卸載 VS Code 服務(wù)器 等指令。

但是你用了就會發(fā)現(xiàn)一個坑熬荆,這些命令都有用舟山,但是他在終止、卸載完卤恳,就會立馬重新裝一個新的 VS Code 服務(wù)器捏顺,根本不給你調(diào)整環(huán)境中 node.js 版本的時間。

所以我們成功的執(zhí)行我們的操作纬黎,我們得想別的方案來實現(xiàn)幅骄。

在主機上手動卸載 vscode-server

我們連接上主機,通過下面的方式本今,即可成功卸載掉 vscode-server

# 列出所有依賴 .vscode-server 路徑的進程
ps -ef |grep .vscode-server

# 殺掉所有依賴于 .vscode-server 路徑的進程
ps uxa | grep .vscode-server | awk '{print $2}' | xargs kill -9

# 刪除掉 .vscode-server 文件夾
rm -rf ~/.vscode-server/

當然卸載掉以后拆座,先別急著重新用我們的 vscode 編輯器連接服務(wù)器上的項目主巍。

先用 nvm 切換下系統(tǒng)中默認的 node.js 版本。

# 默認指向?qū)?yīng)的想用的 node.js 版本
nvm alias default nodeVersin

為了驗證我們設(shè)置 node.js 版本的操作是否成功挪凑,可以試著斷開遠程的連接孕索,重新登錄下。

如果發(fā)現(xiàn)沒問題躏碳,即可重新在本地用 vscode 連接服務(wù)器上的項目搞旭。

當然,這地方還有個需要注意的點是菇绵,不能傻傻的使用 nvm use nodeVersion 就以為將 node.js 默認的版本切換成功了肄渗。

這個操作只針對當前 bash,退出去重新進來咬最,就會發(fā)現(xiàn)翎嫡,系統(tǒng)中默認的 node.js 版本又是之前的版本了。

反思

現(xiàn)在永乌,讓我們回過頭來看惑申,會發(fā)現(xiàn),其實解決問題的思路并不復(fù)雜翅雏。關(guān)鍵是圈驼,我們要了解清楚引起問題的原因是什么。

知其然更要知其所以然望几,才能在碰到問題的時候碗脊,抽絲剝繭,迅速的定位到問題所在橄妆。

參考鏈接

下面是一些參考資料衙伶,有興趣進一步研究的童鞋可以作為參考

  1. visual studio code - How to kill VSCode remote services on Ubuntu Host - Stack Overflow
  2. arch linux - changing nodejs version through nvm is not persistent - Super User
  3. GitHub - nvm-sh/nvm: Node Version Manager - POSIX-compliant bash script to manage multiple active node.js versions
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市害碾,隨后出現(xiàn)的幾起案子矢劲,更是在濱河造成了極大的恐慌,老刑警劉巖慌随,帶你破解...
    沈念sama閱讀 206,968評論 6 482
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件芬沉,死亡現(xiàn)場離奇詭異,居然都是意外死亡阁猜,警方通過查閱死者的電腦和手機丸逸,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,601評論 2 382
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來剃袍,“玉大人黄刚,你說我怎么就攤上這事∶裥В” “怎么了憔维?”我有些...
    開封第一講書人閱讀 153,220評論 0 344
  • 文/不壞的土叔 我叫張陵涛救,是天一觀的道長。 經(jīng)常有香客問我业扒,道長检吆,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 55,416評論 1 279
  • 正文 為了忘掉前任程储,我火速辦了婚禮蹭沛,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘章鲤。我一直安慰自己摊灭,他們只是感情好,可當我...
    茶點故事閱讀 64,425評論 5 374
  • 文/花漫 我一把揭開白布咏窿。 她就那樣靜靜地躺著斟或,像睡著了一般素征。 火紅的嫁衣襯著肌膚如雪集嵌。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,144評論 1 285
  • 那天御毅,我揣著相機與錄音根欧,去河邊找鬼。 笑死端蛆,一個胖子當著我的面吹牛凤粗,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播今豆,決...
    沈念sama閱讀 38,432評論 3 401
  • 文/蒼蘭香墨 我猛地睜開眼嫌拣,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了呆躲?” 一聲冷哼從身側(cè)響起异逐,我...
    開封第一講書人閱讀 37,088評論 0 261
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎插掂,沒想到半個月后灰瞻,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 43,586評論 1 300
  • 正文 獨居荒郊野嶺守林人離奇死亡辅甥,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,028評論 2 325
  • 正文 我和宋清朗相戀三年酝润,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片璃弄。...
    茶點故事閱讀 38,137評論 1 334
  • 序言:一個原本活蹦亂跳的男人離奇死亡要销,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出夏块,到底是詐尸還是另有隱情蕉陋,我是刑警寧澤捐凭,帶...
    沈念sama閱讀 33,783評論 4 324
  • 正文 年R本政府宣布,位于F島的核電站凳鬓,受9級特大地震影響茁肠,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜缩举,卻給世界環(huán)境...
    茶點故事閱讀 39,343評論 3 307
  • 文/蒙蒙 一垦梆、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧仅孩,春花似錦托猩、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,333評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至溅蛉,卻和暖如春公浪,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背船侧。 一陣腳步聲響...
    開封第一講書人閱讀 31,559評論 1 262
  • 我被黑心中介騙來泰國打工欠气, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人镜撩。 一個月前我還...
    沈念sama閱讀 45,595評論 2 355
  • 正文 我出身青樓预柒,卻偏偏與公主長得像,于是被迫代替她去往敵國和親袁梗。 傳聞我的和親對象是個殘疾皇子宜鸯,可洞房花燭夜當晚...
    茶點故事閱讀 42,901評論 2 345

推薦閱讀更多精彩內(nèi)容