2022-08-19 21:38:29

Google Cloud Shell と code-server で開発環境を構築する

#GCP

#code-server

はじめに

これまで個人開発ではノートPC（Mac）を使用していたが、ゲームをするためにデスクトップPC（Windows）を購入したことで下記の課題が生まれた。

デスクトップPCを開発マシンとしても使いたい（スペックが良いからという理由ではなく、自宅でノートPCとデスクトップPCを使い分けるのが面倒くさいため）。
けど、ノートPCとデスクトップPCとで、それぞれ開発環境を管理するのがしんどい😂

そこで、ローカルに開発環境を構築するのではなく、クラウドサーバー上に開発環境を構築した。

要件

完全無料👍
ローカルはまっさらな状態。ブラウザで完結できる。
永続ストレージが使える。
root アクセスができる（sudo コマンドが使える）
git や docker などのツールがすぐに使える（初めからインストールされていてセットアップ不要）。

Google Cloud Shell

環境を構築するクラウドサーバーとして、Google Cloud Shell を採用した。

AWS Cloud Shell との比較

AWS が docker をサポートしていないの決め手かな。Google は永続ストレージのサイズも大きいし。

観点	Google	AWS
料金	無料	無料
永続ストレージ	5GB. 120日アクセスがないと自動的に削除される。	1GB. 120日アクセスがないと自動的に削除される。
利用制限	週 60 時間	リージョンの月間制限に達すると使用できなくなる
root アクセス	可	可
git, docker	プリインストール	docker をサポートしていない

code-server

肝心のエディタは code-server を採用した。

採用理由

Google Cloud Shell では組み込みのエディタ（Cloud Shell Editor）が使える。

Cloud Shell Editor は Visual Studio Code ライク（というか、UI はほぼ一緒）なエディタで高機能である。

しかし、今回はエディタもポータビリティが高いものにしたいため、サーバー上で稼働する Visual Studio Code である code-server を採用した。

導入方法

下記の理由により、Docker image を利用するのではなく、$HOME/.local 配下にスタンドアローン版をインストールする。

インスタンスが terminate したとしても削除されないように永続ストレージにインストールしたい。
code-sever 上から Docker を操作したい。

インストールはこちらに記載されているものを実行すればよい。

$ curl -fsSL https://code-server.dev/install.sh | sh -s -- --method=standalone
Debian GNU/Linux 11 (bullseye)
Installing v4.5.2 of the amd64 release from GitHub.

+ mkdir -p ~/.cache/code-server
+ curl -#fL -o ~/.cache/code-server/code-server-4.5.2-linux-amd64.tar.gz.incomplete -C - https://github.com/coder/code-server/releases/download/v4.5.2/code-server-4.5.2-linux-amd64.tar.gz
######################################################################## 100.0%
+ mv ~/.cache/code-server/code-server-4.5.2-linux-amd64.tar.gz.incomplete ~/.cache/code-server/code-server-4.5.2-linux-amd64.tar.gz
+ mkdir -p ~/.local
+ mkdir -p ~/.local/lib ~/.local/bin
+ tar -C ~/.local/lib -xzf ~/.cache/code-server/code-server-4.5.2-linux-amd64.tar.gz
+ mv -f ~/.local/lib/code-server-4.5.2-linux-amd64 ~/.local/lib/code-server-4.5.2
+ ln -fs ~/.local/lib/code-server-4.5.2/bin/code-server ~/.local/bin/code-server

Standalone release has been installed into ~/.local/lib/code-server-4.5.2

Extend your path to use code-server:
  PATH="$HOME/.local/bin:$PATH"
Then run with:
  code-server

PATH を通す。

# $HOME/.profile
export PATH=$HOME/.local/bin:$PATH

以上！

起動方法

code-server コマンドを実行するだけ。

デフォルトだと 8080 ポートで起動する。

$ code-server
[2022-08-19T12:18:13.818Z] info  code-server 4.5.2 35372d3832521d25327e11c9776096730df22ecb
[2022-08-19T12:18:13.819Z] info  Using user-data-dir ~/.local/share/code-server
[2022-08-19T12:18:13.835Z] info  Using config file ~/.config/code-server/config.yaml
[2022-08-19T12:18:13.835Z] info  HTTP server listening on http://127.0.0.1:8080/
[2022-08-19T12:18:13.835Z] info    - Authentication is enabled
[2022-08-19T12:18:13.836Z] info      - Using password from ~/.config/code-server/config.yaml
[2022-08-19T12:18:13.836Z] info    - Not serving HTTPS
[12:18:18] Extension host agent started.
[12:18:19] [127.0.0.1][b0c9a507][ExtensionHostConnection] Unknown reconnection token (never seen).
[12:18:19] [127.0.0.1][b4e526bd][ManagementConnection] Unknown reconnection token (never seen).

パスワードを入力する画面が表示されたら、下記の password を入力する。

# .config/code-server/config.yaml

bind-addr: 127.0.0.1:8080
auth: password
password: XXXXXX
cert: false

おわりに

ブラウザさえあればどこでも開発ができる環境を構築することができた。

今後はクラウドサーバーの乗り換えを容易にするために、環境構築の自動化を進めようと思う。