超簡単！AWS Amplify ConsoleでWebサイトにアクセス制限（Basic認証）を設定する #reinvent

AWS Amplify Consoleとは

AWS Amplify Consoleはre:Invent 2018の初夜にリリースされた、Webアプリを公開する環境を超簡単にセットアップできるサービス です。

• AWS Amplify Console

Developers.IOでは早速、試してみた記事をいくつか公開しています。

• 新サービス「AWS Amplify Console」登場！簡単3ステップでWebアプリのCI/CD環境を構築！ #reinvent ｜ DevelopersIO
• 「AWS Amplify Console」を使ってみた 〜カスタムドメイン編〜 #reinvent ｜ DevelopersIO
• AWS Amplify Console で Elm のアプリをデプロイしてみる #reinvent ｜ DevelopersIO

本記事ではアクセス制限をかけてみたいと思います。

アクセス制限をかけてみる

前提

以下の記事のような内容で構築が済んでいる前提で進めます。

新サービス「AWS Amplify Console」登場！簡単3ステップでWebアプリのCI/CD環境を構築！ #reinvent

Access Control画面にアクセスする

右メニューの「App settings」の「Access control」にアクセス。

master ブランチが Publicly viewable になっていることが確認できます。

「Manage access」を選ぶとアクセス制御の設定画面が表示されます。「Apply a global password」のトグルをオンにすると、全てのブランチごとの環境に対しても適用されます。

「Save」をすると「Access setting」から Publicly viewable が消えます。

以上で終わりです。簡単！

アクセスしてみる

アクセスしてみます。ユーザー名とパスワードが求められました！

正しいユーザー名・パスワードを入力すると表示できます。

CloudFrontやS3を何も意識しなくてもBasic認証がかけれる！

これまで静的WebサイトにBasic認証をちょろっとかけたいだけでも、CloudFrontやS3の設定を行わないといけませんでした。AWS Amplify ConsoleではWebエンジニアだけでBasic認証をかけるところまでサクッとできちゃいそうです。ブランチごとにも設定できるので、開発時にとっても便利ですね！