簡單3步部署code-server(vscode網頁版)

記錄網頁版vscode的部署方法。html

1、背景

近期接觸到了網頁版的 vscode ，名字是 code-server。linux

對有頻繁切換電腦寫代碼的同窗，網頁版vscode無疑是絕佳的選擇，使用姿式和桌面版基本無差異，無需安裝環境，任何電腦只要打開網頁登陸便可開始寫代碼。必要時一頭鑽進網吧，便可處理緊急問題。nginx

倉庫源碼地址：github.com/cdr/code-se…
code-server 演示圖片

2、安裝介紹

code-server安裝極爲簡單，只需簡單幾步。git

1. 下載包

在此頁面可看到不一樣版本的包：github.com/cdr/code-se…github

點擊下載對應系統的包，若是是 linux 可經過以下命令下載：web

wget -b https://www.ivdone.top/wordpress/pic/p662/code-server-3.2.0-linux-x86_64.tar.gz
複製代碼

2. 解壓

# 用tar命令解壓
tar -zxvf code-server-3.2.0-linux-x86_64.tar.gz
# 進入目錄
cd code-server-3.2.0-linux-x86_64/
複製代碼

3. 啓動code-server

./code-server
複製代碼

此時能夠看到終端打印的信息，上面有訪問地址和登陸密碼：算法

假如你的服務器ip是 192.168.3.7 這時瀏覽器打開 http://192.168.3.7:8080，便可看到登陸頁面：npm

輸入密碼便可看到熟悉的vscode頁面：json

3、更多自定義的功能

1. 修改端口；

啓動時加上參數：

./code-server --port 8082
複製代碼

2. 修改登陸密碼；

export PASSWORD="your_password";

複製代碼

3. 後臺啓動，退出終端也不中止服務；

由於code-server執行之後關閉ssh會話會自動關閉程序，因此這裏須要讓code-server掛載在後臺運行。這裏須要使用守護進程的方式開啓服務。

方法1：使用 pm2 進程管理工具.瀏覽器

code-server項目根目錄修改 package.json 的 scripts，添加一行啓動命令：

{
    "scripts": {
        "start-code-server": "./code-server --port 8082 --host 0.0.0.0 --auth password --cert /data/cert.pem --cert-key /data/cert.key",
    }
}
複製代碼

pm2 命令啓動code-server服務

# 安裝pm2
npm install pm2 -g

# 查看進程狀態列表
pm2 list

# 運行啓動命令，其中 start-code-server 是在package.json中定義的啓動命令
pm2 start --name "code-server" -- run start-code-server

# 查看進程日誌
pm2 log code-server

# 關閉code-server服務
pm2 stop code-server
複製代碼

pm2 list 命令查看進程列表狀態

更多pm2使用方式見：pm2使用簡介

方法2：使用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 使用教程

4. 啓動https；

若是須要啓用https服務的話則須要提供你域名的ssl認證證書路徑。

如何爲網站製做證書的教程參考：10分鐘免費將網站升級爲https

https設置須要你有一個已經認證過的域名而且本地保存了證書和key。

在指令後面添加兩個參數。

cert: 認證證書的路徑（.pem或者.crt）
cert-key: 證書key的路徑（.key）

code-server --port 8082 --cert /data/cert.pem --cert-key /data/cert.key
複製代碼

接下來便可用https訪問了：https://192.168.3.7:8082

5. 使用二級域名訪問，而非端口訪問；

使用 nginx 設置代理便可：

其中your_server_name是你的域名

server {
    listen 80;    # 監聽端口
    server_name code.your_server_name;       # 域名
    # nginx請求日誌地址
    access_log  /usr/local/webserver/nginx/logs/code.access.log;  
    location / {
        proxy_pass  http://localhost:8082;
        proxy_redirect     off;
        proxy_set_header   Host             $host;          # 傳遞域名
        proxy_set_header   X-Real-IP        $remote_addr;   # 傳遞ip
        proxy_set_header   X-Scheme         $scheme;        # 傳遞協議
        proxy_set_header   X-Forwarded-For  $proxy_add_x_forwarded_for;
        proxy_set_header   Accept-Encoding  gzip;
        # code-server的websocket鏈接須要Upgrade、Connection這2個頭部
        proxy_set_header   Upgrade          $http_upgrade;
        proxy_set_header   Connection       upgrade; 
    }
}
複製代碼

這樣便可用二級域名訪問了：http://code.your_server_name

若是須要 https 的代理則這樣設置

server {
    listen 443 ssl;                     # 監聽端口
    server_name code.alanyf.site;       # 域名
    # nginx請求日誌地址
    access_log  /usr/local/webserver/nginx/logs/code.access.log;

    # ssl證書地址
    ssl on;
    ssl_certificate      /data/cert.pem;    # pem文件的路徑
    ssl_certificate_key  /data/cert.key;    # key文件的路徑
    
    # ssl驗證相關配置
    ssl_session_timeout  5m;             # 緩存有效期
    ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;                # 加密算法
    ssl_protocols TLSv1 TLSv1.1 TLSv1.2; # 安全連接可選的加密協議
    ssl_prefer_server_ciphers on;        # 使用服務器端的首選算法

    location / {
        proxy_pass  https://localhost:8084;
        proxy_redirect     off;
        proxy_set_header   Host             $host;          # 傳遞域名
        proxy_set_header   X-Real-IP        $remote_addr;   # 傳遞ip
        proxy_set_header   X-Scheme         $scheme;        # 傳遞協議
        proxy_set_header   X-Forwarded-For  $proxy_add_x_forwarded_for;
        # code-server的websocket鏈接須要Upgrade、Connection這2個頭部
        proxy_set_header   Upgrade          $http_upgrade;
        proxy_set_header   Connection       upgrade; 
        proxy_set_header   Accept-Encoding  gzip;
    }
}

# http請求直接重定向到https
server {
    listen 80;                          # 監聽端口
    server_name code.alanyf.site;       # 域名
    return 301 https://$server_name$request_uri;
}
複製代碼

這樣便可用二級域名訪問了：https://code.your_server_name

4、更多啓動配置參數介紹

不一樣版本的參數可能會不同，具體以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	啓用詳細日誌記錄。

5、參考

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