[AWS]サーバリースWebアプリケーションの配備1🏳️‍🌈 - awsベースのプロジェクト


概要


Wild RydeタブレットからUniconの使用を要求できる簡単なサーバリースWebアプリケーションを作成します.このアプリケーションは、ユーザーが抽出する場所を示すHTMLベースのユーザーインタフェースを提供し、バックエンドでRESTful Webサービスに接続し、リクエストを送信し、近くのunicornを送信します.また、このアプリケーションは、ユーザーがサービスを登録し、UNICONを要求する前にログインするのに便利です.

アーキテクチャ


アプリケーションアーキテクチャでは、AWS Lambda、Amazon API Gateway、Amazon DynamiDB、Amazon Cognito、AWS Amplifyコンソールが使用されます.

AWS Amplifyを使用して、ユーザーブラウザにロードされたHTML、CSS、JavaScript、および画像ファイルを含む静的Webリソースを継続的に配布および管理し、LambdaおよびAPI Gatewayを使用して、組み込まれたパブリックバックエンドAPIからデータを転送および受信します.Amazon Cognitoを使用して認証とユーザー管理機能を提供し、バックエンドAPIを保護します.最後に、APIのLambda関数は、DYNAMODBを使用して、データを格納するために永続的な層を提供する.

1)静態サイトの管理


使用するサービス:AWS Amplify
AWS Amplifyを構成して、Webアプリケーションの静的リソースをロードし、継続的な導入を提供します.Amplifyコンソールは、Gitベースのワークフローを提供し、スタック全体のWebアプリケーションを継続的に導入および管理します.
1.1)バージョンの選択
個人的にはcloud shellが好きで、まだソウルオリンピックを支持していないので、us-east-1オリンピックを選びました.
1.2)Git Repositoryの作成
Prettyerに含まれるAWS Codecompitを使用してソースコードを管理します.

wildrydes-siteという名前のライブラリを作成しました.リポジトリを作成した後、IAMユーザーを作成し、Add Permission>Attachの既存のポリシーを直接選択し、ポリシーリストからAWSCodeCommitPowerUserを選択して権限を追加します.
ユーザーが作成したユーザーを選択し、「セキュリティ認証情報」>「AWS CodeCommitのHTTPS Git認証情報の作成」を選択します.Download credentialボタンをクリックして証明書名を取得します.csvをダウンロードします.
CodeCommitコンソールに戻り、コピーURLドロップダウンメニューからClone HTTPSを選択します.

ターミナルウィンドウで、Git cloneとRepositoryのHTTPS URLを実行します.ユーザー名とPasswordは、ダウンロードした証明書名にあります.

1.3)Git Repository充填
gitリポジトリを作成してローカルにコピーすると、このワークショップに関連する既存の公開アクセス可能なS 3パケットからWebコンテンツをコピーし、リポジトリに追加する必要があります.

ディレクトリはリポジトリに変更され、S 3から静的ファイルがコピーされる.

Gitにファイルをコミットしました.
1.4)AWS AmplifyコンソールによるWeb管理の有効化
Amplifyコンソールで、De肝臓部分のget startをクリックします.作成したライブラリとブランチを選択します.

Configure Build Settingsで、指定した値を保存して配置します.

Provision-Build-Deploy-Verifyが完了しました.

完了したら、サイト画像をクリックして、サイトを起動できます.

1.5)サイトの変更
index.htmlファイルのタイトルを少し修正しました.

Gitに再度プッシュし、Provision-Build-Deploy-Verifyを待って、修正したページをチェックします.
$ git add index.html 
$ git commit -m "updated title"
$ git push

2)ユーザー管理


使用するサービス:Amazon Cognito
ユーザーアカウントを管理するAmazon Cognitoユーザープールを作成し、ユーザーを新しいユーザーとして登録し、Eメールアドレスを確認し、サイトにログインできるページを配布します.
Webサイトにアクセスするユーザーは、まず新しいユーザーアカウントを登録します.Eメールアドレスとパスワードを入力すると、認証コードを含む確認Eメールが送信され、ユーザーは認証を完了してWebページにログインするために確認コードを入力します.
ログイン時に電子メールとパスワードを入力すると、JavaScript関数はAmazon Cognitoと通信し、セキュリティリモートパスワード(SRP)プロトコルを使用して認証を行い、JSON Webトークンを再受信します.このJWTには、次のAmazon APIゲートウェイのRESTful APIと比較するユーザ認証情報が含まれています.
2.1)Amazon Cognitoユーザープールの作成
コンソールからCognitoを実行し、「ユーザープールの管理」>「aユーザープールの作成」を選択します.
ユーザー・プールの名前をWildRydesとし、「Review Defaults」を選択してプールを作成します.

ユーザープールが作成されました.後でPool Idを使用します.

2.2)ユーザープールへのアプリケーションの追加
左側のナビゲーションバーで、「AppClients」を選択します.
Add an app clientを選択し、WildRydesWebAppの名前でapp clientを追加します.Generate client secretが選択解除され、app clientが作成されます.

WildRydesWebAppをユーザープールに追加し、AppClient idを使用します.
2.3)サイト構成の更新
Pool IdとApp Client Idを使う時だ.
wild-ryde-site/js/config.jsのファイルを修正してあげます.config.jsファイルでuserPoolId、userPoolClientId、regionセクションを変更して更新します.Gitに押すのを忘れないで

2.4)テスト実施
サイトに移動し、(/register.html)電子メールアドレスとパスワードを入力してユーザーアカウントを登録します.

認証コードは電子メールで入力できますが、CognitoのManage your User Pools>WildRydes>Users and Groupに移動してください.

登録要求のEメールアドレスをConfirm Userに送信したばかりです.

サイト(/signin.html)に再アクセスしてログインします.ログインに成功した場合、/ride.htmlにリダイレクトします.検証は成功しましたが、APIが構成されていないことが表示される場合があります.

後続転送