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

codeserver_with_ipad_buildプログラミング環境
スポンサーリンク

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

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

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

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

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

経緯

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

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

  1. ホスティング先
    1. GCPのcompute engine VM(AlwaysFree枠内)
    2. OS:debian10
    3. マシンタイプ:f1-micro
      (vCPU x 1、メモリ 0.6 GB)
    4. 外部IPを持っており、ファイアウォールで
      sshやhttpアクセスが許可されている
  2. code-server
    1. https://github.com/cdr/code-server
  3. 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ブラウザ経由でのアクセスを解説します。

コメント

タイトルとURLをコピーしました