fbpx

CL LAB

HOME > CL LAB > katacodaを利用して開発者向けのトライアルのプロトタイプを構築してみた

katacodaを利用して開発者向けのトライアルのプロトタイプを構築してみた

 ★ 6

1. はじめに

皆さま、開発向けのトライアルサイトを手軽に構築したいと思ったことはないでしょうか?

手軽にとは、例えば、研究開発や新規事業創出を推進していく上で必要となる技術を比較的簡単に
構築して検証する環境を作りたいという意図になります。更にはコンテナやkubernetes環境が
デファクトスタンダートとなってきている昨今、これらをサンドボックスとして簡単に提供できて
カスタマイズできる環境を欲しいと思ったことはないでしょうか。

今回は、このトライアルサイトをなるべく時間をかけずに、katacodaというブラウザで
完結する学習プラットフォームのサービスを応用してプロトタイプを構築してみましたので
最後までご覧いただけると嬉しいです。

2. katacodaとは

katacodaは、ソフトウェアエンジニア向けのインタラクティブな学習およびトレーニングプラットフォームです。
開発者の学習を促進することを目的としてブラウザ環境で完結されており、技術系の学習で煩わしかった環境構築を
無くすことで学習に対するハードルを下げることができるのが非常に便利です。

https://www.katacoda.com/

更には、ブラウザで完結しているメリットだけでなく、ブラウザの中で、実際に実行するシナリオとコマンド
、ターミナル環境が1つの画面に表示され非常に操作しやすい環境となります。

Katacodaのインタラクティブな学習シナリオとサンドボックスを統合することで、ユーザーが使いやすく、
新しいテクノロジーを快適に学習しやすい工夫がされていると思います。
https://www.katacoda.com/learn

書籍や学習コンテンツを提供している企業で有名なオライリーがkatacodaを買収したことも納得できます。

3. katacodaに登録されているコンテナ周辺技術をブラウザだけで動かしてみる

kubernetesを中心としたコンテナ周辺技術は機能が豊富な上に目まぐるしく進化しているので
キャッチアップも大変かと思います。

例えば、マイクロサービスのネットワークをシームレスに接続、管理するIstioなどを
簡単に触れてみるというのもkatacodaを利用して学習することができます。

こちらの内容は、Istioの環境をセットアップすることなく、ブラウザのみで
環境をセットアップして必要な設定やポッドの状態、状態を管理する画面
などのイメージを把握することができます。

4. Istioのチュートリアルの流れ

以下の手順でシナリオが作成されており、左側に記載されているシナリオと実際のコマンドを
実行すると右側に動作結果が表示される流れになります。コマンドライン、GUIでの動作確認それぞれ
を確認することができます。

1. シナリオを選択する

Get Started with Istio and KubernetesからStart Scenarioを選択する

2. シナリオの環境をセットアップする

左側のStepからenterマークか実際にコマンドを入力して進めていく

3. Istio関連の必要なリソースを設定する

Istio関連のtools,Istio CRD,などをcreateしてistio-system上にpodをデプロイする

4. podの状態を確認してSTATUSがRunningになっていることを確認する

5. サンプルアプリケーションのbookinfoサービス画面を表示する


6. Routing設定のためにVirtualServiceを設定する

7. Istioの状態をPrometheusのダッシュボードで確認する

8. Jaeger UIの起動

9. weavescopeのインストールと画面を表示する

10. シナリオの終了

5. katacodaの環境構築の流れ

上記までの流れは、katacodaサイトのチュートリアルを利用してkatacoda全般の
機能を見て頂きましが、これからは個別に学習コンテンツ作成して、個別のチュートリアル
サイトを構築する流れとなります。

5.1. コンテンツを作成するプロファイルを作成する

サイトを構築する上でプロファイルを作成してログインします。
https://katacoda.com/create

5.2. Git Webhookを手動で構成する

Githubリポジトリを手動で作成してKatacodaに接続する必要があります。
最初の段階として、Githubのリポジトリを作成して、次に、Webhookを構成します。
すると、GithubのコミットをマスターにプッシュしたときにKatacodaがプロファイルを
自動的に更新できるようになります。

