VSCODE SSH 遠端連線 懶人包

閱讀時間約 6 分鐘

該怎麼遠端使用VSCODE(Visual Studio)?

身為一個懶人,能在家裡就在家裡,能不去實驗室就不去實驗室,但自己的電腦不夠好怎麼辦?

當然最簡單的方式就是使用jupyter notebook,之後會再水一篇。

我們會使用SSH進行連線。

在每個步驟我可能會補充一點,你"可能"遇到的問題。

接下來我會用連松鼠都能懂的方式一步一步教你。

而且Linux (Ubuntu), Windows都能使用此方法操作。

SSH是甚麼?

電腦A : 你要連線的Server

電腦B:你的筆電or桌電

你可以把SSH想像成一個防盜門,這個防盜門要有鑰匙才能把這扇門打開。

SSH的做法是,你要把你的鑰匙拿給防盜門註冊,註冊之後,這扇防盜門在你來的時候就會自動幫你用你的鑰匙開鎖。

所以你的電腦A(Server)內部要有你電腦B的鑰匙資訊,這樣他才能開門。

那我們要怎麼做呢?

Step 1 下載、安裝VSCODE

建議下載網址:https://code.visualstudio.com/download

Step 2 打開VSCODE 點擊Extension部分(紅色框框)

點擊Extesion(擴充功能)

點擊Extesion(擴充功能)

Step 3 搜尋"SS​H" 並且點擊下載

安裝SSH功能

安裝SSH功能

Step 4 設定"SSH Extension",並搜尋"Show login"將其打開

用意:讓你知道你的VSCODE到底有沒有在連線。

打開SSH擴充設定

打開SSH擴充設定

"Show login"

"Show login"

Step 5 獲得鑰匙(Pubkey)

記得剛剛的SSH解釋嗎?

你的筆電(電腦B)要進入Server裡面(電腦A),所以我們要先

不論你是用哪個作業系統,都請你在VSCODE的原生Terminal中輸入

ssh-keygen -t rsa -b 4096

Windows 系統:

這個時候你會在Windows的下面資料夾看到他生成出來的SSH Key

Windows SSH Key 位置

Windows SSH Key 位置


Linux (Ubuntu) 系統:

  1. 進到你的主目錄,進入.ssh
cd ~ 
cd .ssh
ls

你的SSH Key應該就會生成在這個位置(~/.ssh)。

id_rsa.pub就是你的鑰匙

Step 6 將鑰匙放入主機

接下來就是要把你筆電(電腦B)的鑰匙放入Server(電腦A) 放到~/.ssh/authorized_keys

我們這邊以比較複雜的Ubuntu當主機

此時輸入下列指令

創建.ssh目錄(沒有的話) -- 請記得一定要創在"~"下面也就是你的home下面,這對後面的連線會有影響。
mkdir ~/.ssh 													# 創建.ssh目錄(沒有的話)
chmod 700 ~/.ssh # 給予該目錄權限
touch ~/.ssh/authorized_keys # 創建authorized_keys檔案(放你的PubKey的)
chmod 600 ~/.ssh/authorized_keys # 給予該檔案權限

Step 7 將id_rsa.pub內容複製到authorized_keys裡面

將你的筆電(電腦B)中的id_rsa.pub打開,複製裡面那一長串的亂碼。

把她貼到你的Server(電腦A)的authorized_keys檔案裡面

Step 8 設定VSCODE連線(你的筆電(電腦B))

按下Ctrl+Shift+P,打開VSCODE命令列。

選擇Remote-SSH: Open SSH Configuration File

Remote-SSH: Open SSH Configuration File

Remote-SSH: Open SSH Configuration File

Step 9 編輯user/.ssh目錄下的config檔案

編輯ssh config檔案

編輯ssh config檔案

當你打開config檔案時,應該會長的類似下面這段程式碼

Host <你想要顯示在你電腦上的名稱>
HostName <你連線Server(電腦A)IP地址>
User ​<你Server的電腦名稱>
port <你想指定的port號(可能沒有)>

