hakolateというタブレット端末向けのIDEを作りました
はじめに
現在、hakolateという教育向けに視点を当てたIDEを作っていて、学校等などの授業を想定しています。ここでは、作品作りで取り組んだことを書いてみます。
hakolateとは
hakolateはiPadなどのタブレット端末に焦点を当てた総合開発環境です。
GIGAスクール構想によって、iPadなどのタブレット端末が2020年頃に教育現場に普及し始めました。また、2022年度から情報Ⅰが共通必履修科目になり、共通テストにも登場することになりました。
そのような改革が進んでいる中で、教育現場はどうでしょうか。タブレットを渡されたは良いものの堅いMDMが入っていてコマンドプロンプトすら起動することが出来ない、iPadだから他の言語のランタイムが動かないなど、実際にプログラミングをすることが難しいです。
それなら、端末ではランタイムを実行させずにサーバ側で実行すればいいんじゃないの？っていうことで、今回hakolateを作りました。
シェル画面
エディタ画面
使った技術について
フロントエンドについて
低スペック端末にターゲットを絞った作品なのでサーバーサイドレンダリングが可能なフレームワークを選ぶことを前提として技術選定をしました。ここで選ばれたのはRemixでした。 UIライブラリはデザインが好きなのでChakra UIを選びました。 エディタはMonaco, ターミナルはXterm.jsを選びました。
認証について
IDaaSとしては、無難にAuth0を選びました。 作っていく中で、トレーナーとPasskeyが良いよねと盛り上がり、Passkeyをメインの認証としてサービスを作ろうということになり、Auth0はPasskeyをサポートしているものの、Passkeyをメインの認証として設定することは出来なかったので、自作してみたり、他のIDaaSを使ってみたりしましたが、どれもAuth0には勝てず、これを使っていこうという気持ちになりました。今後機会があれば、IDaaSも作ってみたいなと思ってます。
Passkeyを使ってログイン
バックエンドについて
Echoを使ってAPIサーバを立てて、Moby APIを叩いています。また、ユーザーとコンテナの紐付けをして、それをPostgreSQLに保存して、ログイン時にユーザー確認をしています。
CIについて
GitHub Actionsを用いて、mainブランチにpushされると、コンテナイメージを構築してAWS ECRにデプロイされる仕組みを整えました。ここでこだわったポイントとしてはIAMの認証において、AWSのシークレットを用いずにOIDCを用いた認証を代わりに用いることによって、シークレットの流失が起こらないようにしました。
Auth0で必要な.envに関してはBitwardenのSecrets Managerにシークレット情報を保存して、sm-actionを使って参照しました。
CDについて
AWS内で、ECRイメージが更新されるたびにApp Runner（フロントエンド）、Fargate（データベースとバックエンド）が自動デプロイされます。AWSの構築に関しては、Terraformを用いたIaCに取り組んでおり、tf applyを叩いて一発で構築することが出来ます。
このように構築することによって、Attack SurfaceをGitHubとAWSに絞ることが可能となりました。
運用コストを抑えるために
ランタイムの切り離し
当初の計画では、Kubernetesを用いたクラスターを構築して、そこでユーザーが入力したコマンドを走らせようと考えていました。しかし、パブリッククラウド各社のKubernetesサービスは学生の私にとってとても高価で毎月支払えるようなものではありませんでした。そのため、ランタイムサーバをユーザーがセルフホストする形を取りました。そのため、私がホスティングしているサービスは認証とユーザーの入力を個人が立てたランタイムサーバに渡すというものになります。
Devサーバの導入
開発時のコンテナランタイムの実行は自宅サーバで行ってました。
おうちインターネットと自宅サーバ
もともとTailscaleを使用していましたが、最近はIX2215を導入したので、DDNSを使ってVPN接続してます。サーバは元々利用していたデスクトップPCを再利用し、Firecrackerが動いています。
リリースに関して
現在、GUIの機能や管理画面、セルフホスト用のCLIを実装しており、それが終わったらプロジェクトをOSSにすることと一般公開をしようと考えています。
この機能についても試行錯誤しながら実装しているので記事にします。
おわりに
最後まで読んでいただきありがとうございました。
作品自体に興味を持っていただいた方は、3/2に行われるSecHack365 2023 成果発表会へ足を運んでいただけると嬉しいです。是非覗きに来てください。（事前登録が必要です）
Discussion