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

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

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

今回は、「iPadでコーディングしよう」シリーズの一環として、
iPadでブラウザを用いてcode-serverへアクセスする方法を紹介します。

構築編で構築したcode-serverに、SSH Port-Forwardingを用いてアクセスします。

前提条件

  • code-serverが構築済みであること
    • 搭載VMの外部IPがわかること
    • code-serverのポート(デフォルト8080)
      が公開されていること
  • iPad側の事前準備ができていること
    • Termius(SSH Client)がインストール
      されていること

code-serverの構築方法が知りたいという方は、
構築についての記事を掲載していますので、↓ をご覧ください!

Goal

code-serverを構築(①)

した

VMにiPadのWebブラウザでアクセスすると、

code-serverのUIが表示される(②)

こと

今回の記事では、②部分を解説します。

概略図は下記の通りです。

Port-Forwarding設定:Termius

Termiusとは

無料でSSH接続やキーペア作成、Port-Forwarding設定ができる
高機能なマルチプラットフォームSSHクライアントです。

詳細は下記公式サイトをご覧ください。

Termius - SSH platform for Mobile and Desktop
Termius helps to organize the work of multiple DevOps and engineering teams. It reduces the admin work for managing users. Enterprise compliance. SOC2 II report...

今回はこちらを用いてSSH関連の設定を行なってゆきます。

キーペアの作成

ポートフォワーディングするためには、まずフォワーディングしたいホストへ
SSHアクセスできるようにする必要があります。

SSHを用いてホストへ接続する場合、Basic認証(ユーザ名とパスフレーズ)や
鍵認証(事前に共有しておいた暗号のようなもの)など様々な方法があります。

今回は、より安全性の高い鍵認証を用いて接続を行います。

Termiusでキーペアを作成する場合、
左ペインのメニューから「Keychain」を選択します。

さらに左上の + マークをタップし、「Generate Key」をクリックし、
生成するキーの詳細を入力します。

入力が完了したら、「save」をタップしキーペアを生成しましょう。

作成したペアのうち、公開鍵については、
キーを長押ししたメニューにある「Export Host」などを用いて
アクセス対象のホストへ転送しておきましょう。

すでにホストに登録済みのキーペアを用いる場合は、
+ マークから「Paste Key」を選択することも可能です。

アクセス対象ホスト(VM)の設定

キーペアを生成したら、そのキーを用いてホストへ接続する設定をします。

左ペインの「Hosts」→「+」→「New Host」と進んでください。
新規ホスト設定画面が表示されると思います。

表示された設定項目について、下記のように設定します。

  • Alias
    • 接続先ホストが識別できる任意の名称
  • Hostname
    • 接続先ホストのホスト名 or IPアドレス
  • Username
    • 接続に使用するユーザ名
  • Key
    • 先ほど作成したキー
  • それ以外の項目は全てデフォルト

入力したら「Save」をタップし、内容を保存します。

Hosts内に入力したエイリアス名でホストが表示されますので、
タップしてターミナル画面に遷移できるか試してみてください。

接続に成功し、ターミナル画面が表示されればホストの設定は完了です。

Port-Forwardingの設定

SSHによるポートフォワーディングを設定するには、
左ペインより「Port Forwarding」を選択してください。

「+」をタップすると、設定画面が開きます。
下記の内容を入力し、「Save」をタップします。

  • Local, Remote, Dynamic
    • 「Local」を選択
  •  Label
    • この設定を識別する任意の名称
  • Host
    • 先ほど設定したホストを選択
  • Port From
    • 接続先ホストのポートをフォワーディングする
      iPadのポート番号を入力
    • 例:10,001
      (他のアプリケーションの動作ポートと被らなければOK)
  • Destination
    • フォワーディング先のIPアドレスを入力
    • iPadのlocalhostにしたいので、「127.0.0.1」とする
  • Port To
    • フォワーディング元のIPアドレスを入力
    • code-serverは8080番ポートで動いているので、
      「8080」を入力
    • ポートなど変更している場合は、
      正しいポート番号を入力してください

Save選択後、作成されたポートフォワーディング設定をタップし、
特にエラー等表示されなければ設定は完了です。

Webブラウザからcode-serverへのアクセス

先ほど設定したポートフォワーディングの項目をタップし、
アイコンの色がグレーから青色に変化することを確認してください。

アイコンが青色の状態で、任意のWebブラウザを開き、
下記アドレスのどちらかへアクセスしてください。
※ 10001部分は、設定した任意のポート番号を入力してください。

localhost:10001
127.0.0.1:10001

すると、下記のようにcode-serverのエディタ画面が表示されます。

これにて、アクセス編は終了です。
お疲れ様でした。

課題と対処

課題

  1. GCP無料枠内のインスタンス性能が芳しくない
    • code-serverが高頻度で落ちる
  2. Port-Forwardingがすぐ切れる
    • バックグラウンドでTermiusを動かすと、プロセスがすぐ死ぬ
  3. ストレージがインスタンスに依存している
    • インスタンスが壊れた時のリスクが大きい
    • 無料枠内なので30GBくらいしかない
  4. Node.jsなどのローカルサーバ立てて検証する系の作業が難しい
    • すでにPort-Forwardingしているので、めんどくさい

対処

  1. OSのチューニングやインスタンスのスケーリングなどで対応?
  2. どうしようもない(https化してインターネットに公開するとフォワーディング不要?)
  3. 別ストレージをマウント、GitHubなどの活用?
  4. よくわからないので調べたい(ごめんなさい)

今回は以上にします。

効果的な対処方法などあれば教えていただけると幸いです。
最後までご覧いただきありがとうございました。

コメント

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