サーバレスやってみた

やあ
ようこそ開発環境へ

このページは
13日目の記事です

担当はMice2011代のbraggswanです
よかったらフォロミー

早速本題です
サーバレスやってみた
ものはこれです
動作確認済:Chrome、スマホChrome(PC版サイトとして表示)、Firefox

よかったらポチポチしてみてください

背景

会社が教育用にクラウド環境を作ってくれて、強めの権限をもらえたので何か作ってみたいなーと思ってました。
最初はKubernatesを使ってみようと思ったのですが、いい感じの構成が思いつかなかったので、最近よく聞くサーバレスとやらをやってみようと思いました。
ちなみにKubernatesをAWSでやると現時点で月1.4万ほどかかるらしい...(クラスタを起動しっぱなしの時)
恐ろしかったので注意を引くロール名を作っておきましたw(getsugaku1.4man-eks-role)
eksrole.png

サーバレスとは...
サーバを完全に意識しないレベルまでクラウド化した状態(システムアーキテクチャ)だと思ってください。
例えば仮想サーバにアプリケーションやコンテナが乗ってしまうと、仮想サーバのメモリやCPUを意識しないと(監視しないと)いけなくなりサーバレスではなくなります。

何をやったのか...
マウス機体の画像を表示して機体名を当てるクイズを作りました!
ってやろうと思ったのですが、ちょっと中途半端な状態です。jpgにも対応したかった。。。

機能紹介

画像登録  pngだけ対応してます、、
register.png
IDと名称をフォームに入力して(①②)、登録したい画像を読み込んで(③)[画像登録]ボタンを押してください(④)。
サーバレスに登録されていきます。
本当にサーバレスなのかと思うかもですが、サーバレスです。はい。

検索参照機能
find.png
IDを入力(①)して[IDで検索]ボタンを押して(②)ください。
サーバレスに参照されます。サーバレスです。

回答機能
ansdemo.png
事前に検索参照しておいてください。
名称フォームにその画像の名称(①)を入れてください。
[画像名称回答]ボタン(②)を押します。
名称があっていれば正解が出ます。

本当は欲しかった機能...
ランダムに画像を参照して、それの名称を当てる感じにしたかった。。。
jpgにも対応したか...

より詳しくな部分:アーキテクチャ説明


当初構成と最終構成を説明します。

当初構成
web → APIGateway → Lambda → S3
ark1.png
S3とは...
AWSのストレージの名称です。
細かいことを抜きにすればGoogle Driveだと思ってください。(怒られそう)

Lambdaとは...
S3へのファイル配置や、後述のAPIGatewayでのキック、時刻でのキックなどをトリガーにして、javaやC#、Pythonなどのコードを実行できるサービスです。
コードが実行されるだけ=コードだけ実装すればよいため、サーバやNW設定のことは気にしなくても動きます。

APIGatewayとは...
APIを自作するサービスだと思ってください。
例えばとあるURLにPOSTリクエストすると、Lambdaを起動するだとか、GETリクエストするとS3のファイル情報を取得するとかを作りこむことができます。 

構想
こんな構想でした。
・webでローカル端末の画像を読み込み保存
・S3の要素数を取得
・要素数内のランダムな数字をキーにしてS3からファイルを取得
・S3のタグ情報とフォームの情報を突合して回答

問題点
・S3のタグ情報(Value)が取得できない

S3の要素数カウントするとかは実装できたのですが、タグ情報について数しか取得できないようで構想を断念しました。

最終構成

web → APIGateway → DynamoDB
ark2.png
DynamoDBとは...
KVSのDBです。特徴としては、テーブル名と一意のキーだけが決まっていて、他の要素は固定化されておらず、好きに登録できます。
登録されたデータは例えばこんな感じ。この例の場合「id」がString属性の必須項目で他はどんな属性でもどんな要素数でもデータを入れられます。
dynamo1.png
構想
・webでローカル端末の画像を読み込み保存(回答も「name」という項目で登録)
・idから画像を読み込み(回答も同時に取得)
・フォームの情報を突合して回答を確認

まとめてきな

大変だった点...
作業期間は10日間ほどで、ちょびちょびと進めていたのですが初めて触ったところがやっぱりきつかった。特にクライアントサイドのjavascriptは全然触ったことがなく、作業時間の7割くらいはそれでした。canvas.toDataURL、お前だけは許さない。(一番はまったところ。表示してる画像だけを変換するので、本来のデータが欠ける)
APIGatewayから直でDynamoDBにデータを格納するところ(DynamoDBへのリクエストマッピング)はネットに情報がなく、部分的な情報をかき集めて実装しました。Quiitaに記事投稿しようかな。

良かった点...
気になっていたDynamoDBとかLambdaに触れたこと。触ってみると設定は簡単で、会社でそんな話が出て来ても、もう怖くないなと思えるようになりました。
会社ではAdmin権限がないアカウントを使っているので、ロールとかポリシーとかに触れられず良く分かってませんでした。一からサービスを作る際にはその辺の設定が必須となるので、今回触れたのは良かったです。

最後に
AdventCalender初めて参加しましたが、期限感をもって頑張れたのでいい企画だなと思いました。
最近進捗出せてないですがマウスも頑張ります
進捗はこっちのブログで更新していきます


コメント

非公開コメント

プロフィール

thisisdev

FC2ブログへようこそ!

カテゴリー

月別アーカイブ