Amplify + React file upload S3 by Cognito

2023.04.23
https://dev.classmethod.jp/articles/upload-files-to-s3-with-user-authentication/

2022.03.24
https://aws.amazon.com/jp/blogs/news/allowing-external-users-to-securely-and-directly-upload-files-to-amazon-s3/

GitHubリポジトリのクローン

git clone https://github.com/aws-samples/s3uploader-ui.git

または

git clone https://git-codecommit.ap-northeast-1.amazonaws.com/v1/repos/*********

• 以下が表示されます。
  Cloning into 's3uploader-ui'...
  remote: Enumerating objects: 54, done.
  remote: Counting objects: 100% (28/28), done.
  remote: Compressing objects: 100% (25/25), done.
  remote: Total 54 (delta 4), reused 6 (delta 3), pack-reused 26
  Receiving objects: 100% (54/54), 4.38 MiB | 18.67 MiB/s, done.
  Resolving deltas: 100% (4/4), done.

Amplify CLIのインストール

cd s3uploader-ui

npm install -g @aws-amplify/cli

• プロジェクトディレクトリに移動してから Amplify CLIを実行します。
• 以下が表示されます。
  changed 33 packages in 21s
  7 packages are looking for funding
  run npm fund for details

Amplifyの存在を確認

which amplify

• 以下が表示されます。
  ~/.nvm/versions/node/v20.11.0/bin/amplify
• 解説
  Amplify CLIが正常にインストールされ、NVM（Node Version Manager）を使用して
  管理されているNode.jsの特定のバージョンに関連付けられていることを示しています。

Amplifyプロジェクトの初期化

amplify init

• 以下のパラメータを選択します。
  「Enter a name for the project: s3-uploader-ui」
  「Initialize the project with the above configuration:」 ⇒ Yesを入力
  「Select the authentication method you want to use:」 ⇒ AWS profile を選択
  「Please choose the profile you want to use: 」 ⇒ default を選択
  ✔ Help improve Amplify CLI by sharing non-sensitive project configurations on failures (y/N) · no

• 以下が表示されます。
  Project information
  | Name: s3uploaderui
  | Environment: dev
  | Default editor: Visual Studio Code
  | App type: javascript
  | Javascript framework: react
  | Source Directory Path: src
  | Distribution Directory Path: build
  | Build Command: npm run-script build
  | Start Command: npm run-script start

? Initialize the project with the above configuration? Yes
Using default provider awscloudformation
? Select the authentication method you want to use: AWS profile

For more information on AWS Profiles, see:
https: // docs.aws.amazon.com/cli/latest/userguide/cli-configure-profiles.html

? Please choose the profile you want to use default
Adding backend environment dev to AWS Amplify app: d249vjimqqavpx

Deployment completed.
Deployed root stack s3uploaderui [ ======================================== ] 4/4
amplify-s3uploaderui-dev-23742 AWS::CloudFormation::Stack CREATE_COMPLETE Thu Feb 01 2024 02:38
UnauthRole AWS::IAM::Role CREATE_COMPLETE Thu Feb 01 2024 02:38
DeploymentBucket AWS::S3::Bucket CREATE_COMPLETE Thu Feb 01 2024 02:38
AuthRole AWS::IAM::Role CREATE_COMPLETE Thu Feb 01 2024 02:38

✔ Help improve Amplify CLI by sharing non-sensitive project configurations on failures (y/N) · no
You can always opt-in by running "amplify configure --share-project-config-on"
Deployment state saved successfully.
✔ Initialized provider successfully.
✅ Initialized your environment successfully.
✅ Your project has been successfully initialized and connected to the cloud!
Some next steps:
[省略]
ro tip:
Try "amplify add api" to create a backend API and then "amplify push" to deploy everything

認証機能の追加

amplify add auth

• 以下のパラメータを選択します。
  「Do you want to use the default authentication and security configuration? ⇒Default Configuration を選択
  「How do you want users to be able to sign in?」 ⇒ Username を選択
  「Do you want to configure advanced settings?」 ⇒ No, I am done を選択

