瀏覽器上的IDE：code-server安裝——服務器版的vscode

本文所使用的環境配置：

服務器環境：阿里雲ecs 2c4g
操作系統：centos 7.3

前置需求

• Linux基礎——Linux系統文件樹
• Linux基礎——Linux環境變量配置

code-server簡介：

• code-server按照官方的介紹，這款應用就是能在服務器上運行的vscode在有瀏覽器的設備上進行訪問，並且因爲是在服務器上運行所以不用擔心代碼部署到服務器時不同環境造成的影響（這是句廢話）。
• code-server是服務器應用，所以入門門檻還是有的，請大家綜合自己的需求後再決定是否繼續。
• code-server使用建議

code-server的優勢（官方給出的兩個優點）：

• 隨時隨地編寫代碼：使用一致的開發環境，在平板電腦和筆記本電腦上設置代碼。在 Linux 計算機上進行開發，然後通過 Web 瀏覽器從任何設備中獲取。
• 雲服務器支持：利用大型雲服務器加快測試、編譯、下載等速度。由於服務器上運行所有密集型計算，因此在外出時保留電池壽命。

code-server對服務器的配置需求：

• 64 位操作系統。
• 至少 1GB 的 RAM。
• 建議2核心以上（1 個核心能工作，但不是最佳）。
• 通過 HTTPS 或本地主機安全連接（服務輔助設備和剪貼板支持需要）。
• 對於 Linux：GLIBC 2.17 或更高版本，GLIBCXX 3.4.15 或更高版本。

code-server的搭建

既然是服務器應用，肯定先有個服務器，沒有的話快自己去入手一個吧，這裏我就默認大家都有云服務器啦。

下載code-server的最新版本

• 下載鏈接
• 下載對應服務器版本的文件。
  

部署code-server

• 如果是下載到本地，則需要將文件上傳到你的服務器中。
• cd到你存放code-server的文件目錄下。
  
• 解壓code-server到/opt/目錄中。

tar -zxvf [你的code-server壓縮文件名] -C /opt/

• 確認code-server壓縮文件已經解壓到opt文件目錄中。
  

• 將code-server指令添加進系統環境中。

ln -s /opt/[你的code-server目錄名]/code-server /usr/local/bin/code-server

運行code-server

• 直接輸入code-server，服務就自行開啓了，默認是8080端口，127.0.0.1的訪問ip。
  
• 如果想要自行更換ip或者是端口的話可以在後面添加–bind-addr參數。
  這裏如果想讓code-server被任意訪問的話則需要把IP地址設置爲0.0.0.0。
bind-addr參數僅限code-server版本3.2.0及以上纔會有，如果想知道具體參數可以輸入code-server -h查看參數詳情。

code-server --bind-addr 0.0.0.0:[你的端口號]

• code-server的所有參數。
  不同版本的參數可能會不一樣，具體以code-server -h顯示的爲準

參數	說明
auth	自定義身份驗證類型，如果不設置則默認只有password。[password, none]
cert	https證書路徑。如果沒有提供路徑，則自動生成。
cert-key	非生成證書時證書密鑰的路徑，如果用自己的https證書認證的話此段必填。
disable-updates	禁用更新，沒什麼好說的。
disable-telemetry	禁用遙測。就是不允許向微軟服務器發送錯誤或數據信息。
help	幫助指令。
open	啓動時在瀏覽器中打開。不能遠程工作。
bind-addr	設置ip地址訪問與端口號。[host:port ]
socket	socket路徑，設置bing-addr的話此指令可以忽略。
version	查看當前版本。
user-data-dir	用戶文件路徑。
extensions-dir	擴展文件存儲路徑。
list-extensions	列出vscode安裝的所有擴展插件。
force	阻止在安裝VS代碼擴時顯示提示 。
install-extension	通過id或者vsix安裝指定vscode擴展插件。
uninstall-extension	通過id卸載指定vscode擴展插件。
show-versions	顯示vscode擴展插件版本。
proxy-domain	設置代理端口的域名。
verbose	啓用詳細日誌記錄。

開啓https

• 在啓動指令後面添加–cert參數，vscode會自動生成默認證書。

code-server --bind-addr 0.0.0.0:[你的端口號] --cert

• 如果需要啓用https服務的話則需要提供你域名的ssl認證證書路徑。
  https需要你有一個已經認證過的域名並且本地保存了證書和key
  在指令後面添加兩個參數。
  • cert: 認證證書的路徑（.pem或者.crt）
  • cert-key: 證書key的路徑（.key）

code-server --cert [你的證書存放路徑] --cert-key [你的key路徑] --bind-addr 0.0.0.0:[你的端口號]

訪問code-server

• 以上操作全都做完後就可以訪問了，輸入登錄密碼即可訪問。
  密碼在代碼運行的時候就已經給出，記得保存，或者用auth自行設置密碼。
  

讓code-server在後臺運行

• 因爲code-server執行以後關閉ssh會話會自動關閉程序，所以這裏需要讓code-server掛載在後臺運行。這裏推薦使用tmux多會話窗口應用。

安裝tmux

• tmux一般都可以通過linux的包管理器安裝。

# Ubuntu 或 Debian
$ sudo apt-get install tmux

# CentOS 或 Fedora
$ sudo yum install tmux

• 創建一個新的會話。

tmux new -s code_server

