【code-server】GCP上にcode-serverを構築し、iPadからアクセスする【構築編】

こんにちは、ブログカフェChromaの色です。

今回は、以前少しぼやいていた、iPadで快適にコーディングするために
試行錯誤した話を書きます。

code-serverという、ブラウザで動くVisual Studio Codeのようなものを
GCPというGoogleのIaaSに乗せて、iPadからアクセスできるようにしました。

簡単にいうと、これによりWebブラウザが使える環境であれば
どこでもコーディングができるようになります。

今回は、GCP上へのcode-serverの構築編です。
今後、iPadからのアクセス編を書く予定です。

経緯
構築時の環境(前提条件)
Goal
code-serverの構築

経緯

iPadからでもコーディングができるような環境を
作りたかった
IaaS上へのホスティングや外部アクセスの設定方法などを勉強したかった
GCPの無料枠内でどのくらい頑張れるか検証したかった
SaaS(Code Anywhere)を試したが、
自前で構築した方が無料で色々できると思った
code-server on GCPの知見が調べてもあまり
出てこなかったので、
これからやりたい人の役に立てればと思った

構築時の環境(前提条件)

ホスティング先
1. GCPのcompute engine VM(AlwaysFree枠内)
2. OS：debian10
3. マシンタイプ：f1-micro
  （vCPU x 1、メモリ 0.6 GB）
4. 外部IPを持っており、ファイアウォールで
  sshやhttpアクセスが許可されている
code-server
1. https://github.com/cdr/code-server
iPad
1. Termiusをインストールしておく

Goal

code-serverを構築(①)
した
VMにiPadのWebブラウザでアクセスすると、
code-serverのUIが表示される(②)
こと

この記事では、①部分(VM上へのcode-serverの構築)までを説明します。

②については、別記事にて説明予定です。

code-serverの構築

1. code-serverを構築するVMにSSH接続する

あらかじめIaaS上に作成しておいたVMに、SSHにてアクセスします。

アクセス方法はIaaSサプライヤによって様々でしょうが、
GCPでは gcloud computeコマンドを使用して接続可能です。

gcloudコマンドラインツールについての詳細は、論旨からズレるので割愛します。
下記リンクを参照してください。

gcloud compute | Compute Engine ドキュメント | Google Cloud

2. VM上にcode-serverをインストールする

code-serverの公式ガイドに従って、インストールスクリプトを実行します。
ここでは3つあるインストール方法のうち1番目を実施します。

Using the install script, which automates most of the process. The script uses the system package manager if possible.
https://github.com/cdr/code-server#getting-started

GitHub - coder/code-server: VS Code in the browser

VS Code in the browser. Contribute to coder/code-server development by creating an account on GitHub.

スクリプト実行前に、dry-runオプションを使って
実際のインストールで問題が発生しないかどうか確かめるのが無難だと思います。

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

dry-runで問題がなければ、下記を実行しインストール。

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

インストール成功後、code-serverサービスを実行するための方法が
表示されるので、それに従ってサービスを起動しましょう。
おそらく下記を実行することになるでしょう。

sudo systemctl enable --now code-server@$USER

念のためサービスが起動されているかも確認します。

sudo systemctl status code-server@$USER
● code-server@<user>.service - code-server
   Loaded: loaded (<path/to/>code-server@.service; enabled; vendor preset: enabled)
   Active: active (running) since …

3. code-serverのパスワード認証を無効にする

ここからは、coderの「ポートフォワーディングでcode-serverに接続する場合の手順」
に従って設定してゆきます。

Page Not Found - Coder

Page not found.

3-1. ~/.config/code-server/config.yamlを編集しパスワード認証を無効にする

sedコマンドを用いて、code-serverの認証に関する設定ファイルを編集し、
パスワード認証を無効にします。

sed -i.bak 's/auth: password/auth: none/' ~/.config/code-server/config.yaml

3-2. code-serverを再起動する

sudo systemctl restart code-server@$USER

ここまででVMへのcode-server構築は終了です。

注意点

GCPでは、VMを停止して再度起動すると外部IPが変更になるみたいです。
後編でポートフォワーディングするときはIP指定に気をつけてください。

ファイアウォールの設定のせいでSSHができないなど、
意外とつまづきやすいので初めに確認しておくことをお勧めします。

次回はipadからcode-serverへの接続、Webブラウザ経由でのアクセスを解説します。