• 以下が表示されます。
  Successfully added auth resource s3uploaderui81c973e8 locally
  ✅ Some next steps:
  "amplify push" will build all your local backend resources and provision it in the cloud
  "amplify publish" will build all your local backend and frontend resources (if you have hosting category added) and provision it in the cloud

ストレージ機能の追加

$ amplify add storage

• 以下のパラメータを選択します。
  「Select from one of the below mentioned services」 ⇒ Content (Images, audio, video, etc.) を選択
  「Provide bucket name」 ⇒ 任意の新規バケット名を指定
  「Who should have access: 」 ⇒ Auth and guest usersを選択
  「What kind of access do you want for Authenticated users?」 ⇒ create/update を選択（スペースキー）
  「Do you want to add Lambda Trigger for your S3 Bucket? 」 ⇒ No を選択

• 以下が表示されます。
  ? Select from one of the below mentioned services: Content (Images, audio, video, etc.)
  ✔ Provide a friendly name for your resource that will be used to label this category in the project: · VideoStorage
  ✔ Provide bucket name: · ******-video-storage
  ✔ Who should have access: · Auth and guest users
  ✔ What kind of access do you want for Authenticated users? · create/update
  ✔ What kind of access do you want for Guest users? · create/update
  ✔ Do you want to add a Lambda Trigger for your S3 Bucket? (y/N) · no

⚠️ Specified resource configuration requires Cognito Identity Provider unauthenticated access but it is not enabled.
✅ Successfully updated auth resource locally.
✅ Successfully added resource VideoStorage locally

⚠️ If a user is part of a user pool group, run "amplify update storage" to enable IAM group policies for CRUD operations
✅ Some next steps:
"amplify push" builds all of your local backend resources and provisions them in the cloud
"amplify publish" builds all of your local backend and front-end resources (if you added hosting category) and provisions them in the cloud

• Cognito Identity Providerの未認証アクセスが有効でない:
  　AWS管理コンソールにログインし、Cognitoの該当するアイデンティティプールの設定を開きます。
  「認証されていないアイデンティティのサポート」または類似オプションから未認証アクセスを有効にします。
• ユーザープールグループのIAMポリシー:
  　ユーザープールグループに特定のアクセス権限を設定する必要がある場合、amplify update storage コマンドを使用して、ストレージリソースの設定を更新します。
• これらはampliy push してから対応します。

ホスティング機能の追加

$ amplify hosting add

• 以下のパラメータを選択します。
  「Select the plugin module to execute」 ⇒ Amazon CloudFront and S3 を選択
  「Select the environment setup」 ⇒ PROD (S3 with CloudFront using HTTP) を選択
  「hosting bucket name」 ⇒ 任意の新規ホスティングバケット名を指定

• 以下が表示されます。
  ✔ Select the plugin module to execute · Amazon CloudFront and S3
  ✔ hosting bucket name · -***-hosting
  Static webhosting is disabled for the hosting bucket when CloudFront Distribution is enabled.
  You can now publish your app using the following command:
  Command: amplify publish

依存関係のインストール

• 事前確認

$ cat package.json

• 依存関係のパッケージをインストール

$ npm install

・いくつかのパッケージやプラグインが非推奨になっているという警告があります。
・いくつかのパッケージが資金提供を求めています。
・いくつかのセキュリティの脆弱性がみつかりました。
　などが表示される場合があります。

added 2771 packages, and audited 2772 packages in 3m
8 vulnerabilities (2 moderate, 6 high)

• npm audit を実行して詳細について確認します。

$ npm audit

npm audit report
nth-check <2.0.1
Severity: high
Inefficient Regular Expression Complexity in nth-check - https: // github.com/advisories/GHSA-rp65-9cf3-cjxr
fix available via npm audit fix --force
Will install react-scripts@3.0.1, which is a breaking change
[省略]