• 在新會話中執行code-server啓動指令即可。 關閉ssh會話以後程序繼續在後臺運行。

code-server --cert [你的證書存放路徑] --cert-key [你的key路徑] --bind-addr 0.0.0.0:[你的端口號]

• 需要再查看code-server運行狀態的話，只需要訪問code_server會話就行了。

# 接入code_server會話
tmux a -t code_server
# 殺掉code_server會話
tmux kill-session -t code_server

• 具體使用方式可以參考:Tmux 使用教程

使用code-server的小問題

安裝插件

• 和剛剛安裝的vscode一樣，什麼插件都沒有，非常乾淨。要安裝插件的話直接去插件商城安裝就行了。（不過至少裝箇中文顯示插件吧。）
  
• code-server的python插件會自動鏈接到系統python環境變量，不需要手動配置，就很方便。
  

界面字體調整

• 剛進入code-server準備開始寫第一份代碼的時候你會發現一個大跌眼界的事情，linux不像windows，沒有太多的字體支持，默認的consolas字體簡直辣眼睛。
  
• 打開設置->搜索font，將自己想要顯示的字體輸入進去，重啓code-server服務即可生效。
  
• 如果想要使用自己的字體，可以參考：爲linux添加新字體

提示git更新版本

• 有些服務器git版本可能比較老，所以每次訪問的時候都會提示要更新git到最新版本。
  
• 如果不想更新，直接勾選無視此提示就行了。

code-server使用建議

• 按照我一個學生黨研究了4小時後的經驗，我發現code-server完全就是一個vscode，不管是運行界面還是快捷方式和vscode一模一樣。所以我就有了一個問題：爲什麼不直接用本地vscode呢？ 針對這個問題，我分析了一下code-server的優缺點，之後會給出適合使用的人羣建議。
• code-server的優點：
  • 高便攜性：無論你在哪裏，只要手邊有鍵盤鼠標電腦，能聯網，就可以進行代碼的調試。
  • 高安全性：可能有些時候你用的並不是你的電腦，但是你又不得不去完成一些上頭給你分配的任務，你可以把代碼從git倉庫拉取到當前電腦完成，但是可能會留下一些你不想要留下的記錄，雲編碼則是能保證你不留下痕跡的有利選擇。
  • 方便調試：因爲是在服務器環境上運行代碼，所以如果這臺服務器正好是你使用的服務器的話，則你所見即所得，無需解決在後續代碼部署上的環境兼容問題。
  • 高統一性：有些時候你可能需要多個團隊開發同一區域的編碼，但是可能你的隊友們環境完全不一樣甚至會因爲環境配置拖慢工程，這個時候創建多個賬戶分發給你的隊友們在服務器上進行雲編程，那麼可以完美解決這個問題。
• code-server的缺點：
  • 對雲服務器有非常高的要求：這不僅僅是對內存和cpu的要求，對網絡帶寬也有很大的需求。我的阿里雲標準服務器的帶寬花了整整1分多鐘才把vscode頁面加載完全，光是這個加載時間就已經可以勸退所有沒有錢買高性能服務器的人了，而且運行代碼的加載時間相比本地vscode也是有一定的延時。更不用說多人訪問了。
    
  • 沒有網絡就不能寫代碼：相信很多學生和我一樣，學校可能哪天突然網絡就斷了，而你還在寫課設，但是如果你用的是code-server的話可能你今天都不用寫代碼了。
  • 無法編寫太大工程：vscode本生就是一個輕量級ide，如果你要進行一個特別大的網站開發的話，肯定是要用其他ide的，原生支持的開發插件更全面。
  • 無法調試圖形化頁面：也不是完全不能調試，可以通過瀏覽器進行訪問，但是這需要你的服務器進行更大的帶寬，而且代價是更高的延時，可能你只是要寫一個html頁面，但是每寫幾行就想預覽效果，而code-server需要你等半天將頁面從服務器發送過來，這肯定是不能和本地訪問相媲美的。
• 使用範圍分析：
  • 學生黨（裝逼用）：對於喜愛計算機的學生們，這個肯定是能博人
    眼球的東西，畢竟學生之間的交流就是這麼的簡單粗暴。
  • 不經常在固定地點寫代碼的程序員們：雖然可能我再想有沒有這種人，不過世界這麼大，總會有的，這些程序員可能需要在不同地點出差，但是又要完成公司的項目，那麼這個可能會成爲他們的選擇。不過現在隨便一臺便攜筆記本cpu都能有4核了吧。。。
  • 公司用：大企業和我們這種窮逼不同，他們有性能非常高的服務器和網絡帶寬，完全有能力發揮出code-server的優勢，像在這疫情期間，說不定還是很好的遠程辦公工具呢（猜的）。
  • 結合jupyter book效果更佳：一直都很想吐槽jupyter notebook有木有什麼更快捷的代碼提示方式，雖然下載了插件，但是每次提示都不是主動的，都需要被動提示，而且有些時候運行的結果可能還會佔用頁面顯示，導致和下個區塊的代碼不連貫，這個時候在code-server上安裝jupyter的插件，即可有vscode級別的代碼體驗。
    

參考文獻

• Code Server github
• Code Server – VSCODE 服務器版
  
• code-server像素級仿製的在線VSCode——搭建與擴展安裝
• Tmux 使用教程
• CentOS7 如何升級Git
• 爲linux添加新字體