[レポート]SVS203-R: Getting started with serverless ワークショップに居残りで参加しました #reinvent

アノテーション、テクニカルサポートチームの村上です。

re:Invent 2022 から帰ってきて、3 週間が経ちました。
今回、re:Invent に参加できたことで沢山の素晴らしい経験をさせていただいたのですが、一つだけ心残りがありました。その心残りとは、「もっとワークショップに参加したかった」、です。
そんな気持ちでいた時に、下記の神ブログを見つけてしまいました。

セッションとして開催されるWorkshopの中には、ハンズオン手順がすでに公開されているものあります。

「ということは、公開されている Workshop をやれば、居残りで Workshop セッションに参加したことと同じじゃない？」、と思いさっそく取り掛かることにしました。
参加したい Workshop が公開済みかについて確認する方法も、上記ブログに記載があります。

選んだワークショップ

業務では、ネットワーク、データベース、データアナリティクスを担当しているのですが、普段あまり使うことのないサービスを触ってみたいと思い、サーバレス入門のワークショップを選んでみました。

Getting Started with Serverless

In this workshop, create your first serverless web application using AWS services like Amazon API Gateway, AWS Lambda, and Amazon DynamoDB. Learn modern development techniques to build, secure, deploy, and monitor a serverless application, and take away serverless best practices that can be applied to your own projects. Come see how quickly you can turn your ideas into working products with serverless application development. You must bring your laptop to participate.

このワークショップでは、Amazon API Gateway、AWS Lambda、Amazon DynamoDB などの AWS サービスを使用して、最初のサーバーレス Web アプリケーションを作成します。サーバーレスアプリケーションの構築、セキュリティ、デプロイ、監視を行うための最新の開発技術を学び、ご自身のプロジェクトに適用できるサーバーレスのベストプラクティスを持ち帰ることができます。サーバーレスアプリケーション開発で、あなたのアイデアをどれだけ早く実用的な製品に変えられるか、ぜひご覧ください。参加にはノートPCの持参が必要です。

ワークショップ概要

Application Architecture

Modules

This workshop is divided into multiple steps. Each step describes a scenario of what we're going to build and step-by-step directions to help you implement the architecture and verify your work. The steps must be performed in order for the workshop to be successful.

1. Install prerequisites
2. Build a serverless backend
3. Configure a Lambda Authorizer
4. Build and deploy the web application
5. Test the application
6. Configure Amazon Rekognition Integration
7. Terminate Resources

ワークショップやってみた

下準備

バージニア北部をリージョン指定し、Clod9 でワークスペースを作成します。
ここでの注意点は、インスタンスタイプに t3.medium を選択することのみです。

Cloud9 でターミナルを立ち上げることができました。

Node.js のバージョンも、本ワークショップで推奨されている v16.x.x であることが確認できました。
以下、Node.js のバージョンの確認以降、下準備で実施した作業となります。（意外と多かった）

・Clone the Git repository
・Avoiding free space issues with Cloud9
・Install Amplify CLI

Amplify CLI のインストールに関しては、IAM のマネジメントコンソール上での操作もあった為、動画を観ながら一歩一歩進めていきました。

Step 1: Build a serverless backend: AWS Lambda, AWS SAM

Step 1 の冒頭では、SAM テンプレートの構造について詳しい説明がありました。
特に手を動かすところがない為、サッと流し読みで済ませました。
ワークショップを進めていく中で、不明な点が出てきたら読み返す方が良さそうです。

Define a DynamoDB table

ファイル sam/template.yaml の Resources セクションを一部編集して、DynamoDB テーブルを定義します。

Create a Lambda function

下記のコードで Lambda 関数を作成してから、DynamoDB テーブルと同様に SAM テンプレートの Resources に追加しました。

Step 2: Configure API authorization: API Gateway

ワークショップドキュメントに記載してある Lambda Authorizer のコードを sam/src/auth/app.js ファイルに貼り付けます。
Lambda Authorizer は、Lambda 関数を使用して API へのアクセスを制御する API Gateway 機能です。

Step 3: Build and deploy a web application: AWS Amplify

Step 3 の概要

このステップでは、SAM を使用してサーバーレスアプリケーションスタックを構築し、デプロイします。そして、API Gatewayのエンドポイントと通信するようにWebアプリケーションを設定します。その後、Webアプリケーションを構築し、Webアプリケーションの静的リソースをホストするためにAWS Amplifyを設定します。

