有了這個 4.5 萬 Star 的工具,可在瀏覽器中運行最強編輯器 VS Code!

【導語】:一個讓你能在瀏覽器中運行 VS Code 的工具。node

簡介

code-server 是一個基於 VS Code 的在線編輯器,在任何地方的任何機器上運行 VS Code 並在瀏覽器中訪問它,實現任何設備經過瀏覽器便可訪問 VS Code,進而實現遠程在線開發。python

它的亮點是:linux

  • 爲用戶提供了一致的代碼開發環境;
  • 基於服務器加速測試、編譯、下載;
  • 延長我的電腦的電池壽命,將密集型任務轉移到服務器上運行;

官方建議服務器至少要有 1 GB 內存和 2 核。nginx

項目地址是:git

https://github.com/cdr/code-s...github

下載安裝

腳本安裝

官方提供了一個腳原本爲 Linux、macOS 和 FreeBSD 安裝 code-server。docker

  • 首先嚐試打印安裝過程當中的詳細內容,這個過程不會進行安裝:
curl -fsSL https://code-server.dev/install.sh | sh -s -- --dry-run
  • 真正安裝:
curl -fsSL https://code-server.dev/install.sh | sh

獨立安裝

官方提供了獨立的壓縮安裝文件,下載對應服務器的版本,解壓縮便可使用。shell

// 完成後訪問 http://127.0.0.1:8080,密碼保存在 ~/.config/code-server/config.yaml 配置文件中
mkdir -p ~/.local/lib ~/.local/bin
curl -fL https://github.com/cdr/code-server/releases/download/v$VERSION/code-server-$VERSION-linux-amd64.tar.gz \
  | tar -C ~/.local/lib -xz
mv ~/.local/lib/code-server-$VERSION-linux-amd64 ~/.local/lib/code-server-$VERSION
ln -s ~/.local/lib/code-server-$VERSION/bin/code-server ~/.local/bin/code-server
PATH="~/.local/bin:$PATH"
code-server
# Your password is in

Docker 安裝

# 這將啓動一個 code-server 容器並經過 http://127.0.0.1:8080 訪問
mkdir -p ~/.config
docker run -it --name code-server -p 127.0.0.1:8080:8080 \
  -v "$HOME/.config:/home/coder/.config" \
  -v "$PWD:/home/coder/project" \
  -u "$(id -u):$(id -g)" \
  -e "DOCKER_USER=$USER" \
  codercom/code-server:latest

訪問配置

官方強烈建議不要在公網暴露不須要認證或加密的 code-server,在默認狀況下,code-server 會使用密碼驗證,密碼從配置文件(~/.config/code-server/config.yaml)中獲取。它只監聽 localhost 的請求以免將本身暴露出去。若是想從不一樣的地方安全地使用 code-server,則能夠採用如下方法。瀏覽器

SSH 轉發

官方推薦這種方法,由於不須要任何額外的設置,只須要在遠程機器上有一個 SSH 服務。缺點是沒法在沒有 SSH 客戶端的設備上訪問,如 iPad。安全

  • 首先,經過 ssh 進入實例並編輯 code-server 配置文件以禁用密碼身份驗證:
# 將 「auth: password」 替換爲 「auth: none」
sed -i.bak 's/auth: password/auth: none/' ~/.config/code-server/config.yaml
  • 重啓:
sudo systemctl restart code-server@$USER
  • 本地計算機運行如下命令,將本地端口 8080 轉發到遠程實例:
# -N disables executing a remote shell
ssh -N -L 8080:127.0.0.1:8080 [user]@<instance-ip>

如今就能夠在本地計算機經過 http://127.0.0.1:8080 訪問 code-server

使用 Let's Encrypt

  1. 首先須要購買一個域名,推薦 Google Domains
  2. 將 code-server 實例IP與域名綁定
  3. 安裝 nginx:
sudo apt update
sudo apt install -y nginx certbot python3-certbot-nginx
  1. 將如下內容放到 /etc/nginx/sites-available/code-server 文件中:
server {
    listen 80;
    listen [::]:80;
    server_name mydomain.com;

    location / {
      proxy_pass http://localhost:8080/;
      proxy_set_header Host $host;
      proxy_set_header Upgrade $http_upgrade;
      proxy_set_header Connection upgrade;
      proxy_set_header Accept-Encoding gzip;
    }
}

mydomain.com 是你使用的域名。

  1. 啓用配置
sudo ln -s ../sites-available/code-server /etc/nginx/sites-enabled/code-server
sudo certbot --non-interactive --redirect --agree-tos --nginx -d mydomain.com -m me@example.com

其中 me@example.com 使用你本身實際的電子郵件。訪問 https://your-domain-name 便可訪問 code-server。

\6. 以上 3 到 5 可以使用 Caddy 替代,詳細說明參考官網。

使用自簽名證書

建議將次做爲最後的手段,由於自簽名證書不適用與 iPad,並可能致使其餘奇怪的問題。

首先 ssh 進入 code-server 服務器並編輯配置文件以使用隨機生成的自簽名證書:

# Replaces "cert: false" with "cert: true" in the code-server config.
sed -i.bak 's/cert: false/cert: true/' ~/.config/code-server/config.yaml
# Replaces "bind-addr: 127.0.0.1:8080" with "bind-addr: 0.0.0.0:443" in the code-server config.
sed -i.bak 's/bind-addr: 127.0.0.1:8080/bind-addr: 0.0.0.0:443/' ~/.config/code-server/config.yaml
# Allows code-server to listen on port 443.
sudo setcap cap_net_bind_service=+ep /usr/lib/code-server/lib/node

重啓:

sudo systemctl restart code-server@$USER

FAQ

使用 code-server 時會遇到一些問題。好比與 VS Code 的差別?如何禁用遙測?如何調試代碼服務器?這些問題均可以在官方 FAQ 文檔中找到:

https://github.com/cdr/code-server/blob/main/docs/FAQ.md#how-should-i-expose-code-server-to-the-internet
開源前哨 平常分享熱門、有趣和實用的開源項目。參與維護 10萬+ Star 的開源技術資源庫,包括:Python、Java、C/C++、Go、JS、CSS、Node.js、PHP、.NET 等。
相關文章
相關標籤/搜索