こんにちは、ブログカフェChromaの色です。
今回は、以前少しぼやいていた、iPadで快適にコーディングするために
試行錯誤した話を書きます。
code-serverという、ブラウザで動くVisual Studio Codeのようなものを
GCPというGoogleのIaaSに乗せて、iPadからアクセスできるようにしました。
簡単にいうと、これによりWebブラウザが使える環境であれば
どこでもコーディングができるようになります。
今回は、GCP上へのcode-serverの構築編です。
今後、iPadからのアクセス編を書く予定です。
経緯
- iPadからでもコーディングができるような環境を
作りたかった - IaaS上へのホスティングや外部アクセスの設定方法などを勉強したかった
- GCPの無料枠内でどのくらい頑張れるか検証したかった
- SaaS(Code Anywhere)を試したが、
自前で構築した方が無料で色々できると思った - code-server on GCPの知見が調べてもあまり
出てこなかったので、
これからやりたい人の役に立てればと思った
構築時の環境(前提条件)
- ホスティング先
- GCPのcompute engine VM(AlwaysFree枠内)
- OS:debian10
- マシンタイプ:f1-micro
(vCPU x 1、メモリ 0.6 GB) - 外部IPを持っており、ファイアウォールで
sshやhttpアクセスが許可されている
- code-server
- iPad
- 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コマンドラインツールについての詳細は、論旨からズレるので割愛します。
下記リンクを参照してください。

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
スクリプト実行前に、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に接続する場合の手順」
に従って設定してゆきます。

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ブラウザ経由でのアクセスを解説します。
コメント