⚙️

AWSの構成図からワンクリックでリソースを作成できるサービスを作ってみた

2020/10/24に公開

AWS

この記事について

AWSを学習しているときに構成図を見て、「この構成図にタグとかスペックを設定できて、ここから直接リソースを構築できたらいいのに！！」と思ったことがあるのは私だけでしょうか？
今回は、そんなサービスを作ったのでその紹介になります。

URL: https://guinfra.app
フィードバック: https://forms.gle/iqHVrFQRjkNKWefA8

(グラフ作成機能があったりキーの入力等の操作が必要だったりするので、PCからのアクセスを推奨しています！スマホからの方すみません🙇‍♂️)

自己紹介

鎌谷天馬と申します。N高等学校の3年生です。
2020年度の未踏ジュニアに採択していただき、今年の6月から「GUInfra」というクラウドインフラ学習サービスを開発してました。

Twitter ← フォローしてください！

GUInfraとは

クラウドインフラについての現状と課題

昨今、AWSやGCPをはじめとするクラウドインフラが盛り上がっています。AWSが落ちたときはTwitterのトレンドにも上がったりと、ITについての知識の有無に関わらずとも最低限知っている単語の一つにもなっているようです。
クラウドインフラを学習することで、個人開発をしたサイトのデプロイができるようになったり、単純に雇用が増えたりと様々な利点が存在します。にもかかわらず、巷ではAWSなどのクラウドインフラは難しいといった意見が多いようです。

そこで、私はこの原因を以下の二つに分析しました。
①VPCやIAMなどの、独自概念を理解するのが難しい
②コンソールが複雑。初学者にとって選ぶ必要のない選択肢も多数存在する

GUInfraは、以上の課題を解決するサービスです。

どんなサービス？

GUInfraは、自作のグラフ作成ツールを提供してAWSの構成図を作成してもらい、実際にキーを入力してリソースの構築、破棄ができるようにしてそれを繰り返していただくことで、クラウドインフラ(現在はAWSのみに対応)の学習をサポートします。
また選択できるリソースやそのプロパティを初学者にとって学ぶのに必要な最小限のもののみに限定しているため、複雑なコンソールに悩むことなしにスムーズに学習を進めることができます。リソースは、「自力でネットワークを構築してEC2に静的なサイトをデプロイできる最低限のリソース」を意識して6つに選び抜きました。

実装について

以下にコード公開しています。

Next.js / TypeScriptで実装していて、デプロイはnowを利用しています。
グラフ作成の部分は、react-rndと言うライブラリを、そしてAWSとの通信はAWSが公式で出しているaws-sdkを利用しています。
デプロイに利用したnowはNext.jsにも対応していて、コマンド一発で簡単にデプロイできるだけでなく、Dev環境とProd環境を分けることができたり、Prod環境の方にドメインを設定できたりと、開発体験がめちゃくちゃ上がるのですごくおすすめです！

今後の展望、課題

リリースしたばかりなので、まずはユーザの生の声を聞きたいと思っています。使っていただけた方、是非右下のフィードバックフォームから感想を送っていただければと思います！！
このバージョンではVPCやEC2などの基本的な知識については前提となっているため、本当に初学者の方に対する誘導はまだ存在しません。なので、各リソースへの説明や教科書的なものを実装したいと思っています。

作ってみて

グラフ作成機能やAWSとの通信機能など、シンプルなWebサービスとは違った独特な機能に開発が手こずったことはあったものの、私が求めていた機能を実現することができました。しかしまだ私の仮説を実現した段階であるため、様々な人からのフィードバックを得て、より良いサービスに進化させていきたいと思っています！
使っていただけた方、最初に貼ったフォームからフィードバックをくださるとめちゃくちゃ嬉しいです！！