こんにちは。エンジニアのごえです。
今回はAWSサービスであるAWS Amplifyを使ってみたので感想の共有です。
AWS Amplifyは、ウェブやアプリケーションを簡単に作って公開できるツールセットです。この記事では、以下の構成で「ボタンをクリックすると文章が表示される」という挙動を実装しようとしています。
この記事では大まかなサービス説明と、構築の流れを紹介します。実際のコードを紹介していないのですが、理由は成功していないからです泣
試行錯誤を繰り返して惜しいところまでは実現できたのですが、想定の挙動にならたいので実際のコードは伏せています。次回作までに完成すれば公開できたらと思っています。
もしAWS Amplifyというサービスをご存じない方がいらっしゃったら、ふーんそんな感じで使うのか、といった雰囲気を感じていただけたらと思います。
【各サービスの役割】
AWS Amplify:
今回メインとなるサービスです。フロントエンドアプリケーションをホスティングするためのサービスです。ユーザーがウェブアプリケーションにアクセスするとき、AWS Amplifyからコンテンツが提供されます。
Amazon API Gateway:
APIのエントリーポイントとして機能し、外部からのリクエストを受け取ります。このリクエストをAWS Lambdaに渡してトリガーとして動作します。
AWS Lambda:
サーバーレスコンピューティングサービスで、API Gatewayからのリクエストを受け取り、特定の処理を実行します。今回は選択されたリクエストを処理し、Amazon DynamoDBに対してクエリを実行します。
Amazon DynamoDB:
Lambda関数が必要なデータをDynamoDBから取得します。最終的に、DynamoDBに格納されているデータをAWS Amplifyを通じてユーザーに返します。
ステップ1：AWS AmplifyにHTMLファイルをデプロイ
まずは、ユーザーに見える画面を作ります。AWS Amplifyに画像のようなボタンを設置します。ボタンをクリックするとAPI Gatewayを呼び出すようにします。
→このURLでAWSAmplifyがAPIGatewayにアクセスします
ステップ2：Amazon API Gatewayの設定
画面のボタンをクリックすると、そのリクエストをAPI Gatewayが受け取り、その後Lambdaに渡します。
ステップ3：AWS Lambdaに関数をデプロイ
API Gatewayからトリガーを受け取ったLambdaはDynamoDBに格納されている文字列を取得し、API Gatewayに投げ返す挙動をとらせます。
関数の中身↓
ステップ4：DynamoDBに文字列を格納
ブラウザでボタンをクリックしたときに表示させる文字列を格納しておきます。
表示させる文字列（クリック完了）にIDを割り振っており、このIDを頼りにLambda関数が文字列を取得する流れです。
結果
ボタンをクリックすると「Message not found」と表示されてしまいます。
Lambda関数のテスト動作では想定の文字列が返ってくることを確認済みで、API Gatewayも問題なく動作しているようでした。各サービスの権限などに問題があるのか、、、
感想
今回は失敗に終わってしまいましたが、もう少し頑張ってみようと思っています。
AWS Amplifyの使い心地ですが、HTMLのファイルをドラッグ＆ドロップでデプロイできるので非常に便利です。
小難しい設定が自動化されているので、とりあえずデプロイしたいという場合に便利だと感じました。コンテンツ制作者の方の味方です。
お読みいただきありがとうございました。
