【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の構築方法が知りたいという方は、
構築についての記事を掲載していますので、↓ をご覧ください！

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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」を入力
- ポートなど変更している場合は、
  正しいポート番号を入力してください