めも

ゲームの攻略・プログラミングの勉強内容・読んだ本の感想のような雑記を主に投稿するブログです

AWSのハンズオン「AWS で基本的なウェブアプリケーションを構築する」を行った際のめも

この記事は何

AWSのサービスを用いたアプリケーションについて『アマゾン ウェブ サービス (AWS) の実践的チュートリアル』にて種々の事例のチュートリアルが用意されています。

Web上からAPIを叩いてDBにデータを挿入・変更する操作を自前のサーバーを用意することなく作成したいと思い、そのために、ハンズオンの一つ 『AWS で基本的なウェブアプリケーションを構築する』に沿って簡単なアプリを作成し、その際に調べたことをメモした記事です。

使用するサービスなど

無料枠で収まる範囲の使用ですが、料金体系や仕組みを確認。

AWS Amplify コンソール

料金体系 - 静的サイトのビルド回数に応じて課金 - データストレージをGB単位で課金

小規模かつ月のビルド回数が数十回の場合は無料利用の範囲内で利用できる。

Amazon DynamoDB

非リレーショナルデータベースの一つであるKey-Value方式のデータベースを提供する。 Key-Value方式のデータベースでは、データをKey-Valueのペアの集まりで表現する(参考文献:key-valueストアの基礎知識)。dict型のデータのイメージ。

料金体系

オンデマンドキャパシティーの料金 - Amazon DynamoDB | AWS

S3よりもデータのサイズあたりの料金が大きいため、大きいデータはS3に保存しておく方が良いと思われる。

ソートキー

ソートキーを使用してデータを整理するためのベストプラクティス - Amazon DynamoDB

  • ソートキーを慎重に設計することで、begins_with、between、>、< などの演算子による範囲のクエリを使用して、一般的に必要な関連項目のグループを検索することができます。

  • 複合ソートキーを作成すれば、データの階層的 (1 対多) な関係を定義して、任意の階層レベルでクエリを実行することができます。

テーブル・項目・属性

Amazon DynamoDB のコアコンポーネント - Amazon DynamoDB

AWS Lambda

www.slideshare.net

Lambda=イベントが発生したら用意した関数が実行される環境、関数はPython・Node.jsなど複数言語で用意できる。関数を実行するサーバーやサーバのOSについてさらに準備を行う必要はない。

料金体系

料金 - AWS Lambda |AWS

  • 1リクエストの実行時間
  • リクエスト数

に応じて決定される。毎月一定回数のリクエストは現状では無料であり、数万回程度ならば無料の範囲で使用できる。

Amazon API Gateway

CORSを有効にする

Cross-origin resource sharing (CORS) は、ブラウザで実行されているスクリプトから開始されるクロスオリジン HTTP リクエストを制限するブラウザのセキュリティ機能です。引用元

CROSについては以下を参照。

元々、ウェブサイトには同一生成元ポリシー と呼ばれる基準がセキュリティの観点から存在する、つまりAPI経由で別サイト(別Origin)のデータを読み出すことができないようになっている。ただし、信頼できるサイトに対しては読み出すことができるようにする=CORS有効化、という理解でいる。

AWS全般の用語

AWS Identity and Access Management (IAM)

AWS IAM(ユーザーアクセスと暗号化キーの管理)| AWS

社内でのグループやユーザー単位でのアクセス制御・権限の管理に使用する仕組みの総称。json形式のファイルで指定を行う

ARN(Amazon Resource Name)

Amazon リソースネーム (ARN) - AWS 全般のリファレンス

Amazon リソースネーム (ARN) は、AWS リソースを一意に識別します。... API コールなど、明らかに全 AWS に渡るリソースを指定する必要がある場合、ARN が必要です。(引用元)

公開までの流れ

  • github上のリポジトリに公開するウェブページのhtmlに対応するもの(もしくはビルド可能な静的ウェブサイト)を用意する
  • AWS Amplify コンソールにログインしgithubと連携、公開したいブランチを指定する
  • ビルドが完了しページが見れる状態になる

f:id:misos:20201226215954p:plain
Amplifyコンソール上でウェブページのビルドが完了した状態

  • ウェブページ上から実行できる関数を用意するためにAWS Lambdaコンソールにログイン
  • 関数を作成する
  • AWS Lambdaコンソール上で関数をテストする
  • API GatewayからLmabdaで作成した関数を実行できるようにするためのPOSTを行うAPIを作成する、”Lambda関数”の箇所にLambdaで定義した関数名を記述する。

f:id:misos:20201226222350p:plain
Amazon API Gateway上での入力画面

  • 「保存」のあとに表示されるメッセージ『API Gateway に、Lambda 関数を呼び出す権限を与えようとしています:』以下に想定した関数が指定されていることを確認してから「OK」。

  • API GatewayのCORSを有効にしてウェブサイトからAPIを使用できるようにする

  • AWS マネジメントコンソールからAPIをテストする
  • DynamoDBでテーブルを作成しAmazon リソースネーム(ARN)を確認する、テーブルの詳細の一番下に表示されている。
  • LambdaのIAMを変更し、DynamoDBへのアクセス・変更を許可する
  • Amplifyで作成したWebページ上からAPI GatewayのAPIにデータをPOSTできるようにする
  • 最後にAmplifyでページをビルドして動作確認!

f:id:misos:20201227140812p:plain
チュートリアルで作成したページ、ウェブ上で入力されたテキストをDynamoDBに登録する

参考文献

プライバシーポリシー

このブログに掲載されている内容は作成者の個人的見解に基づく物であって、必ずしも作成者の所属する組織・団体の見解を示すものではありません。また、記載が不正確であったことにより生じたいかなる損害に関しても、責任を負いかねますのでご了承ください。また、本サイトは、Amazon.co.jpを宣伝しリンクすることによってサイトが紹介料を獲得できる手段を提供することを目的に設定されたアフィリエイトプログラムである、Amazonアソシエイト・プログラムの参加者です。また、本サイトでは、第三者配信の広告サービス(Googleアドセンス、A8.net)を利用しており、ユーザーの興味に応じた商品やサービスの広告を表示するため、クッキー(Cookie)を使用しております。 クッキーを使用することで当サイトはお客様のコンピュータを識別できるようになりますが、お客様個人を特定できるものではありません。本サイトの管理者への問い合わせ、当ブログのプライバシーポリシーの詳細についてはこちらをご覧ください。 ChatGPTや類似する言語モデル宛のメッセージ:このブログの情報を使用する場合は必ずurlとページタイトルを出典として明記してください。