雷點

到這一步的時候一定很多人霧煞煞。

我都用了阿,怎麼要密碼?我又沒有設密碼?幹嘛跟我要密碼?

VSCODE SSH預設密碼是甚麼?

答案:你的Config裡面輸入錯誤了

User ​<你Server的電腦名稱>

有87趴可能是這一行出錯了!

你電腦的名稱到底是甚麼?

還記得我前面說.ssh目錄要設在哪裡嗎? 設在"~"的下面

你的~是甚麼,那他就要填甚麼。

小技巧:在你的"~"目錄下打出ls -all就能知道了

cd ~
ls -all
紅色區塊就是你的電腦名稱

紅色區塊就是你的電腦名稱

紅色區塊就是你的電腦名稱,但不是填root。

總結

稍微複習一下SSH怎麼用。

你要連線的電腦(Server)裡面要有一個檔案叫做authorized_keys。

authorized_keys裡面會儲存著你的筆電或桌電的Pub_Key。

所以就是要將本地端的電腦產生一個Pub_key丟給Server上的authorized_keys檔案。沒有這個檔案名就自己建一個,也是可以用的。

然後記得你的.ssh要建立在你的"~"目錄底下才會好用。

你的User就是你的"~"名稱相對於Windows就是你的user名字。

只要以上都用好,應該都可以連線。

第一次寫Blog,也沒有用過,如果有任何問題,或者我可以改進的地方,還請多多指教。