• 脆弱性を修正する場合、npm audit fix を実行します。【大幅に変わるため注意が必要です】

npm audit fix --force

• 初めてnpm installした場合にディレクトリ・ファイルの生成を確認します。

$ ls
CODE_OF_CONDUCT.md  LICENSE    amplify           node_modules       package.json  src
CONTRIBUTING.md     README.md  cloud9_resize.sh  package-lock.json  public

• 解説
  　ディレクトリ　node_modules　が生成されます。
  　ファイル　package-lock.json　が生成されます。

Amplify設定のプッシュ

• 現在のAWSプロファイル設定を確認します。

$ cat ~/.aws/config

• 以下が表示されます。
  [default]
  region=ap-northeast-

または

$ aws configure list --profile default

• 以下が表示されます。
  Name Value Type Location
  ---- ----- ---- --------
  profile default manual --profile
  access_key ****************2B7M shared-credentials-file
  secret_key ****************1n6b shared-credentials-file
  region ap-northeast-1 config-file ~/.aws/config

• リージョンを変更する場合　例：Tokyo（ap-northeast-1）に変更

aws configure set region ap-northeast-1 --profile default

• バックエンドリソースをAWSにデプロイ

amplify push

「Are you sure you want to continue? 」 ⇒ Yes を入力

• 以下が表示されます。
  ✔ Successfully pulled backend environment dev from the cloud.

  Current Environment: dev

┌──────────┬──────────────────────┬───────────┬───────────────────┐
│ Category │ Resource name │ Operation │ Provider plugin │
├──────────┼──────────────────────┼───────────┼───────────────────┤
│ Auth │ s3uploaderui51****** │ Create │ awscloudformation │
├──────────┼──────────────────────┼───────────┼───────────────────┤
│ Storage │ *****VideoStorage │ Create │ awscloudformation │
├──────────┼──────────────────────┼───────────┼───────────────────┤
│ Hosting │ S3AndCloudFront │ Create │ awscloudformation │
└──────────┴──────────────────────┴───────────┴───────────────────┘

✔ Are you sure you want to continue? (Y/n) · yes

Deployment completed.
Deploying root stack s3uploaderui [ ====================-------------------- ] 2/4
amplify-s3uploaderui-dev AWS::CloudFormation::Stack UPDATE_IN_PROGRESS Mon Feb 05 2024 02:39
hostingS3AndCloudFront AWS::CloudFormation::Stack CREATE_IN_PROGRESS Mon Feb 05 2024 02:39
storage VideoStorage AWS::CloudFormation::Stack CREATE_COMPLETE Mon Feb 05 2024 02:40
auths3uploaderui51 AWS::CloudFormation::Stack CREATE_COMPLETE Mon Feb 05 2024 02:39
Deployed auth s3uploaderui [ ======================================== ] 6/6
UserPoolClientRole AWS::IAM::Role CREATE_IN_PROGRESS Mon Feb 05 2024 02:39
UserPool AWS::Cognito::UserPool CREATE_COMPLETE Mon Feb 05 2024 02:39
UserPoolClientWeb AWS::Cognito::UserPoolClient CREATE_COMPLETE Mon Feb 05 2024 02:39
UserPoolClient AWS::Cognito::UserPoolClient CREATE_COMPLETE Mon Feb 05 2024 02:39
IdentityPool AWS::Cognito::IdentityPool CREATE_COMPLETE Mon Feb 05 2024 02:39
IdentityPoolRoleMap AWS::Cognito::IdentityPoolRol… CREATE_COMPLETE Mon Feb 05 2024 02:39
Deployed storage VideoStorage [ ======================================== ] 9/9
S3AuthUploadPolicy AWS::IAM::Policy CREATE_IN_PROGRESS Mon Feb 05 2024 02:39
S3AuthPublicPolicy AWS::IAM::Policy CREATE_IN_PROGRESS Mon Feb 05 2024 02:39
S3AuthProtectedPolicy AWS::IAM::Policy CREATE_IN_PROGRESS Mon Feb 05 2024 02:39
S3GuestPublicPolicy AWS::IAM::Policy CREATE_IN_PROGRESS Mon Feb 05 2024 02:39
S3GuestUploadPolicy AWS::IAM::Policy CREATE_IN_PROGRESS Mon Feb 05 2024 02:39
S3AuthPrivatePolicy AWS::IAM::Policy CREATE_IN_PROGRESS Mon Feb 05 2024 02:39
Deployed hosting S3AndCloudFront [ ======================================== ] 4/4
S3Bucket AWS::S3::Bucket CREATE_COMPLETE Mon Feb 05 2024 02:39
OriginAccessIdentity AWS::CloudFront::CloudFrontOr… CREATE_COMPLETE Mon Feb 05 2024 02:39
PrivateBucketPolicy AWS::S3::BucketPolicy CREATE_COMPLETE Mon Feb 05 2024 02:39
CloudFrontDistribution AWS::CloudFront::Distribution CREATE_COMPLETE Mon Feb 05 2024 02:43

