こんにちは、ブログカフェChromaの色です。
今回は、「iPadでコーディングしよう」シリーズの一環として、
iPadでブラウザを用いてcode-serverへアクセスする方法を紹介します。
構築編で構築したcode-serverに、SSH Port-Forwardingを用いてアクセスします。
前提条件
- code-serverが構築済みであること
- 搭載VMの外部IPがわかること
- code-serverのポート(デフォルト8080)
が公開されていること
- iPad側の事前準備ができていること
- Termius(SSH Client)がインストール
されていること
- Termius(SSH Client)がインストール
code-serverの構築方法が知りたいという方は、
構築についての記事を掲載していますので、↓ をご覧ください!
Goal
code-serverを構築(①)
した
VMにiPadのWebブラウザでアクセスすると、
code-serverのUIが表示される(②)
こと
今回の記事では、②部分を解説します。
概略図は下記の通りです。

Port-Forwarding設定:Termius
Termiusとは
無料でSSH接続やキーペア作成、Port-Forwarding設定ができる
高機能なマルチプラットフォームSSHクライアントです。
詳細は下記公式サイトをご覧ください。
今回はこちらを用いて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のエディタ画面が表示されます。

これにて、アクセス編は終了です。
お疲れ様でした。
課題と対処
課題
- GCP無料枠内のインスタンス性能が芳しくない
- code-serverが高頻度で落ちる
- Port-Forwardingがすぐ切れる
- バックグラウンドでTermiusを動かすと、プロセスがすぐ死ぬ
- ストレージがインスタンスに依存している
- インスタンスが壊れた時のリスクが大きい
- 無料枠内なので30GBくらいしかない
- Node.jsなどのローカルサーバ立てて検証する系の作業が難しい
- すでにPort-Forwardingしているので、めんどくさい
対処
- OSのチューニングやインスタンスのスケーリングなどで対応?
- どうしようもない(https化してインターネットに公開するとフォワーディング不要?)
- 別ストレージをマウント、GitHubなどの活用?
- よくわからないので調べたい(ごめんなさい)
今回は以上にします。
効果的な対処方法などあれば教えていただけると幸いです。
最後までご覧いただきありがとうございました。
コメント