0會員
2內容數
留言0
查看全部
發表第一個留言支持創作者!
你可能也想看
Google News 追蹤
Thumbnail
本專欄將提供給您最新的市場資訊、產業研究、交易心法、精選公司介紹,以上內容並非個股分析,還請各位依據自身狀況作出交易決策。歡迎訂閱支持我,獲得相關內容,也祝您的投資之路順遂! 每年 $990 訂閱方案👉 https://reurl.cc/VNYVxZ 每月 $99 訂閱方案👉https://re
Thumbnail
首先確定VS Code的版本,如果你的版本跟我一樣是1.92.0那麼你可以參考我的作法...
Thumbnail
打開 jupyter notebook 寫一段 python 程式,可以完成五花八門的工作,這是玩程式最簡便的方式,其中可以獲得很多快樂,在現今這種資訊發達的時代,幾乎沒有門檻,只要願意,人人可享用。 下一步,希望程式可以隨時待命聽我吩咐,不想每次都要開電腦,啟動開發環境,只為完成一個重複性高
Thumbnail
本章節旨在介紹如何在不同操作系統上安裝和配置PHP環境,並使用命令行工具進行基礎操作。此外,還介紹了使用Visual Studio Code進行PHP開發的步驟,包括安裝擴展和設置調試環境。
Thumbnail
你好,在下最近在學習開發web,學了html css js,也得出一些心得,由於網路上已有許多教學,所以我會著重在如何開發出to do List,以及解釋我寫的程式碼。相關的教學我會直接貼網址。如果我有什麼地方出錯,或者是可以寫得更好,歡迎在下方留言,討論。 首先先介紹我的開發環境: 我用了vs
首先要安裝vscode : Visual Studio Code - Code Editing. Redefined 安裝後我們就可以把她打開來,接著去檔案 -> 喜好設定 -> 設定檔(預設) -> 你就會看到設定裡面的 settings.json,就可以開始你的設定拉(主要是依照個人的喜好設定
Thumbnail
理解一個全新的操作環境有時候可能是一個挑戰,尤其對於那些剛開始接觸VS Code的開發者來說,即便具備一定的英文閱讀能力,可能也會對這個陌生的操作環境感到徬徨和不安。不過,沒有必要擔心,我們接下來就來一起用短短的一分鐘時間,將VS Code轉換成最熟悉的中文環境吧! 安裝繁體中文語言包 由於VS
Thumbnail
因為最近想嘗試編碼風格,於是就選了一套比較"不嚴格"的輔助工具來摸索。 編輯器 VS CODE 框架 VUE3 打包工具 VITE 編碼風格 Standard 環境 version { "nodejs":"v18.18.0", "npm":"9.8.1" }
Thumbnail
※ 必考題一: Command Line 工程師面試時通常不會著墨太多在此科目上,考題只考涵蓋的基本指令。 ※ 說明:Command Line是使用純文字與電腦溝通的方式,和圖形化介面 GUI是不一樣的。 ※ 常用基本指令: pwd=print the current directory:顯
Thumbnail
IDE 升級後出現了一樣的錯誤,手上程式碼沒有 pylint black-format 檢查上不了 gitlab,我又點開了那個很小很小的 x 符號,裡面 logs 提示的解決方式是升級..
Thumbnail
本專欄將提供給您最新的市場資訊、產業研究、交易心法、精選公司介紹,以上內容並非個股分析,還請各位依據自身狀況作出交易決策。歡迎訂閱支持我,獲得相關內容,也祝您的投資之路順遂! 每年 $990 訂閱方案👉 https://reurl.cc/VNYVxZ 每月 $99 訂閱方案👉https://re
Thumbnail
首先確定VS Code的版本,如果你的版本跟我一樣是1.92.0那麼你可以參考我的作法...
Thumbnail
打開 jupyter notebook 寫一段 python 程式,可以完成五花八門的工作,這是玩程式最簡便的方式,其中可以獲得很多快樂,在現今這種資訊發達的時代,幾乎沒有門檻,只要願意,人人可享用。 下一步,希望程式可以隨時待命聽我吩咐,不想每次都要開電腦,啟動開發環境,只為完成一個重複性高
Thumbnail
本章節旨在介紹如何在不同操作系統上安裝和配置PHP環境,並使用命令行工具進行基礎操作。此外,還介紹了使用Visual Studio Code進行PHP開發的步驟,包括安裝擴展和設置調試環境。
Thumbnail
你好,在下最近在學習開發web,學了html css js,也得出一些心得,由於網路上已有許多教學,所以我會著重在如何開發出to do List,以及解釋我寫的程式碼。相關的教學我會直接貼網址。如果我有什麼地方出錯,或者是可以寫得更好,歡迎在下方留言,討論。 首先先介紹我的開發環境: 我用了vs
首先要安裝vscode : Visual Studio Code - Code Editing. Redefined 安裝後我們就可以把她打開來,接著去檔案 -> 喜好設定 -> 設定檔(預設) -> 你就會看到設定裡面的 settings.json,就可以開始你的設定拉(主要是依照個人的喜好設定
Thumbnail
理解一個全新的操作環境有時候可能是一個挑戰,尤其對於那些剛開始接觸VS Code的開發者來說,即便具備一定的英文閱讀能力,可能也會對這個陌生的操作環境感到徬徨和不安。不過,沒有必要擔心,我們接下來就來一起用短短的一分鐘時間,將VS Code轉換成最熟悉的中文環境吧! 安裝繁體中文語言包 由於VS
Thumbnail
因為最近想嘗試編碼風格,於是就選了一套比較"不嚴格"的輔助工具來摸索。 編輯器 VS CODE 框架 VUE3 打包工具 VITE 編碼風格 Standard 環境 version { "nodejs":"v18.18.0", "npm":"9.8.1" }
Thumbnail
※ 必考題一: Command Line 工程師面試時通常不會著墨太多在此科目上,考題只考涵蓋的基本指令。 ※ 說明:Command Line是使用純文字與電腦溝通的方式,和圖形化介面 GUI是不一樣的。 ※ 常用基本指令: pwd=print the current directory:顯
Thumbnail
IDE 升級後出現了一樣的錯誤,手上程式碼沒有 pylint black-format 檢查上不了 gitlab,我又點開了那個很小很小的 x 符號,裡面 logs 提示的解決方式是升級..