Deployment state saved successfully.

Hosting endpoint: https://******.cloudfront.net

• 解説
  　バックエンドの変更をAWSにプッシュし、フロントエンドのビルドプロセスを実行した後、
  　ビルドされた静的ファイルをS3バケットにアップロードし、ウェブサイトを公開します。

Cognito Identity Poolの未認証アクセスを有効にする

• Cognito Identity Pool のunauthRole にS3 へのアップロード権限を付与（確認または変更）する。
• 自動生成されたPolicy 「Uploads_policy_bb6935de」（カスタマーインライン）

{
	"Version": "2012-10-17",
	"Statement": [
		{
			"Action": [
				"s3:PutObject"
			],
			"Resource": [
				"arn:aws:s3:::******-video-storage***-dev/uploads/*"
			],
			"Effect": "Allow"
		}
	]
}

• 新規に追加したポリシー（カスタマーインライン）

{
	"Version": "2012-10-17",
	"Statement": [
		{
			"Action": [
				"s3:PutObject"
			],
			"Resource": [
				"arn:aws:s3:::******-video-storage***-dev/*"
			],
			"Effect": "Allow"
		}
	]
}

フロントエンドとバックエンドをビルドして公開

amplify publish

• 以下が表示されます。

✔ Successfully pulled backend environment dev from the cloud.
Current Environment: dev

┌──────────┬──────────────────────┬───────────┬───────────────────┐
│ Category │ Resource name │ Operation │ Provider plugin │
├──────────┼──────────────────────┼───────────┼───────────────────┤
│ Auth │ s3uploaderui***a62de │ No Change │ awscloudformation │
├──────────┼──────────────────────┼───────────┼───────────────────┤
│ Storage │ *****VideoStorage │ No Change │ awscloudformation │
├──────────┼──────────────────────┼───────────┼───────────────────┤
│ Hosting │ S3AndCloudFront │ No Change │ awscloudformation │
└──────────┴──────────────────────┴───────────┴───────────────────┘

No changes detected

? Do you still want to publish the frontend? Yes

s3-uploader@0.2.0 build
react-scripts build

Creating an optimized production build...
Compiled successfully.

File sizes after gzip:

301.46 kB build/static/js/main.c7237034.js
74.51 kB build/static/css/main.2eafb56f.css

The project was built assuming it is hosted at /.
You can control this with the homepage field in your package.json.

The build folder is ready to be deployed.
You may serve it with a static server:

npm install -g serve
serve -s build

Find out more about deployment here:

https: // cra.link/deployment

frontend build command exited with code 0
Publish started for S3AndCloudFront
✔ Uploaded files successfully.
Your app is published successfully.
https://*********.cloudfront.net

