Amplify + React file upload S3 by Cognito

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 amplify-s3uploaderui-dev hostingS3AndCloudFront storage VideoStorage auths3uploaderui51 Deployed auth UserPoolClientRole UserPool UserPoolClientWeb UserPoolClient IdentityPool IdentityPoolRoleMap Deployed storage S3AuthUploadPolicy S3AuthPublicPolicy S3AuthProtectedPolicy S3GuestPublicPolicy S3GuestUploadPolicy S3AuthPrivatePolicy Deployed hosting S3Bucket OriginAccessIdentity PrivateBucketPolicy CloudFrontDistribution stack s3uploaderui [ ====================-------------------- ] 2/4
AWS::CloudFormation::Stack UPDATE_IN_PROGRESS Mon Feb 05 2024 02:39
AWS::CloudFormation::Stack CREATE_IN_PROGRESS Mon Feb 05 2024 02:39
AWS::CloudFormation::Stack CREATE_COMPLETE Mon Feb 05 2024 02:40
AWS::CloudFormation::Stack CREATE_COMPLETE Mon Feb 05 2024 02:39
s3uploaderui [ ======================================== ] 6/6
AWS::IAM::Role CREATE_IN_PROGRESS Mon Feb 05 2024 02:39
AWS::Cognito::UserPool CREATE_COMPLETE Mon Feb 05 2024 02:39
AWS::Cognito::UserPoolClient CREATE_COMPLETE Mon Feb 05 2024 02:39
AWS::Cognito::UserPoolClient CREATE_COMPLETE Mon Feb 05 2024 02:39
AWS::Cognito::IdentityPool CREATE_COMPLETE Mon Feb 05 2024 02:39
AWS::Cognito::IdentityPoolRol… CREATE_COMPLETE Mon Feb 05 2024 02:39
VideoStorage [ ======================================== ] 9/9
AWS::IAM::Policy CREATE_IN_PROGRESS Mon Feb 05 2024 02:39
AWS::IAM::Policy CREATE_IN_PROGRESS Mon Feb 05 2024 02:39
AWS::IAM::Policy CREATE_IN_PROGRESS Mon Feb 05 2024 02:39
AWS::IAM::Policy CREATE_IN_PROGRESS Mon Feb 05 2024 02:39
AWS::IAM::Policy CREATE_IN_PROGRESS Mon Feb 05 2024 02:39
AWS::IAM::Policy CREATE_IN_PROGRESS Mon Feb 05 2024 02:39
S3AndCloudFront [ ======================================== ] 4/4
AWS::S3::Bucket CREATE_COMPLETE Mon Feb 05 2024 02:39
AWS::CloudFront::CloudFrontOr… CREATE_COMPLETE Mon Feb 05 2024 02:39
AWS::S3::BucketPolicy CREATE_COMPLETE Mon Feb 05 2024 02:39
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を通じてアプリケーションを公開することができます。

marchan

Node.js のバージョン変更

バージョンの事前確認

$ node -v

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

$ nvm install 18

バージョンの切り替え

$ nvm use 18

バージョンの事後確認

$ node -v

marchan

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

node_modules ディレクトリの削除

rm -rf node_modules

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

rm -f package-lock.json

キャッシュのクリア

npm cache clean --force

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

npm install

marchan

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

marchan

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で正常

marchan

-- 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:

? 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

marchan

-- 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 で確認する

marchan

-- 2024.04.04

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

marchan

2024.05.13

[dev]と[prod]にAmplify Publsh

$ amplify status

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

$ amplify publish

✔ Successfully pulled backend environment dev from the cloud.

Current Environment: dev

