AWS初学者でもできる！ フルスタックReactアプリ構築①

はじめに

こんにちは。ビジネスアクセラレーション事業部の古川です。
この記事は、「AWSに興味はあるけどよく知らない」「資格を持っているけど実際に触ってみたことがない」という方向けに、「30分で学習できる」をテーマに毎週金曜日にお届けする連載シリーズの第2回です。

前回の第1回では「サーバーレスのウェブアプリケーションを構築する」に挑戦しました。自身が０から作成したアプリケーションが形になり、実際に動いた時はとても嬉しかったです。
今回挑戦するのは、AWS公式チュートリアルの「フルスタックのReactアプリケーションを構築する」です。 今回も初心者目線で、つまずきやすいポイントを共有しながら進めていきます。一緒に取り組んでいただけると嬉しいです！

※本ブログでは、全てmacOSを使用して進めています。ご了承ください。

概要

このチュートリアルでは、AWS Amplify を使用してシンプルなフルスタック Web アプリケーションを作成する方法を学びます。Amplify は、サーバーレスバックエンドを備えたシングルページ Web アプリケーションや静的サイトの構築、デプロイ、ホスティングのための Git ベースの CI/CD ワークフローを提供します。

（ハンズオンチュートリアルガイドより）

今回は「AWS Amplify」というサービスを使って、Webアプリの作成から公開までを一通り体験します！ Amplifyは、面倒なサーバー設定や、コードを更新する際の手間を省いてくれるとても便利なツールです。

環境構築

このチュートリアルを開始するためには、以下の環境構築が必要となります。

順番に進めていきましょう。

１. AWSアカウントの作成

AWS環境を一度も使用したことがない方はこの手順が必要です。こちらを元に作成しましょう。社内の共有環境がある方は不要です。管理者の方に確認してみてください。

２. AWSプロファイルの設定

まずは自分のパソコンにAWSプロファイルがすでにあるかどうかを確認しておきましょう。
ターミナルを開いて、以下のコマンドを実行してみてください。
cat ~/.aws/config

この画像のように表示された方は、既に設定ができています。

AWSコンソールにログインし、IAMを開き、使っているIAMユーザーに「AmplifyBackendDeployFullAccess」のポリシーを追加するだけでOKです。

追加が完了したら、これより先の手順はスキップして4.Node.js、npmのインストールに進んでください。何も出てこなかった方は、この先の設定を進めます。

AWSプロファイルの設定は、２つの手順で進めることができます。公式ガイドには「２−１.Identity Center で設定」が記載されているため、基本的にはこちらで進め、うまくいかない場合は「２−２.IAMユーザーで設定」で設定を行います。両方を実行する必要はありません。

２−１.Identity Center で設定

1.AWS コンソールにサインインしてIAM アイデンティティ センター ページにアクセスします。左上の検索バーに「IAM」と入力して探すこともできます。

2.「有効にする IAM Identity Center　IAM Identity Center のインスタンスを有効にすることで、ワークフォースユーザーの AWS マネージドアプリケーションおよび AWS アカウントへのアクセスを効率化します。」と書いてある箇所があるので、オレンジ色の「有効にする」を選択します。

3.続けて右下の「有効にする」を選択します。
この時、「AWS Organizationsで有効にする」「このAWSアカウントのみで有効にする」の選択肢が表示されます。「AWS Organizationsで有効にする」を選択します。
表示されず、選ぶことができない方は、「２−２. IAMユーザーで設定」まで飛ばしてください。

4.「AWS Organizationsで有効にする」を選ぶと、この画面に推移します。
画面左下にある「CloudShell」を開きます。

5.このターミナルに以下のコマンドを貼り付けます。
read -p "Enter email address: " user_email # hit enter

6.「Enter email address」と出てくるので、自身のメールアドレスを入力します。以下のコードをまとめて貼り付けて実行します。

response=$(aws sso-admin list-instances)
ssoId=$(echo $response | jq '.Instances[0].IdentityStoreId' -r)
ssoArn=$(echo $response | jq '.Instances[0].InstanceArn' -r)

email_json=$(jq -n \
  --arg email "$user_email" \
  '{"Type":"Work","Value":$email}')

response=$(aws identitystore create-user \
  --identity-store-id $ssoId \
  --user-name amplify-admin \
  --display-name 'Amplify Admin' \
  --name Formatted=string,FamilyName=Admin,GivenName=Amplify \
  --emails "$email_json")

userId=$(echo $response | jq '.UserId' -r)

response=$(aws sso-admin create-permission-set \
  --name amplify-policy \
  --instance-arn=$ssoArn \
  --session-duration PT12H)

permissionSetArn=$(echo $response | jq '.PermissionSet.PermissionSetArn' -r)

aws sso-admin attach-managed-policy-to-permission-set \
  --instance-arn $ssoArn \
  --permission-set-arn $permissionSetArn \
  --managed-policy-arn arn:aws:iam::aws:policy/service-role/AmplifyBackendDeployFullAccess

