【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
The #1 cross-platform terminal for Windows, macOS, Linus, iOS, and Android with built-in ssh client which works as your own portable server management system in...

今回はこちらを用いて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をコピーしました