概要

外出先から自宅 PC で快適に開発するため、code-server の開発環境と tailscale の VPN 接続を整備しました。

開発環境

code-server のインストール

メインの開発環境として、VSCode のブラウザ版である code-server を使用します。
以下のコマンドでインストールします。

curl -fsSL https://code-server.dev/install.sh | sh

sudo systemctl enable code-server@{USER名}
sudo systemctl start code-server@{USER名}

~/.config/code-server/config.yamlを変更します。
起動時のポートや、ログインパスワードの設定が可能です。

bind-addr: 0.0.0.0:8080
auth: password
password: ******
cert: false

拡張機能

code-server の拡張機能のレポジトリは、デフォルトでは OpenVSX になっています。
いくつか参照できないパッケージもあるので、これを Microsoft の Marketplace に変更します。
/usr/lib/code-server/lib/vscode/product.jsonの末尾に以下を追加します。

  "extensionsGallery": {
    "serviceUrl": "https://marketplace.visualstudio.com/_apis/public/gallery",
    "cacheUrl": "https://vscode.blob.core.windows.net/gallery/index",
    "itemUrl": "https://marketplace.visualstudio.com/items"
  }

リモート接続

自宅サーバー側の環境

tailscale をインストールし、ssh 接続をセットアップします。
https://tailscale.com/download https://tailscale.com/download

curl -fsSL https://tailscale.com/install.sh | sh

sudo tailscale login
sudo tailscale up -ssh

sudo ufw allow ssh  # ssh用のポートを許可する

sudo tailscale status

外出先端末のセットアップ

外出先では Chromebook を使用します。
デフォルトでは Linux は無効化されているため、これを有効化しておきます。

ターミナルが使えるようになったら、以下のコマンドで tailscale をインストール、シェルからログインを行います。

curl -fsSL https://tailscale.com/install.sh | sh
sudo tailscale login

chromebook のファイルから、マイファイル > Linuxファイルの項目から、.ssh/configというファイルを新規作成し、以下を記載します。

HOST house-server
    Hostname hostname  # tailscaleに表示されているホスト名または割当てIPを記載
    User username  # サーバーのログインユーザー名
    LocalForward 8080 localhost:8080  # code-serverの起動ポートを、chromebookの8080ポートにフォワードする

以下のコマンドで ssh 接続します。

ssh house-server

接続に成功すれば、ssh 越しに自宅サーバーを操作できます。
また、Chrome ブラウザでlocalhost:8080にアクセスすると、code-server での開発が可能になります。

雰囲気エンジニアの備忘録

Atmosphere Engineer's Memorandum

概要