• 解説
  ※最終行は、生成されたCloudFrontのURLです。
  この手順によりs3uploader-uiリポジトリ（Reactベースのプロジェクト）をクローンし、
  Amplifyを使って認証、ストレージ、ホスティングを設定し、
  最終的にCloudFrontを通じてアプリケーションを公開することができます。

Node.js のバージョン変更

• バージョンの事前確認

$ node -v

• バージョン18のインストール

$ nvm install 18

• バージョンの切り替え

$ nvm use 18

• バージョンの事後確認

$ node -v

パッケージの再インストール

• node_modules ディレクトリの削除

rm -rf node_modules

• package-lock.json ファイルの削除

rm -f package-lock.json

• キャッシュのクリア

npm cache clean --force

• 依存関係の再インストール
  　すべての依存関係を再インストールします。

npm install

npm install エラー　依存関係の修正

npm audit

• プロジェクトの依存関係を調査し、脆弱性があるかどうかをチェックします。

npm update react-scripts --depth 5

• react-scripts およびその依存関係を更新します。（--depth オプションは現在無効）

npm audit

• 再度、依存関係の脆弱性をチェックします。

npm audit fix

• 自動的に検出された脆弱性を修正します。

npm list nth-check

• nth-check パッケージのバージョンと依存関係をリストアップします。

npm list postcss

• postcss パッケージのバージョンと依存関係をリストアップします。

npm list react

• react パッケージのバージョンと依存関係をリストアップします。

npm uninstall react react-dom

• react と react-dom パッケージをアンインストールします。

npm install react@17.0.0 react-dom@17.0.0

• react と react-dom の特定のバージョン17.0.0をインストールします。（18→17ダウングレード）

npm list react

• react のバージョンが正しく更新されたことを確認します。

rm -rf node_modules package-lock.json

• node_modules ディレクトリと package-lock.json ファイルを削除して依存関係をクリーンアップします。

npm install

• 依存関係を再インストールし、package-lock.json を再生成します。

npm audit

• 依存関係の脆弱性を再度チェックします。

• npm audit結果の内容に適合するよう修正します。
  ・index.js ファイルを React18 対応からReact 17対応に合わせて修正します。
  ・新しい index.css ファイルをプロジェクトに追加します。

npm start

• 修正後のアプリケーションを起動し、開発サーバーで実行します。

You can now view s3-uploader in the browser.

Local: http://localhost:8080
On Your Network: http://172.16.0.167:8080

Note that the development build is not optimized.
To create a production build, use npm run build.

webpack compiled successfully

• 2024.02.03 react 17 バージョンダウン

2024.02.05

• cognito ユーザプールに新規ユーザを追加登録
  　・AWS 管理コンソール画面で操作
  　・仮パスワードから本パスワードに変更

• A）ローカル開発環境

npm start 

・コマンド実行は成功
　・Preview画面　cognitoログイン成功後の画面で表示なし（ブラウザコンソールにエラー）

開発環境 dev

• B) S3+ CloudFront

amplify push 
amplify publish

・CloudFront URLの画面でエラー表示

• 2つのにエラーに対応するため index.js を修正変更
  　・react17 のまま<HashRouter>タグを利用

• github にコミットしてプッシュ

npm start

• npm start してpreview 画面で正常

- amplify push

• amplify publish してCloudFrontURLで正常

-- 2024.04.05

本番環境 prodに バックエンドをpush フロントエンドをpublish

$ amplify status

    Current Environment: dev
    
┌──────────┬──────────────────────┬───────────┬───────────────────┐
│ Category │ Resource name        │ Operation │ Provider plugin   │
├──────────┼──────────────────────┼───────────┼───────────────────┤
│ Auth     │ ******512a62de │ No Change │ awscloudformation │
├──────────┼──────────────────────┼───────────┼───────────────────┤
│ Storage  │ ******Storage    │ No Change │ awscloudformation │
├──────────┼──────────────────────┼───────────┼───────────────────┤
│ Hosting  │ S3AndCloudFront      │ No Change │ awscloudformation │
└──────────┴──────────────────────┴───────────┴───────────────────┘

