若手勉強会用資料。基本的にはリンク集です。 リンクが有効になっていなかったので上げなおしました。

1. サーバーレスアーキテクチャで
アンケートフォームを作ってみた
若手勉強会用資料

2. はじめに
• 今回の内容は、若手向けの初回としてはかなり難しい
→キーワードだけ覚えればOK
• 次回からは基礎からやるので安心
• ネット上に情報があるものについて話すのでスライドはリンク集

3. アンケートフォームを作るのに必要なもの
• 何が必要だと思いますか？

4. アンケートフォームを作るのに必要なもの
※javaで作る場合のサンプル
• サーバーサイド
• Webサーバー
• apache(アクセスを処理する)
• Tomcat(javaを動かす)
• javaで作ったプログラム
• DB
• クライアントサイド
• ブラウザ上で動くアンケートフォーム(jsp等)
• その他ダイナミックDNS設定などなど……。
→ 1週間くらいかかる

5. サーバーレスで作る場合
※AWSで作る場合
• サーバーサイド
• API Gateway(アクセスを受け付けるところ)
• AWS Lambda(関数を書くだけでプログラムが動く)
• Amazon DynamoDB(RDBではないDB。キーと値のセットで使う)
• クライアントサイド
• ブラウザ上で動くアンケートフォーム(html, js等)
• その他AWSへの料金はかかる → 1日でできる！

6. キーワード
• サーバーレスアーキテクチャ
• https://www.publickey1.jp/blog/18/serverless.html
• "サーバーレスというよりサーバーエンジニアレス"
• https://kurochan-note.hatenablog.jp/entry/2016/08/30/191000 より引用
• "イベントドリブン的な考えを推し進める事でよりそのメリットを最大化"
• https://dev.classmethod.jp/cloud/aws/serverless-real-merit/ より引用
• FaaS PaaS IaaS
• https://knowledge.sakura.ad.jp/15940/

7. 大まかな構成図
利用者のブラウザ上
HTML
CSS
JavaScript
Ajax
※ページはそのままでJavaScript
で裏で通信している
API
Gateway
AWS
Lambda DynamoDB

8. 大まかな構成
• アンケート入力ページ
• 選択肢から次回の勉強会のテーマで取り扱ってほしいものを一つ選んで送
信
• 裏でAjaxでアンケート結果登録APIにアクセス。登録が正常終了したら結果ページに遷
移させる。
• アンケート結果ページ
• ページのロードが終わるとJSが動く
• Ajaxでアンケート結果取得APIにアクセス。全結果を取得し、各テーマの得票数を表示
する。

9. キーワード(というほどでもないですが)
• Ajax
• 初心者目線でAjaxの説明
• https://qiita.com/hisamura333/items/e3ea6ae549eb09b7efb9
• REST API
• 0からREST APIについて調べてみた
• https://qiita.com/masato44gm/items/dffb8281536ad321fb08

10. アンケートフォーム構築
• 以下サイトを元にAWS関係設定
• AWSのLambdaとDynamoDBとAPIGatewayの連携
• https://qiita.com/tentatsu/items/c45bcc4062f1a6d4cf2a
• Javaの人なのでLambdaはjavaで書こうかと思いましたが、Lambdaのweb上のエディタで
さっくり作りたかったので例の通りNode.jsで行きました。
• node.jsは初めてだったので他のページも参考にしました。
• 初めての、LambdaとDynamoDBを使ったAPI開発
• https://qiita.com/miutex/items/d80c9ff0290966eb0cf8
• こちらには取得の時のコードも書いてあるので組み合わせたら行けました。

11. HTMLの配置
• 頑張らないが目標だったので背景色だけCSSで指定し、他はほとん
ど素のHTML
• JSはとりあえずJQueryで$.post()とか$.get()を使用
• できたものはS3に配置し適当に公開
• corsエラーとやらで動かない
• 公式のページを基に修正して動くように
• https://docs.aws.amazon.com/ja_jp/apigateway/latest/developerguide/how-to-
cors.html

12. 完成！
• 当日はURLをQRコードにして見てもらえるようにします。

13. 所感
• 古風なやり方に比べるととても早く構築できる。
• AWSが全部管理してくれるので楽。
• サーバーで複雑な処理をしないのなら、フロントエンドエンジニアが
一人でサービスを作れそう。
• 実際に業務で使われるようになるにはもう少し時間がかかりそうな
目新しい技術を触って楽しかった。