Katacodaのshell環境からホスト情報を取得する方法

はじめに

KatacodaのPlaygroudのシナリオを作成する際、ホスト情報(サブドメイン、ホスト)は実行する度に変わるため、markdownに記載する変数が定義されています。

• [[KATACODA_HOST]]　　・・ホスト
• [[HOST_SUBDOMAIN]]　　・・サブドメイン

例えば、最初(1番目)のシナリオとして以下のように記載します。

step1.md

起動できたら以下のURLを開いて、MQTT over WebSocket (チャット) を体験してみましょう！
https://[[HOST_SUBDOMAIN]]-1880-[[KATACODA_HOST]].environments.katacoda.com/chat
Node-REDのフローを確認したい場合は以下のURLを開いてください。
https://[[HOST_SUBDOMAIN]]-1880-[[KATACODA_HOST]].environments.katacoda.com

シナリオを実行すると、変数の部分はその時に実行された環境(ホスト情報)に置き換えられます。

ポート番号はプログラムを実行する際にbind (Listen)するポート番号と同じため、変数は定義されていません。

問題点

shell環境 (Terminal)からはホスト情報を参照することができないため、例えば、プログラムからホスト情報を参照して何か処理をしたい場合、代替手段を検討する必要があります。
(envコマンドで環境変数を確認したところ、ホスト情報は設定されていませんでした)

解決方法

Katacodaのシナリオ実行環境の設定(environment)で、UIレイアウト(uilayout)の設定をterminalではなく、vscode-terminal-splitに設定すると、VS Codeエディタが起動します。

index.json

{
  "title": "MQTT over WebSocket Playground",
  "description": "MQTT over WebSocket Playground",
  "details": {
    "steps": [
      {
        "title": "Step 1",
        "text": "step1.md"
      }
    ],
    "intro": {
        "text": "intro.md",
        "courseData": "background.sh",
        "code": "foreground.sh",
        "credits": ""
    },
    "finish": {
      "text": "finish.md"
    }
  },
  "environment": {
    "hideintro": true,
    "showdashboard": true,
    "dashboards": [{"name": "Node-RED", "port": 1880}],
    "uilayout": "vscode-terminal-split"
  },
  "backend": {
    "imageid": "ubuntu"
  }
}

VS Codeの設定ファイル(coder.json)の中にホスト情報が記載されていることを見つけました。

プログラムからホスト情報を参照する実装例

ホスト情報が記載されているファイル名を参照して、プログラムが使用するポート番号に変更(23000→1880)します。

$ grep url /root/.local/share/code-server/coder.json | sed 's/\// /g' | sed 's/-/ /g' |awk '{print "https://" $4 "-1880-" $6}'
167772191-1880-ollie09.environments.katacoda.com

プログラムからホスト情報を参照する際にファイルへアクセスするのは面倒なため、環境変数を設定します。

$ export HOSTNAME=`grep url /root/.local/share/code-server/coder.json | sed 's/\// /g' | sed 's/-/ /g' |awk '{print $4 "-1880-" $6}'`
$ echo $HOSTNAME
167772191-1880-ollie09.environments.katacoda.com

環境変数へ設定した後にプログラムを実行すればプログラムの中からホスト情報を参照できるようになります。

では、良きKatacodaライフを！

参考

MQTT over WebSocketを体験する目的でチャットシステムを作りました。
静的コンテンツ(HTML)でブラウザ(Javascript)からKatacoda環境へアクセスするため、HTML(Javascript)の中にホスト情報を埋め込む必要がありました。