Hosting endpoint: https://***.cloudfront.net

$ amplify list

⚠️ The Amplify CLI can NOT find command:  list
The Amplify Command Line Interface (CLI) is a unified toolchain to
create, integrate, and manage the AWS cloud services for your app.

USAGE
  amplify <command> <subcommand> [flags]

COMMANDS
  init           Initialize a new Amplify project
  configure      Configure the CLI to work with your AWS profile
  push           Provisions cloud resources with the latest local changes
  pull           Fetch upstream backend changes from the cloud and updates the local environment
  env            Displays and manages environment related information for your Amplify project
  add            Adds a resource for an Amplify category in your local backend
  status         Shows the state of local resources not yet pushed to the cloud
  plugin         Configure Amplify plugins
  update         Update resource for an Amplify category in your local backend
  publish        Executes amplify push and hosts the frontend app
  remove         Removes a resource for an Amplify category in your local backend
  console        Opens the web console for the selected cloud resource
  delete         Delete the Amplify project
  upgrade        Download and install the latest version of the Amplify CLI
  import         Imports existing resources to your local backend
  override       Override Amplify-generated resources with Cloud Development Kit (CDK)
  diagnose       Capture non-sensitive Amplify backend metadata for debugging purposes
  logout         Logs out of Amplify Studio
  export         Export Amplify CLI-generated backend as a Cloud Development Kit (CDK) stack
  uninstall      Uninstall the Amplify CLI
  serve          Executes amplify push, and then test run the client-side application locally
  mock           Run mock server for testing categories locally
  codegen        Generates GraphQL statements and type annotations
  api            Enable an easy and secure solution to access backend data
  storage        Enable a mechanism for managing user content
  notifications  Configure notifications for your Amplify project
  auth           Enable sign-in, sign-up, and sign-out for your app
  geo            Configure geo resources for your Amplify project
  analytics      Add analytics resources to your Amplify project
  function       Configure function resources for your Amplify project
  hosting        Configure hosting resources for your Amplify project
  interactions   Configure interactions resources for your Amplify project
  predictions    Configure predictions resources for your Amplify project
  build          Builds all resources in the project

FLAGS
  -h | --help  Show help for a command

LEARN MORE
  Visit https://docs.amplify.aws/cli/

 $ amplify env add

Note: It is recommended to run this command from the root of your app directory
? Enter a name for the environment Note: It is recommended to run this command from the root of your app directo

:~/environment/-ui (***) $ amplify env add
Note: It is recommended to run this command from the root of your app directory

? Enter a name for the environment prod

Using default provider awscloudformation

? Select the authentication method you want to use: AWS profile

For more information on AWS Profiles, see:
https://docs.aws.amazon.com/cli/latest/userguide/cli-configure-profiles.html

? Please choose the profile you want to use default

Adding backend environment prod to AWS Amplify app: ******

Deployment completed.
Deployed root stack ****** [ ======================================== ] 4/4
amplify-******-prod-044… AWS::CloudFormation::Stack CREATE_COMPLETE Fri Apr
DeploymentBucket AWS::S3::Bucket CREATE_COMPLETE Fri Apr
AuthRole AWS::IAM::Role CREATE_COMPLETE Fri Apr
UnauthRole AWS::IAM::Role CREATE_COMPLETE Fri Apr

Deployment state saved successfully.
✔ Initialized provider successfully.
✅ Initialized your environment successfully.
✅ Your project has been successfully initialized and connected to the cloud!
Some next steps:

"amplify status" will show you what you've added already and if it's locally configured or deployed
"amplify add <category>" will allow you to add features like user login or a backend API
"amplify push" will build all your local backend resources and provision it in the cloud
"amplify console" to open the Amplify Console and view your project status
"amplify publish" will build all your local backend and frontend resources (if you have hosting category added) and provision it in the cloud

