如果你是學生，你還在你的 windows 電腦上為各種環(huán)境配置頭疼的時候，你應該了解一下 Remote Development。

如果你喜歡 linux 的開發(fā)環(huán)境和舒適的 shell，但卻不舍得拋棄 windows/macos 圖形界面給你帶來的用戶體驗和一些軟件的兼容(QQ, 微信), 那么 Remote Development 是你最好的選擇。

如果你還在糾結(jié)更換電腦需要重新配置本地環(huán)境，裝 python，裝 jre，裝 node... Remote Development 將一舉解決此問題，將開發(fā)環(huán)境和本地解耦。

如果你的開發(fā)需要更好的網(wǎng)絡，更強的性能，想著提升本地機器性能的同時，你也要思考下，是否可以利用服務器的網(wǎng)絡和性能，來進行 Remote Development。

這篇文章，小岱將帶你從零開始，購買云服務器，配置 ssh，安裝相關 VSCode 插件，實現(xiàn)遠程開發(fā)。

購買/配置自己的云服務器

由于本文主要面向?qū)W生群體, 將假設讀者具有學生身份,或者不滿二十五歲。

我們進入購買云服務器的鏈接：

https://cloud.tencent.com/act/campus

看到頁面中的服務器，一個月十塊，可以說是相當便宜了，點擊購買，然后選擇系統(tǒng)鏡像，CentOS 和 Ubuntu 選一個，小岱比較喜歡 Ubuntu，選擇 Ubuntu 即可，最后的配置如下：

隨后進入控制臺，查看你的服務器：

頁面右上角，進入控制臺點擊云服務器查看我們的云服務器實例

然后對服務器進行密碼重設，設置成我們自己的密碼：

完成密碼重設后，服務器會重啟，但是速度很快，大概幾秒鐘就重啟完畢，然后點擊登錄：

點擊立即登錄（我們的默認用戶名就是 ubuntu，我們暫且就用默認的，不改了）：

輸入我們剛才設置的密碼，然后進入服務器終端：

歡迎你，進入了你的服務器~

配置 VS Code

VSCode 的配置很簡單，只需要打開 VSCode，在插件市場中搜索 remote development：

然后安裝即可，注意這是一個?Extension Pack，是幾個擴展打包在一起的，它包含了 Remote-WSL，Remote-SSH，Remote-Container，我們使用的其實是 Remote-SSH 插件。

安裝 SSH Client：

先在本地安裝 SSH Client，只需打開（注意，就是本地，不是在服務器） powershell（管理員身份運行），一個命令解決：

# 輸入命令 Get-WindowsCapability -Online | ? Name -like 'OpenSSH*'# 你應該會看到這個結(jié)果：Name : OpenSSH.Client~~~~0.0.1.0 State : NotPresent Name : OpenSSH.Server~~~~0.0.1.0 State : NotPresent

然后再來一個命令，正式安裝：

# 安裝 Client Add-WindowsCapability -Online -Name OpenSSH.Client~~~~0.0.1.0# 返回如下結(jié)果，說明安裝成功：Path : Online : True RestartNeeded : False

配置 SSH key：

打開 command prompt，輸入命令?cd %USERPROFILE%/.ssh:

然后看一下這個文件夾里的東西：

你的文件夾很可能是空的，沒關系，因為我已經(jīng)配置過了 ?。

配置方法：輸入命令?ssh-keygen -t rsa -b 4096

輸入?id_rsa?,然后會提示你設置密碼, 和剛才服務器的密碼設置成相同的就行, 不然容易忘。

隨后，你的文件夾里應該就有前面的?id_rsa?和id_rsa.pub?這兩個文件了，但是還缺一個 known_hosts。

然后繼續(xù)輸入如下命令：

SET REMOTEHOST=your-user-name-on-host@host-fqdn-or-ip-goes-herescp %USERPROFILE%\.ssh\id_rsa.pub %REMOTEHOST%:~/tmp.pub ssh %REMOTEHOST% "mkdir -p ~/.ssh && chmod 700 ~/.ssh && cat ~/tmp.pub >> ~/.ssh/authorized_keys && chmod 600 ~/.ssh/authorized_keys && rm -f ~/tmp.pub"

第一個命令是設置環(huán)境變量，事實上在 cmd 中，設置環(huán)境變量只是一個命令的事。

REMOTEHOST 后面的和剛才的一樣,也是?用戶名 @ 主機IP?。后面兩個命令是把你本地生成的 pub 文件拷貝到你的遠程服務器去。

配置完畢~~~~

開始享受遠程開發(fā)

打開你的 VSCode，按?ctrl + shift + p, 彈出命令搜索框，搜索 remote：

選擇該命令，和我們的遠程服務器建立連接：

在彈出的搜索框里輸入我們的 用戶名@ 主機ip，然后就會發(fā)現(xiàn) VSCode 打開了一個新窗口：

這個窗口會提示你輸密碼：

只需輸入我們剛才配置 ssh key 的時候輸入的密碼即可。

點擊open folder，就會看到我們服務器的文件，然后我們進入其中的文件夾?Zhihu-Proxy-Web-app, 這是我用 nodejs 寫的一個Web demo。

按?ctrl +`?彈出終端, 迅速通過 apt-get 工具安裝開發(fā)環(huán)境,然后運行我們的 demo web 服務:

可以看到用戶名和主機名都是我們的遠程服務器, npm install 的速度也是非常的快, 畢竟服務器的網(wǎng)絡是我們終端 PC 不能比的。

應用在 3000 端口運行，我們試著在本地瀏覽器里訪問一下：

http://106.54.60.173:3000/

一切正常！（這個 demo 的數(shù)據(jù)是通過和知乎后端 api 交互獲取的，不是簡單的靜態(tài)頁面）。

下面簡單總結(jié)一下遠程開發(fā)的好處:

開發(fā)環(huán)境與本地解耦，更換電腦不影響開發(fā)。

服務器的網(wǎng)絡的速度和穩(wěn)定性往往優(yōu)于你的 PC，npm install，git clone 等命令會節(jié)省你非常多的時間。

對外服務的應用可以直接通過公網(wǎng)快速訪問，方便分享和協(xié)作。

本地的計算壓力，內(nèi)存壓力小，即便是配置較低的電腦，也能勝任。

保留了 VSCode 桌面端的完美體驗的同時，還可以享受 linux 環(huán)境帶來的便捷開發(fā)環(huán)境體驗。

保證開發(fā)環(huán)境和部署環(huán)境相同，開發(fā)和部署無縫銜接。

方便協(xié)作，一個團隊可以共享一個服務器，共同對一個服務器進行開發(fā)/測試。

如果你還是學生，當你在學習操作系統(tǒng)等課程的時候，這個工具，簡直就是降維打擊，可以節(jié)省你無限的時間。

總結(jié)

以上是生活随笔為你收集整理的远程开发初探 - VS Code Remote Development的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。