accountId=$(aws sts get-caller-identity | jq '.Account' -r)

aws sso-admin create-account-assignment \
  --instance-arn $ssoArn \
  --target-id $accountId \
  --target-type AWS_ACCOUNT \
  --permission-set-arn $permissionSetArn \
  --principal-type USER \
  --principal-id $userId

7.最後に、以下のコマンドで正しく設定できたか確認しましょう。
printf "\n\nStart session url: https://$ssoId.awsapps.com/start\nRegion: $AWS_REGION\nUsername: amplify-admin\n\n"

このように出てくれば完了です。このURLは後ほど使うので、コピーして保存しておきましょう。

8.次にパスワードをリセットします。IAM Identity Centerのコンソールに戻り、「ユーザー」→「amplify-admin」→「パスワードのリセット」→「パスワードのリセット手順を記載したメールをユーザーに送信」の順に進みます。

9.登録したメールアドレス宛にメールが届くので、好きなパスワードを設定してください。ログイン時のユーザー名は「amplify-admin」です。

10.AWS CLIをインストールします。インストール済みか確認するために、ターミナルで下記を実行します。
aws --version

バージョン情報(aws-cli/2.15.0 Python/3.11.6 Darwin/23.0.0)などが表示された場合、既にインストールされています。「command not found」と表示された場合は、こちらの記事を参考にインストールしてください。

11.ターミナルで以下を実行します
aws configure sso

すると、質問が1行ずつ表示されます。画像を参考に入力します。左側が表示される文字、右側の赤文字が入力例です。
この情報を入力すると、ブラウザが自動的に開きます。
先ほど作成したユーザー名とパスワードでサインイン後、MFAを設定するように求められます。

12.スマホにアプリを入れ、MFAを設定します。認証アプリはGoogle Authenticator、Microsoft Authenticator、Authy など、好きなものを使用してください。

以上で完了です。

２−２.IAMユーザーで設定

２−１の手順、Identity CenterのSSO方式を使うには、条件があります。IAM Identity Centerを「組織インスタンス」として有効化できるのは、AWS Organizationsの「管理アカウント」だけという制約です。
つまり、会社の検証環境や、組織に参加していない個人アカウントで作業している場合、この条件を満たせないことがあります。
その場合は、代わりにIAMユーザーを作成して設定します。私はこちらの手順で行いました。

1. IAMユーザーを作成する
   AWSコンソールで「IAM」と検索して開き、左メニューの「ユーザー」から「ユーザーを作成」を選択します。ユーザー名は好きな名前をつけて進めます。

2. 権限を付与する
   「許可を追加」の画面で「ポリシーを直接アタッチ」を選びます。検索欄に 「AmplifyBackendDeployFullAccess 」と入力してチェックを入れます。
   

3.「次へ」を選択して作成完了です。

4.「IAM」＞「IAMユーザー」から先ほど作成した名前のIAMユーザーを選択します。

5.「セキュリティ認証情報」タブを開き、「アクセスキーを作成」をクリックします。

6.用途には「CLI」を選択します。

7.アクセスキーID」と「シークレットアクセスキー」が表示されます。一度しか見られません。必ず「CSVファイルでダウンロード」を選択して保存してください。

8.AWS CLIをインストールします。インストール済みか確認するために、ターミナルで下記を実行します。
aws --version

バージョン情報(aws-cli/2.15.0 Python/3.11.6 Darwin/23.0.0)などが表示された場合、既にインストールされています。「command not found」と表示された場合は、こちらの記事を参考にインストールしてください。

9.ローカルでプロファイルを設定します、ターミナルに下記を入力してください。
aws configure

10.AWSアクセスキー、シークレットアクセスキー、リージョンの順の入力を求められるので、先ほどの値をコピーして入力します。リージョンは、ap-northeast-1 （東京）を入力します。その後の項目は何も入力せずEnterを押します。

これで完了です。~/.aws/credentialsにアクセスキーが、~/.aws/configにリージョン情報が、それぞれ保存されます。

11.下記コマンドを入力して、正しく設定されているか確認します。先ほど作ったIAMユーザーの情報が表示されれば成功です。
aws sts get-caller-identity

4.Node.js 、npm のインストール

5.GitHubのアカウント

CodeCommitで代用する

社内のセキュリティなどが理由でGitのアカウントを作ることができない場合は、CodeCommitでも代用できます。
CodeCommitはAWSが提供するGitリポジトリのサービスで、ソースコードをAWS内で完結して管理できるのが特徴です。

公式の手順はGitHub使用ですが、私はCodeCommitで代用して進めていきます。

まとめ

お疲れ様でした。以上で環境構築は終了です。次回からはアプリケーションの構築に入っていきます。
次回の更新は 9/11 （金）を予定しています。お楽しみに。