Pro tip:
Try "amplify add api" to create a backend API and then "amplify push" to deploy everything

$ amplify status

    Current Environment: prod
    
┌──────────┬──────────────────────┬───────────┬───────────────────┐
│ Category │ Resource name        │ Operation │ Provider plugin   │
├──────────┼──────────────────────┼───────────┼───────────────────┤
│ Auth     │ ***512a62de │ Create    │ awscloudformation │
├──────────┼──────────────────────┼───────────┼───────────────────┤
│ Hosting  │ S3AndCloudFront      │ Create    │ awscloudformation │
├──────────┼──────────────────────┼───────────┼───────────────────┤
│ Storage  │ ***VideoStorage    │ Create    │ awscloudformation │
└──────────┴──────────────────────┴───────────┴───────────────────┘

$ amplify push

✔ Successfully pulled backend environment prod from the cloud.
    Current Environment: prod
    
┌──────────┬──────────────────────┬───────────┬───────────────────┐
│ Category │ Resource name        │ Operation │ Provider plugin   │
├──────────┼──────────────────────┼───────────┼───────────────────┤
│ Auth     │ ******512a62de │ Create    │ awscloudformation │
├──────────┼──────────────────────┼───────────┼───────────────────┤
│ Hosting  │ S3AndCloudFront      │ Create    │ awscloudformation │
├──────────┼──────────────────────┼───────────┼───────────────────┤
│ Storage  │ ***VideoStorage    │ Create    │ awscloudformation │
└──────────┴──────────────────────┴───────────┴───────────────────┘
✔ Are you sure you want to continue? (Y/n) · yes

Deployment completed.
Deploying root stack ****** [ ====================-------------------- ] 2/4
        amplify-******-prod-044… AWS::CloudFormation::Stack     UPDATE_IN_PROGRESS             Fri Apr 
        storage******Storage       AWS::CloudFormation::Stack     CREATE_COMPLETE                Fri Apr 
        hostingS3AndCloudFront         AWS::CloudFormation::Stack     CREATE_IN_PROGRESS             Fri Apr 
        auths3uploaderui512a62de       AWS::CloudFormation::Stack     CREATE_COMPLETE                Fri Apr 
Deployed auth ****** [ ======================================== ] 6/6
        UserPoolClientRole             AWS::IAM::Role                 CREATE_IN_PROGRESS             Fri Apr 
        UserPool                       AWS::Cognito::UserPool         CREATE_COMPLETE                Fri Apr 
        UserPoolClientWeb              AWS::Cognito::UserPoolClient   CREATE_COMPLETE                Fri Apr 
        UserPoolClient                 AWS::Cognito::UserPoolClient   CREATE_COMPLETE                Fri Apr 
        IdentityPool                   AWS::Cognito::IdentityPool     CREATE_COMPLETE                Fri Apr 
        IdentityPoolRoleMap            AWS::Cognito::IdentityPoolRol… CREATE_COMPLETE                Fri Apr 
Deploying hosting S3AndCloudFront [ ==============================---------- ] 3/4
        OriginAccessIdentity           AWS::CloudFront::CloudFrontOr… CREATE_COMPLETE                Fri Apr 
        PrivateBucketPolicy            AWS::S3::BucketPolicy          CREATE_COMPLETE                Fri Apr 
        CloudFrontDistribution         AWS::CloudFront::Distribution  CREATE_COMPLETE                Fri Apr 
Deployed storage ******Storage [ ======================================== ] 9/9
        S3Bucket                       AWS::S3::Bucket                CREATE_COMPLETE                Fri Apr 
        S3AuthProtectedPolicy          AWS::IAM::Policy               CREATE_IN_PROGRESS             Fri Apr 
        S3GuestUploadPolicy            AWS::IAM::Policy               CREATE_IN_PROGRESS             Fri Apr 
        S3AuthPublicPolicy             AWS::IAM::Policy               CREATE_IN_PROGRESS             Fri Apr 
        S3AuthPrivatePolicy            AWS::IAM::Policy               CREATE_IN_PROGRESS             Fri Apr 
        S3GuestPublicPolicy            AWS::IAM::Policy               CREATE_IN_PROGRESS             Fri Apr 
        S3AuthUploadPolicy             AWS::IAM::Policy               CREATE_IN_PROGRESS             Fri Apr 