Deploy the Serverless Application

SAM CLI を利用して、サーバレスアプリケーションをビルド & デプロイします。
sam buildを実行します。

sam deploy --guidedを実行して、デプロイも無事に成功しました。

Configure the API Gateway endpoint

先程実行した Build の Outputs に記載がある API Gateway エンドポイントの URL を控えて、/webapp/src/main.js ファイルを以下のように編集しました。

Build the web application

npm run buildを実行して、Web アプリケーションのデプロイを実行します。

Initialize Amplify

amplify initを実行して、Amplify を初期化します。
アプリに関するいくつかの情報を求められますので、それぞれ入力すると初期化に成功しました。

Add Amplify hosting

amplify add hostingを実行して、Amplify ホスティングを追加します。
上記コマンドの実行結果については、ターミナル上で表示されるメッセージがドキュメント記載のメッセージと異なっていた為、スクリーンショットの掲載は控えることにします。
おそらく、これ以前の作業で私が何かドキュメントと異なる操作をしてしまったものと思われます。

Deploy the application

amplify publishを実行して、アプリケーションをデプロイします。

アプリケーションのデプロイに成功しました！！！
「デプロイしました！」というよりは、デプロイできちゃった感が凄いです、、、

Step 4: Test the application

デプロイ完了後に表示された URL へブラウザからアクセスすると、ちゃんとログイン画面が表示されました。

認証バックエンドが構成されていないので、任意のユーザー名とパスワードでログインが可能です。

試しにタスクを作成してみます。
Title と Body に大掃除の予定を入力し Create task ボタンを押下すると、ちゃんと新しい My Tasks に追加されました。

Create task ボタンを押下した後の処理は以下のようになります。

1. POSTリクエストが、/tasksAPI Gateway エンドポイントに送信されます。
2. リクエストが Lambda authorizer によって認証されます。 Authentication:Bearer HTTP ヘッダーが使用されます。
3. リクエストの本文が CreateTaskFunction Lambda 関数へ転送されます。
4. タスク データは DynamoDB テーブルに保存されます。
5. HTTP 200 (成功) 応答が、Web アプリケーションに返されます。
6. Web アプリケーションは、/tasks エンドポイントGETへの要求を実行して、タスクのリストを更新します。
7. ここでも、リクエストは Lambda オーソライザーによって認証され、リクエストは GetTasksFunctionLambda 関数に転送されます。
8. Lambda 関数 GetTasksFunction は、認証されたユーザーのタスク一覧を DynamoDB のテーブルから取得します。

Viewing the data in DynamoDB

DynamoDB コンソールにおいて、アプリから登録したデータが DynamoDB のテーブルに反映されているか確認してみます。


アプリで登録したタスクが DynamoDB テーブルにアイテムとして登録されていることが確認できました！

まだ、この後もワークショップは少しだけ続くのですが、サーバレスアプリケーションの実装としては十分に達成できたので、以上で本日のワークショップ居残り参加は終了したいと思います。

来週あたり、時間の関係でできなかったモジュール 6.Configure Amazon Rekognition Integration を含めて、復習してみます。

ワークショップ感想（自宅 or 現地参加）

ワークショップを自宅で実施するメリット

もともと手が早く動くタイプでは無いので、じっくり時間をかけて取り組めるは助かりました。
現地で参加したワークショップは、ラップトップの小さいディスプレイのみで画面の切り替えが大変だったのですが、自宅ではトリプルディスプレイで作業ができる為、情報が整理しやすかったです。

現地で参加するワークショップのメリット

現地参加のワークショップの良い点は、参加者みんなで取り組めるところでしょうか。
設定時間もシビアということもあり、周りが必死で進めているなか自分もできる限り終わらせたいという気持ちになります。
あとは、周りのエンジニアがみんな優秀に見えるので、「もっと自分も頑張らないと」、という気持ちになることですねｗ

まとめ

現地参加とは違った形でワークショップ（というかハンズオン）を体験できました。
手を動かしてみることで分かることは多いので、今後も公開されたワークショップに取り組みたいと思います。

参考資料

• AWS re:InventのWorkshopセッション参加のすすめ #reinvent
• Getting Started with Serverless