┌──────────┬──────────────────────┬───────────┬───────────────────┐
│ Category │ Resource name │ Operation │ Provider plugin │
├──────────┼──────────────────────┼───────────┼───────────────────┤
│ Auth │ s3uploaderui512a62de │ No Change │ awscloudformation │
├──────────┼──────────────────────┼───────────┼───────────────────┤
│ Hosting │ S3AndCloudFront │ No Change │ awscloudformation │
├──────────┼──────────────────────┼───────────┼───────────────────┤
│ Storage │ VideoStorage │ No Change │ awscloudformation │
└──────────┴──────────────────────┴───────────┴───────────────────┘
✔ Are you sure you want to continue? (Y/n) · yes
Deployment completed.
Deployed root stack s3uploaderui [ ======================================== ] 4/4
amplify-s3uploaderui-dev-1240… AWS::CloudFormation::Stack UPDATE_COMPLETE Tue May 14 2024 02:3
storageVideoStorage AWS::CloudFormation::Stack UPDATE_COMPLETE Tue May 14 2024 02:3
hostingS3AndCloudFront AWS::CloudFormation::Stack UPDATE_COMPLETE Tue May 14 2024 02:3
auths3uploaderui512a62de AWS::CloudFormation::Stack UPDATE_COMPLETE Tue May 14 2024 02:3
Deployment state saved successfully.
Browserslist: caniuse-lite is outdated. Please run:
npx update-browserslist-db@latest
Why you should do it regularly: https://github.com/browserslist/update-db#readme

build
react-scripts build
Creating an optimized production build...
Compiled successfully.
File sizes after gzip:
310.43 kB (+223 B) build/static/js/main.d5c96d9b.js
74.99 kB build/static/css/main.a2c07ace.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.

 $ amplify env checkout prod

✔ Initialized provider successfully.
Browserslist: caniuse-lite is outdated. Please run:
npx update-browserslist-db@latest
Why you should do it regularly: https://github.com/browserslist/update-db#readme
✅ Initialized your environment successfully.

 $ amplify status

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

 $ amplify publish

$ amplify publish
✔ Successfully pulled backend environment prod from the cloud.
Current Environment: prod
┌──────────┬──────────────────────┬───────────┬───────────────────┐
│ Category │ Resource name │ Operation │ Provider plugin │
├──────────┼──────────────────────┼───────────┼───────────────────┤
│ Auth │ s3uploaderui512a62de │ No Change │ awscloudformation │
├──────────┼──────────────────────┼───────────┼───────────────────┤
│ Hosting │ S3AndCloudFront │ No Change │ awscloudformation │
├──────────┼──────────────────────┼───────────┼───────────────────┤
│ Storage │ VideoStorage │ No Change │ awscloudformation │
└──────────┴──────────────────────┴───────────┴───────────────────┘
✔ Are you sure you want to continue? (Y/n) · yes
Deployment completed.
Deployed root stack s3uploaderui [ ======================================== ] 4/4
amplify-s3uploaderui-prod-044… AWS::CloudFormation::Stack UPDATE_COMPLETE Tue May 14 2024 02:4
storageVideoStorage AWS::CloudFormation::Stack UPDATE_COMPLETE Tue May 14 2024 02:4
hostingS3AndCloudFront AWS::CloudFormation::Stack UPDATE_COMPLETE Tue May 14 2024 02:4
auths3uploaderui512a62de AWS::CloudFormation::Stack UPDATE_COMPLETE Tue May 14 2024 02:4
Deployment state saved successfully.
Browserslist: caniuse-lite is outdated. Please run:
npx update-browserslist-db@latest
Why you should do it regularly: https://github.com/browserslist/update-db#readme

build
react-scripts build
Creating an optimized production build...
Compiled successfully.
File sizes after gzip:
310.43 kB build/static/js/main.d0ffbe20.js
74.99 kB build/static/css/main.a2c07ace.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.

GitHubリポジトリのクローン

Amplify CLIのインストール

Amplifyの存在を確認

Amplifyプロジェクトの初期化

認証機能の追加

ストレージ機能の追加

ホスティング機能の追加

依存関係のインストール

Amplify設定のプッシュ

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

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

Node.js のバージョン変更

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

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

開発環境 dev

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

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

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

[dev]と[prod]にAmplify Publsh

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

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