Deployment state saved successfully.

Hosting endpoint: https://***.cloudfront.net

$ amplify publish

✔ Successfully pulled backend environment prod from the cloud.

    Current Environment: prod
    
┌──────────┬──────────────────────┬───────────┬───────────────────┐
│ Category │ Resource name        │ Operation │ Provider plugin   │
├──────────┼──────────────────────┼───────────┼───────────────────┤
│ Auth     │ ******512a62de │ No Change │ awscloudformation │
├──────────┼──────────────────────┼───────────┼───────────────────┤
│ Hosting  │ S3AndCloudFront      │ No Change │ awscloudformation │
├──────────┼──────────────────────┼───────────┼───────────────────┤
│ Storage  │ ******Storage    │ No Change │ awscloudformation │
└──────────┴──────────────────────┴───────────┴───────────────────┘

No changes detected

? Do you still want to publish the frontend? Yes

> s3-***@0.2.0 build
> react-scripts build

Creating an optimized production build...
Compiled successfully.

File sizes after gzip:

  309.31 kB (+2 B)  build/static/js/main.fe7e1991.js
  74.56 kB          build/static/css/main.16cdadfa.css

The project was built assuming it is hosted at /.
You can control this with the homepage field in your package.json.

The build folder is ready to be deployed.
You may serve it with a static server:

  npm install -g serve
  serve -s build

Find out more about deployment here:

  https://cra.link/deployment

frontend build command exited with code 0
Publish started for S3AndCloudFront
✔ Uploaded files successfully.
Your app is published successfully.
https://******.cloudfront.net

-- 2024.04.04

本番環境 prodにcognitoユーザ（id パスワード）を新規作成

• aws Management Console にて 本番環境のcognitoユーザプールに ユーザを新規作成
  　・option（メールアドレス　電話番号）は入力しない。

• AWS CLIでCognitoユーザのパスワードを設定する。
  　（aws Management Consoleにて「パスワードを強制的に変更」ボタンがクリックできないため）

• Cognito ユーザプールIDのリストを取得する

$ aws cognito-idp list-user-pools --max-results 60

{
"UserPools": [
{
"Id": "ap-northeast-1_NK2kgL15i",
"Name": "**userpool-prod",
"LambdaConfig": {},
"LastModifiedDate": "2024-04-05T00:48:31.118000+00:00",
"CreationDate": "2024-04-05T00:48:31.118000+00:00"
},
{
"Id": "ap-northeast-1_QotX",
"Name": "*512a62e_userpool_-dev",
"LambdaConfig": {},
"LastModifiedDate": "2024-02-05T02:39:12.975000+00:00",
"CreationDate": "2024-02-05T02:39:12.975000+00:00"
},
{
"Id": "ap-northeast-1_TjMK",
"Name": "Cognito-UserPool",
"LambdaConfig": {},
"LastModifiedDate": "2023-09-05T05:18:37.720000+00:00",
"CreationDate": "2023-09-05T05:18:37.720000+00:00"
},
{
"Id": "ap-northeast-1_k07R",
"Name": "Cognito-Email-UserPool",
"LambdaConfig": {},
"LastModifiedDate": "2023-09-19T06:06:38.702000+00:00",
:

• Cognito 新規ユーザのパスワードを設定する

$ aws cognito-idp admin-set-user-password --user-pool-id ap-northeast-*** --username new-username --password 123456 --permanent

• aws Management Console で確認する

-- 2024.04.04

本番環境 prod のS3 BucketにS3 Trigger を設定