如何架設自己的線上Visual Studio Code IDE？

相信各位除了在本地使用Visual Studio Code之外，也會希望可以在不同的電腦使用同樣的工作環境吧！我的願望也是如此，希望可以在學校不透過遠端桌面操控筆電就可以線上編輯遠端伺服器的程式碼，是多麼幸福的一件事呀！

安裝&設定code-server

首先，我們要先到code-server的Github頁面上下載所需要的檔案，今天這個例子我們不需要到Github頁面，只需要用到下面一條指令，即可自動完成安裝。(作業系統環境為Debian 10)

curl -fsSL https://code-server.dev/install.sh | sh ; #安裝code-server

安裝完成後，透過下面的指令以root使用者角色啟動code-server

sudo systemctl start code-server@$USER ; #啟動code-server

接著你就可以嘗試在瀏覽器輸入localhost:8080試試看是否會出現以下畫面

這時你肯定會疑惑：沒有密碼要怎麼登入呢？其實密碼在~/.config/code-server/config.yaml裡面，在終端機輸入以下指令即可編輯檔案

root@localhost:~$ vim ~/.config/code-server/config.yaml ; #編輯code-server設定檔
bind-addr: 0.0.0.0:8080
auth: password
password: me7fi8205u93d8vj39fle957
cert: false
root@localhost:~$ systemctl restart code-server@$USER ; #重新啟動code-server

bind-addr指的是可供存取的IP位址，輸入0.0.0.0表示允許所有IP位址存取，後面的:8080是連接埠，可以自由變更。
auth是指驗證方法，沒有特殊需求不需要更改。
password是你的密碼，可以更換成你自己的密碼。
cert是指加密憑證，但此功能據悉仍處於測試階段，不建議使用，若欲使用加密協議登入，請繼續閱讀。
更改完上述設置後記得重新啟動服務。

設定完畢後你就可以從瀏覽器輸入IP登入online vscode了！

如何使用SSL連線至code-server

在已加密的工作環境下撰寫程式碼是比較安全的作法，但因code-server本身不支援加密憑證之單獨使用，需依靠Nginx、Apache2、Caddy等等的程式輔助，而在此只討論Apache2的部分。Nginx及Caddy在官網的英語教學都有教學。

在Apache2的設定檔(通常位於/etc/apache2/)中，加入以下資料(域名、憑證位置、連接埠請自行更換至您的設定)：

<VirtualHost *:443>
    ServerName code.example.com
    ProxyPreserveHost on
    SSLProxyEngine on
    ProxyPreserveHost on
    RewriteEngine on
    RewriteCond %{HTTP:Upgrade} =websocket [NC]
    RewriteRule /(.*) ws://127.0.0.1:8080/$1 [P,L]
    ProxyPass / http://127.0.0.1:8080/
    ProxyPassReverse / http://127.0.0.1:8080/
    SSLEngine on
    SSLCertificateFile certificate.pem
    SSLCertificateKeyFile privkey.pem
</VirtualHost>

接著記得啟用”proxy_wstunnel”、”proxy_http”、”proxy”模組，重新啟動Apache2即可透過 ServerName 所設定的域名登入並且可以使用SSL加密機制。

sudo systemctl restart apache2