はじめに 記事タイトルの通り、CognitoはWebアプリ等の認証機能をサーバレスでお手軽に作ることができる。 では、実際どれくらいお手軽に作れるかを試してみよう。 なお、Cognito自体はお手軽なものの、Webアプリの基本の部分は結構使うことになる。 過去、記事でまとめた基本要素は、記事中に都度リンクを貼るので、今回は詳しくは説明しない。 前提となる基本知識としては以下だ。 Vue.jsの基本 API GatewayにおけるCORSの対応 S3の静的コンテンツのウェブサイトホスティングの基本 やりたいこと&構成図 今回はシンプルに作るため、未認証時にはログイン画面を表示し、あらかじめCognitoに登録しているユーザIDで認証をしたら、該当ユーザの情報をDynamoDBから取得して画面に表示するといった簡単なアプリにする。 これを、以下のような構成で作っていく。 ①静的コンテンツ 静的
![TerraformとCognitoとVue.jsで認証機能付きサーバレスWebアプリを構築する - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/3e5d1ce541f06394b350960a03f8c315c86313e8/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9VGVycmFmb3JtJUUzJTgxJUE4Q29nbml0byVFMyU4MSVBOFZ1ZS5qcyVFMyU4MSVBNyVFOCVBQSU4RCVFOCVBOCVCQyVFNiVBOSU5RiVFOCU4MyVCRCVFNCVCQiU5OCVFMyU4MSU4RCVFMyU4MiVCNSVFMyU4MyVCQyVFMyU4MyU5MCVFMyU4MyVBQyVFMyU4MiVCOVdlYiVFMyU4MiVBMiVFMyU4MyU5NyVFMyU4MyVBQSVFMyU4MiU5MiVFNiVBNyU4QiVFNyVBRiU4OSVFMyU4MSU5OSVFMyU4MiU4QiZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9YmUyMzkyN2UyZjdjOGU4NTcwYWM2N2JmMDhlZTE1Mjc%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBuZXJ1bmVydW8mdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPWE4MGVhNzY2ZjVlYWViMDY3M2I3YmQ1YjIxYWVmMmQ3%26blend-x%3D142%26blend-y%3D486%26blend-mode%3Dnormal%26s%3D7176cc4b722356fbd3263e0a59d98a5a)