amplifyで環境構築して公開する

最近簡単なwebサイトならamplifyでやりたいなと思っていたので作成してみました。

基本的なwebサイトはこのチュートリアルをやれば作成できるかと思います。

今回やりたいのは以下の３点です。

• prodとdevで環境の切り分け
• Route53で取得したドメインの設定
• ベーシック認証の設定

それではやっていきます。

prodとdevで環境の切り分け

まずは環境の切り分けをします。

環境の追加は以下のコマンドで行います。

amplify env add

コマンドを実行すると以下の質問が表示されますので以下のように回答します。

• ? Do you want to use an existing environment?
  • No
• ? Enter a name for the environment
  • stg（作成する環境）
• ? Select the authentication method you want to use:
  • AWS profile
• ? Please choose the profile you want to use
  • default

するとローカルに環境が構築されるので、以下のコマンドでデプロイします。

amplify publish

AWSのコンソールで確認すると作成した環境が確認できました。

Route53で取得したドメインの設定

次にドメインの設定を行います。

Route53にはすでにドメインが購入してあります。

AmplifyのドメインはRoute53ではなくAmplifyのドメイン管理から設定します。

右上にあるカスタムドメインの追加を押下します。

サブドメインだけ設定したい場合はExclude rootを押してInclude rootが表示されている状態にします。

環境は選択できるので、サブドメインを設定したらそれに対応する環境を設定します。

設定環境まで時間がかかりますが、保存を押すとドメインが設定されます。

ベーシック認証の設定

最後にベーシック認証を設定していきます。

ベーシック認証はアプリの設定＞アクセスコントロールから設定します。

右上のアクセスの管理を押下すると各環境ごとにアクセス制限ができます。

今回はdevとstgにアクセス制限を設定してSaveを押下するとベーシック認証が設定されます。

できた！