5.2-1. Githubリポジトリを作成する

Katacodaシナリオ用に新しいパブリックまたはプライベートのGithubリポジトリを作成します。
実際にアクティブなレポジトリの例は以下となります。

https://github.com/BenHall/katacoda-scenarios
こちらのようなリポジトリが作成されるイメージとなります。
まずは初期レポジトリを作成します。

5.2-2. Github Webhookを作成する

Webhookの設定内容は以下の通りとなる。
https://www.katacoda.community/author-profile.html#configuring-git-webhook-manually
※詳細は公式のマニュアルページをご覧ください。

5.2-3. Githubレポジトリに変更を加える

GithubリポジトリとWebhook、Katacodaの設定が完了した後、
リポジトリに変更を加えると、プロファイルページに自動的に表示されます。
リポジトリの変更は、git add/git commint/git pushなど、
普段、皆さんが行っているgitの操作と同様に変更します。

5.3. Githubのレポジトリ構造を把握して変更を行う

レポジトリ構造の詳細は公式のマニュアルページをご覧ください。
https://www.katacoda.community/git-repository-structure.html#scenarios
ポイントは以下となります。

最も一般的なケースは、katacodaシナリオを含む1つの個別のリポジトリを持つことです。
シナリオはリポジトリgitのルートのディレクトリに配置する必要があります。

シナリオは共通の主題によってグループ化でき、これはコースで表されます。
katacodaコースは、経路ファイルを作成することによって定義されます。
経路ファイル(xxxx-pathway.json)は、コースに含めるシナリオとそれらを表示する順序を定義します。

あまり余計なコメントが多いと混乱しますので、上記のマニュアル通りに実施すると
問題なく動作すると思います。  

6. サポートされる環境を適応する

シナリオで利用するコンテナイメージは以下公式のマニュアルに記載のものを選択することができます。  
シナリオのindex.json内にあるimageidを利用して指定します。  
https://www.katacoda.community/environments.html#deprecated-environments

更に、環境をカスタマイズする場合は以下公式のマニュアルに記載の手順で実施します。
但し、利用にあたっては有償のサブスクリプション契約が必要となりますので無償での利用は基本できません。
https://www.katacoda.community/custom-environment.html#base-images

レポジトリ構成としては、以下の通りbuild用の.shとkatacoda.yamlが必要となります。
※詳細は公式のマニュアルページをご覧ください。
├── exampleenv1 ※カスタムイメージのトップディレクトリ
│ ├── build
│ │ ├── 1_installpackages.sh
│ │ ├── 2_pulldockerimages.sh
│ │ └── 3_pulldemos.sh
│ └── katacoda.yaml

開発向けのトライアルサイトで利用しているkatacodaの機能

そもそも、ここで記載している開発向けのトライアルサイトですが、
冒頭でも少し記載しました通り、以下のような要望があるサイトを構築する
場合にkatacodaを利用すると以外に早く手軽に構築できるのではないか
という発想でプロトタイプの導入を行っております。

要望1:現行のサービスに複数のAPIがあるがトライアルとして利用してもらえる簡単な環境がない
要望2:kubernetes他、コンテナ関連の新しい技術を活用したトライアルサイトを簡単に構築して外部に公開したい
要望3:トライアルサイトを低コストで提供するためにある程度完成されたOSSや無料サービスを活用して構築したい
要望4:ハンズオンラボなどの環境をサンドボックとして手軽に提供したい

システムの全体イメージ

赤い点線部分がkatacodaをカスタマイズしている環境となります。

利用しているkatacodaの機能

環境をカスタマイズできるカスタムイメージ

全体イメージの中に記載しているSandbox用(ターミナル)は環境をカスタムイメージを利用して構築します。
Ubuntu18.04またはCentos7のベースイメージを利用するとDockerランタイムがプリインストールされているため、
こちらに追加でカスタマイズしていきます。

※注意が必要なのは、こちらの環境を利用するには、有料のKatacodaサブスクリプションが必要となります。

利用するには、まず、Github上にenvironmentsリポジトリにというディレクトリを作成します。
その中にはbuildとkatacoda.yamlでカスタムイメージを作成します。
├── exampleenv1
│ ├── build
│ │ ├── 1_installpackages.sh
│ │ ├── 2_pulldockerimages.sh
│ │ └── 3_pulldemos.sh
│ └── katacoda.yaml

環境に対応するディレクトリ内にkatacoda.yamlファイルを作成し、ベースイメージを定義します。

katacoda.yaml

base: 'ubuntu1804'
以下のスクリプトには、それぞれカスタムイメージを作成する上で必要なインストールコマンドを記述します。

1_installpackages.sh

apt-get update
apt-get install -y vim

2_pulldockerimages.sh

docker pull nginx

3_pulldemos.sh

docker pull katacoda/docker-http-server

4_configure_environment.sh

docker run -it -d --name=http -p 80:80 nginx
EOF
chmod +x /opt/configure-environment.sh

7. katacodaの画面をトライアルサイトのGUIに埋め込む

今回はプロトタイプということでWordPressを利用して簡単に埋め込む動作検証を実施しておりますが、
公式のマニュアルを参照しながら以下のように埋め込むことが可能です。

公式のマニュアルに記載
https://www.katacoda.community/embed.html#line-1-include-script-tag
上記のマニュアル上にも記載されてますが、以下のようにScriptタグで埋め込むことが可能となります。
<div data-katacoda-id="(katacodaに登録したユーザー名)/(シナリオ名)" id="katacoda-scenario-1"></div>

ポータルサイトのユーザー情報をkatacodaに転送

全体イメージにも記載されておりますが、katacodaのシナリオおよびチュートリアルのサイトをポータルサイト(WordPress)に
埋め込む以外にポータルサイトのログイン情報(ユーザー情報他)をkatacodaのシステムに渡す必要があります。

"data-katacoda-command" タグでターミナルが起動した際に実行するコマンドを指定する事が出来ます。
例として、環境変数にWordPressのユーザー名を渡すショートコードを記述します。

function katacodaFunc() {
$current_user = wp_get_current_user();
return '
<div id="katacoda-scenario-1" data-katacoda-env="bash">user_login.'"
style="height: 600px;"
&gt;</div>';
}
add_shortcode('katacoda', 'katacodaFunc');

8. まとめ

さて、いかがでしたでしょうか。
今回はkatacodaを利用してのトライアルサイトの構築を行ってみましたが、ポイントは以下の通りです。

・katacodaはブラウザで完結する学習プラットフォームでこれだけでも新技術を簡単に環境を作らずに学ぶことができる
・katacodaのシナリオおよびターミナルはセットアップが不要でスキルを早く習得したい場合に非常に役立ちます。
・サンドボックス環境をターミナルとしてカスタマイズ利用してますが、既存のシステムと分離することでリスクを排除できる
・カスタマイズ環境は環境に合わせて柔軟にカスタマイズできるが、まだまだ、提供しているディストリビューションやアプリケーション
が少ないので今後の発展が楽しみなところです
・無料版と有料版で機能の差がありそうですが有料版のエンタープライズ向けの機能が全て公開しているわけではないので今後継続して
検証してみる価値はある

9. 終わりに

本記事では、katacodaの基本的な内容と、katacodaをカスタマイズ利用したトライアルサイトの
構築について紹介させて頂きました。
katacodaは未知数なところが多いですが、オライリーに買収されたことで今後更なる機能追加も期待できますし、
学習サイトとしてのチュートリアルだけでなく、個別にカスタマイズした環境を外部システムと連携できるのに
役立つ機能も期待したいところです。

CL LAB Mail Magazine

CL LABの情報を逃さずチェックしよう!

メールアドレスを登録すると記事が投稿されるとメールで通知します。

メールアドレス: 登録

※登録後メールに記載しているリンクをクリックして認証してください。

Related post