amplify init

$ mkdir amplify-upload
$ cd amplify-upload

$ amplify init

Note: It is recommended to run this command from the root of your app directory
? Enter a name for the project amplifyupload
The following configuration will be applied:

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

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

Deployment completed.
Deployed root stack amplifyupload [ ======================================== ] 4/4
amplify-amplifyupload-dev-243… AWS::CloudFormation::Stack CREATE_COMPLETE Mon Jun
DeploymentBucket AWS::S3::Bucket CREATE_COMPLETE Mon Jun
UnauthRole AWS::IAM::Role CREATE_COMPLETE Mon Jun
AuthRole AWS::IAM::Role CREATE_COMPLETE Mon Jun

✔ Help improve Amplify CLI by sharing non-sensitive project configurations on failures (y/N) · yes

Thank you for helping us improve Amplify CLI!

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

$ cd amplify
/amplify $ ls -ls

total 12
0 drwxr-xr-x. 3 ec2-user ec2-user 73 Jun 24 02:44 '#current-cloud-backend'
4 -rw-r--r--. 1 ec2-user ec2-user 393 Jun 24 02:44 README.md
0 drwxr-xr-x. 4 ec2-user ec2-user 113 Jun 24 02:44 backend
4 -rw-r--r--. 1 ec2-user ec2-user 1896 Jun 24 02:44 cli.json
0 drwxr-xr-x. 2 ec2-user ec2-user 76 Jun 24 02:44 hooks
4 -rw-r--r--. 1 ec2-user ec2-user 732 Jun 24 02:44 team-provider-info.json

cd src
/src $ ls -ls

total 8
4 -rw-r--r--. 1 ec2-user ec2-user 44 Jun 24 02:44 amplifyconfiguration.json
4 -rw-r--r--. 1 ec2-user ec2-user 218 Jun 24 02:44 aws-exports.js

marchan

amplify add auth

$ amplify add auth

Using service: Cognito, provided by: awscloudformation

The current configured provider is Amazon Cognito.

Do you want to use the default authentication and security configuration?
❯ Default configuration ●
Default configuration with Social Provider (Federation)
Manual configuration
I want to learn more.

How do you want users to be able to sign in?
Username
❯ Email ●
Phone Number
Email or Phone Number
I want to learn more.
Do you want to configure advanced settings? (Use arrow keys)
❯ No, I am done. ●
Yes, I want to make some additional changes.
✅ Successfully added auth resource amplifys3upload9c01e5c5 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/backend $  ls -ls

total 12
4 -rw-r--r--. 1 ec2-user ec2-user 1384 Jun 24 02:51 amplify-meta.json
0 drwxr-xr-x. 3 ec2-user ec2-user 35 Jun 24 02:51 auth
0 drwxr-xr-x. 3 ec2-user ec2-user 19 Jun 24 02:44 awscloudformation
4 -rw-r--r--. 1 ec2-user ec2-user 648 Jun 24 02:51 backend-config.json
4 -rw-r--r--. 1 ec2-user ec2-user 135 Jun 24 02:44 tags.json
0 drwxr-xr-x. 2 ec2-user ec2-user 50 Jun 24 02:44 types

marchan

amplify add storage

? Select from one of the below mentioned services: (Use arrow keys)
❯ Content (Images, audio, video, etc.) ●
NoSQL Database

✔ Provide a friendly name for your resource that will be used to label this category in the project: · s3ad563863 ●

✔ Provide bucket name: · amplifyupload20240624 ●
? Who should have access: … (Use arrow keys or type to filter)
Auth users only
❯ Auth and guest users ●

? What kind of access do you want for Authenticated users? … (Use arrow keys or type to filter)
❯○ create/update ●
○ read
○ delete
(Use <space> to select, <ctrl + a> to toggle all)

? What kind of access do you want for Guest users?
❯○ create/update ●
○ read
○ delete
(Use <space> to select, <ctrl + a> to toggle all)

? Do you want to add a Lambda Trigger for your S3 Bucket? (y/N) ‣ 　N ●

⚠️ Specified resource configuration requires Cognito Identity Provider unauthenticated access but it is not enabled.
✅ Successfully updated auth resource locally.
✅ Successfully added resource s3ad563863 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

/amplify/backend $ ls -ls

total 12
4 -rw-r--r--. 1 ec2-user ec2-user 1520 Jun 24 03:07 amplify-meta.json
0 drwxr-xr-x. 3 ec2-user ec2-user 35 Jun 24 02:51 auth
0 drwxr-xr-x. 3 ec2-user ec2-user 19 Jun 24 02:44 awscloudformation
4 -rw-r--r--. 1 ec2-user ec2-user 784 Jun 24 03:07 backend-config.json
0 drwxr-xr-x. 3 ec2-user ec2-user 24 Jun 24 03:07 storage
4 -rw-r--r--. 1 ec2-user ec2-user 135 Jun 24 02:44 tags.json
0 drwxr-xr-x. 2 ec2-user ec2-user 50 Jun 24 02:44 types

marchan

npm install

$ npm install

up to date, audited 89 packages in 1s

2 packages are looking for funding
run npm fund for details

found 0 vulnerabilities

marchan

amplify push

$ amplify push

⠴ Fetching updates to backend environment: dev from the cloud.⠋ Building resource auth✔ Successfully pulled backend environment dev from the cloud.

Current Environment: dev

┌──────────┬───────────────────────┬───────────┬───────────────────┐
│ Category │ Resource name │ Operation │ Provider plugin │
├──────────┼───────────────────────┼───────────┼───────────────────┤
│ Auth │ amplifyupload01c03a22 │ Create │ awscloudformation │
├──────────┼───────────────────────┼───────────┼───────────────────┤
│ Storage │ s3ad563863 │ Create │ awscloudformation │
└──────────┴───────────────────────┴───────────┴───────────────────┘
✔ Are you sure you want to continue? (Y/n) · yes

Deployment completed.
Deployed root stack amplifyupload [ ======================================== ] 3/
amplify-amplifyupload-dev-243… AWS::CloudFormation::Stack UPDATE_COMPLETE
storages3ad563863 AWS::CloudFormation::Stack CREATE_COMPLETE
authamplifyupload01c03a22 AWS::CloudFormation::Stack CREATE_COMPLETE
Deployed auth amplifyupload01c03a22 [ ======================================== ]
UserPoolClientRole AWS::IAM::Role CREATE_IN_PROGRESS
UserPool AWS::Cognito::UserPool CREATE_COMPLETE
UserPoolClientWeb AWS::Cognito::UserPoolClient CREATE_COMPLETE
UserPoolClient AWS::Cognito::UserPoolClient CREATE_COMPLETE
IdentityPool AWS::Cognito::IdentityPool CREATE_COMPLETE
IdentityPoolRoleMap AWS::Cognito::IdentityPoolRol… CREATE_COMPLETE
Deployed storage s3ad563863 [ ======================================== ] 9/9
S3Bucket AWS::S3::Bucket CREATE_COMPLETE
S3AuthProtectedPolicy AWS::IAM::Policy CREATE_IN_PROGRESS
S3GuestUploadPolicy AWS::IAM::Policy CREATE_IN_PROGRESS
S3GuestPublicPolicy AWS::IAM::Policy CREATE_IN_PROGRESS
S3AuthUploadPolicy AWS::IAM::Policy CREATE_IN_PROGRESS
S3AuthPublicPolicy AWS::IAM::Policy CREATE_IN_PROGRESS
S3AuthPrivatePolicy AWS::IAM::Policy CREATE_IN_PROGRESS

marchan

npm start

$ npm start

npm ERR! Missing script: "start"
npm ERR!
npm ERR! Did you mean one of these?
npm ERR! npm star # Mark your favorite packages
npm ERR! npm stars # View packages marked as favorites
npm ERR!
npm ERR! To see a list of scripts, run:
npm ERR! npm run

npm ERR! A complete log of this run can be found in: /home/ec2-user/.npm/_logs/2024-06-24T04_32_08_789Z-debug-0.log

$ npm init -y

Wrote to /home/ec2-user/environment/amplify-upload/package.json:

{
"name": "amplify-upload",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo "Error: no test specified" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}

$ npm install react react-dom react-scripts

npm WARN deprecated inflight@1.0.6: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.
npm WARN deprecated @babel/ plugin-proposal-class-properties@7.18.6: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-class-properties instead.
npm WARN deprecated @babel/plugin-proposal-numeric-separator@7.18.6: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-numeric-separator instead.
npm WARN deprecated @babel/plugin-proposal-nullish-coalescing-operator@7.18.6: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-nullish-coalescing-operator instead.
npm WARN deprecated @babel/plugin-proposal-private-methods@7.18.6: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-private-methods instead.
npm WARN deprecated stable@0.1.8: Modern JS already guarantees Array#sort() is a stable sort, so this library is deprecated. See the compatibility table on MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#browser_compatibility
npm WARN deprecated rollup-plugin-terser@7.0.2: This package has been deprecated and is no longer maintained. Please use @rollup/plugin-terser
npm WARN deprecated @babel/plugin-proposal-optional-chaining@7.21.0: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-optional-chaining instead.
npm WARN deprecated abab@2.0.6: Use your platform's native atob() and btoa() methods instead
npm WARN deprecated @humanwhocodes/config-array@0.11.14: Use @eslint/config-array instead
npm WARN deprecated rimraf@3.0.2: Rimraf versions prior to v4 are no longer supported
npm WARN deprecated glob@7.2.3: Glob versions prior to v9 are no longer supported
npm WARN deprecated @humanwhocodes/object-schema@2.0.3: Use @eslint/object-schema instead
npm WARN deprecated domexception@2.0.1: Use your platform's native DOMException instead
npm WARN deprecated q@1.5.1: You or someone you depend on is using Q, the JavaScript Promise library that gave JavaScript developers strong feelings about promises. They can almost certainly migrate to the native JavaScript promise now. Thank you literally everyone for joining me in this bet against the odds. Be excellent to each other.
npm WARN deprecated
npm WARN deprecated (For a CapTP with native promises, see @endo/eventual-send and @endo/captp)
npm WARN deprecated w3c-hr-time@1.0.2: Use your platform's native performance.now() and performance.timeOrigin.
npm WARN deprecated sourcemap-codec@1.4.8: Please use @jridgewell/sourcemap-codec instead
npm WARN deprecated workbox-cacheable-response@6.6.0: workbox-background-sync@6.6.0
npm WARN deprecated workbox-google-analytics@6.6.0: It is not compatible with newer versions of GA starting with v4, as long as you are using GAv3 it should be ok, but the package is not longer being maintained
npm WARN deprecated svgo@1.3.2: This SVGO version is no longer supported. Upgrade to v2.x.x.

added 1481 packages, and audited 1482 packages in 1m

262 packages are looking for funding
run npm fund for details

8 vulnerabilities (2 moderate, 6 high)

To address all issues, run:
npm audit fix

$ 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
node_modules/svgo/node_modules/nth-check
css-select <=3.1.0
Depends on vulnerable versions of nth-check
node_modules/svgo/node_modules/css-select
svgo 1.0.0 - 1.3.2
Depends on vulnerable versions of css-select
node_modules/svgo
@svgr/plugin-svgo <=5.5.0
Depends on vulnerable versions of svgo
node_modules/@svgr/plugin-svgo
@svgr/webpack 4.0.0 - 5.5.0
Depends on vulnerable versions of @svgr/plugin-svgo
node_modules/@svgr/webpack
react-scripts >=2.1.4
Depends on vulnerable versions of @svgr/webpack
Depends on vulnerable versions of resolve-url-loader
node_modules/react-scripts

postcss <8.4.31
Severity: moderate
PostCSS line return parsing error - https://github.com/advisories/GHSA-7fh5-64p2-3v2j
fix available via npm audit fix --force
Will install react-scripts@3.0.1, which is a breaking change
node_modules/resolve-url-loader/node_modules/postcss
resolve-url-loader 0.0.1-experiment-postcss || 3.0.0-alpha.1 - 4.0.0
Depends on vulnerable versions of postcss
node_modules/resolve-url-loader

8 vulnerabilities (2 moderate, 6 high)

To address all issues (including breaking changes), run:
npm audit fix --force

npm start のため package.json に以下の記述を追加する。
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
}

package.json

{
  "name": "amplify-upload",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-scripts": "^5.0.1"
  }
}

依存関係の再インストール

node_modules ディレクトリの削除

$ rm -rf node_modules

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

$ rm -f package-lock.json

キャッシュのクリア

$ npm cache clean --force

依存関係の再インストール

$ npm install

$ npm install
npm WARN deprecated stable@0.1.8: Modern JS already guarantees Array#sort() is a stable sort, so this library is deprecated. See the compatibility table on MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#browser_compatibility
npm WARN deprecated rollup-plugin-terser@7.0.2: This package has been deprecated and is no longer maintained. Please use @rollup/plugin-terser
npm WARN deprecated abab@2.0.6: Use your platform's native atob() and btoa() methods instead
npm WARN deprecated q@1.5.1: You or someone you depend on is using Q, the JavaScript Promise library that gave JavaScript developers strong feelings about promises. They can almost certainly migrate to the native JavaScript promise now. Thank you literally everyone for joining me in this bet against the odds. Be excellent to each other.
npm WARN deprecated
npm WARN deprecated (For a CapTP with native promises, see @endo/eventual-send and @endo/captp)
npm WARN deprecated inflight@1.0.6: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.
npm WARN deprecated glob@7.2.3: Glob versions prior to v9 are no longer supported
npm WARN deprecated domexception@2.0.1: Use your platform's native DOMException instead
npm WARN deprecated sourcemap-codec@1.4.8: Please use @jridgewell/sourcemap-codec instead
npm WARN deprecated @babel/plugin-proposal-optional-chaining@7.21.0: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-optional-chaining instead.
npm WARN deprecated rimraf@3.0.2: Rimraf versions prior to v4 are no longer supported
npm WARN deprecated w3c-hr-time@1.0.2: Use your platform's native performance.now() and performance.timeOrigin.
npm WARN deprecated @babel/plugin-proposal-private-methods@7.18.6: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-private-methods instead.
npm WARN deprecated @babel/plugin-proposal-nullish-coalescing-operator@7.18.6: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-nullish-coalescing-operator instead.
npm WARN deprecated @babel/plugin-proposal-class-properties@7.18.6: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-class-properties instead.
npm WARN deprecated @babel/plugin-proposal-numeric-separator@7.18.6: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-numeric-separator instead.
npm WARN deprecated @humanwhocodes/object-schema@2.0.3: Use @eslint/object-schema instead
npm WARN deprecated @humanwhocodes/config-array@0.11.14: Use @eslint/config-array instead
npm WARN deprecated workbox-cacheable-response@6.6.0: workbox-background-sync@6.6.0
npm WARN deprecated workbox-google-analytics@6.6.0: It is not compatible with newer versions of GA starting with v4, as long as you are using GAv3 it should be ok, but the package is not longer being maintained
npm WARN deprecated svgo@1.3.2: This SVGO version is no longer supported. Upgrade to v2.x.x.

added 1481 packages, and audited 1482 packages in 1m

262 packages are looking for funding
run npm fund for details

8 vulnerabilities (2 moderate, 6 high)

To address all issues (including breaking changes), run:
npm audit fix --force

Run npm audit for details.

$ npm audit

marchan

コピー元のプロジェクトからsrc ディレクトリをインポートする。
コピー元のsrc内 aws-exports.js は利用せず、新プロジェクト srcの中に生成されたファイルを利用する。
コピー元のsrc内 amplifyconfiguration.json は利用せず、新プロジェクト srcの中に生成されたファイルを利用する。

marchan

必要なパッケージのインストール

$ npm install react-router-dom @cloudscape-design/components aws-amplify

added 205 packages, and audited 1687 packages in 50s

269 packages are looking for funding
run npm fund for details

8 vulnerabilities (2 moderate, 6 high)

To address all issues (including breaking changes), run:
npm audit fix --force

Run npm audit for details.

$ npm install @aws-amplify/ui-react

added 86 packages, and audited 1773 packages in 15s

271 packages are looking for funding
run npm fund for details

npm isntall

up to date, audited 1687 packages in 7s

marchan

amplify hosting add

$ amplify hosting add

? Select the plugin module to execute … (Use arrow keys or type to filter)
Hosting with Amplify Console (Managed hosting with custom domains, Continuous deployment)
❯ Amazon CloudFront and S3　●
? hosting bucket name ‣ ? hosting bucket name ‣ amplifyupload-20240624054148-hostingbucket？hosting bucket name ✔ hosting bucket name · amplifyupload20240624
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

$ amplify push

✔ Successfully pulled backend environment dev from the cloud.

Current Environment: dev

┌──────────┬───────────────────────┬───────────┬───────────────────┐
│ Category │ Resource name │ Operation │ Provider plugin │
├──────────┼───────────────────────┼───────────┼───────────────────┤
│ Hosting │ S3AndCloudFront │ Create │ awscloudformation │
├──────────┼───────────────────────┼───────────┼───────────────────┤
│ Auth │ amplifyupload01c03a22 │ No Change │ awscloudformation │
├──────────┼───────────────────────┼───────────┼───────────────────┤
│ Storage │ s3ad563863 │ No Change │ awscloudformation │
└──────────┴───────────────────────┴───────────┴───────────────────┘
✔ Are you sure you want to continue? (Y/n) · yes

Deploying resources into dev environment. This will take a few minutes. ⠙
Deploying root stack amplifyupload [ ---------------------------------------- ] 0/4
Deploying hosting S3AndCloudFront [ ---------------------------------------- ] 0/4
🛑 Deployment is already in progress.

Resolution: Wait for the other deployment to finish and try again.
Learn more at: https://docs.amplify.aws/cli/project/troubleshooting/

Session Identifier: dd8ef3d9-dbb7-44ed-a3d1-32acb581d762
Deploying resources into dev environment. This will take a few minutes. ⠏
Deploying root stack amplifyupload [ ---------------------------------------- ] 0/4
Deploying hosting S3AndCloudFront [ ---------------------------------------- ] 0/4
✔ Done

Project Identifier: 62f880e822f1aca5b64544db91d99d69

$ npm install

up to date, audited 1773 packages in 7s

271 packages are looking for funding
run npm fund for details

8 vulnerabilities (2 moderate, 6 high)

To address all issues (including breaking changes), run:
npm audit fix --force

Run npm audit for details.

marchan

amplify push

$ amplify push

✔ Successfully pulled backend environment dev from the cloud.

Current Environment: dev

┌──────────┬───────────────────────┬───────────┬───────────────────┐
│ Category │ Resource name │ Operation │ Provider plugin │
├──────────┼───────────────────────┼───────────┼───────────────────┤
│ Hosting │ S3AndCloudFront │ Create │ awscloudformation │
├──────────┼───────────────────────┼───────────┼───────────────────┤
│ Auth │ amplifyupload01c03a22 │ No Change │ awscloudformation │
├──────────┼───────────────────────┼───────────┼───────────────────┤
│ Storage │ s3ad563863 │ No Change │ awscloudformation │
└──────────┴───────────────────────┴───────────┴───────────────────┘
✔ Are you sure you want to continue? (Y/n) · yes

Deployment completed.
Deployed root stack amplifyupload [ ======================================== ] 4/4
amplify-amplifyupload-dev-243… AWS::CloudFormation::Stack UPDATE_COMPLETE Mon Jun
storages3ad563863 AWS::CloudFormation::Stack UPDATE_COMPLETE Mon Jun
hostingS3AndCloudFront AWS::CloudFormation::Stack UPDATE_COMPLETE Mon Jun
authamplifyupload01c03a22 AWS::CloudFormation::Stack UPDATE_COMPLETE Mon Jun
Deployed hosting S3AndCloudFront [ ======================================== ] 4/4

Deployment state saved successfully.

$ npm install

added 1769 packages, and audited 1770 packages in 2m

271 packages are looking for funding
run npm fund for details

8 vulnerabilities (2 moderate, 6 high)
To address all issues (including breaking changes), run:
npm audit fix --force

Run npm audit for details.

amplify publish

$ amplify publish

✔ Successfully pulled backend environment dev from the cloud.

Current Environment: dev

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

No changes detected

? Do you still want to publish the frontend? Yes

amplify-upload@1.0.0 build
react-scripts build

Creating an optimized production build...
One of your dependencies, babel-preset-react-app, is importing the
"@babel/plugin-proposal-private-property-in-object" package without
declaring it in its dependencies. This is currently working because
"@babel/plugin-proposal-private-property-in-object" is already in your
node_modules folder for unrelated reasons, but it may break at any time.

babel-preset-react-app is part of the create-react-app project, which
is not maintianed anymore. It is thus unlikely that this bug will
ever be fixed. Add "@babel/plugin-proposal-private-property-in-object" to
your devDependencies to work around this error. This will make this message
go away.

Failed to compile.

Attempted import error: 'Auth' is not exported from 'aws-amplify' (imported as 'Auth').

frontend build command exited with code 1
🛑 1

Resolution: Please report this issue at https ://github.com/aws-amplify/amplify-cli/issues and include the project identifier from: 'amplify diagnose --send-report'
Learn more at: https ://docs.amplify.aws/cli/project/troubleshooting/

Session Identifier: dc627882-0b1d-40fd-8724-cd4a14ccb7f2

✅ Report saved: /tmp/amplifyupload/report-1719209945115.zip

✔ Done

Project Identifier: 62f880e822f1aca5b64544db91d99d69

$ npm install aws-amplify @aws-amplify/ui-react @aws-amplify/auth @aws-amplify/storage

changed 1 package, and audited 1770 packages in 11s

271 packages are looking for funding
run npm fund for details

8 vulnerabilities (2 moderate, 6 high)

To address all issues (including breaking changes), run:
npm audit fix --force

Run npm audit for details.

marchan

npm start

npm start

$ npm start

Failed to compile.

Attempted import error: 'Auth' is not exported from 'aws-amplify' (imported as 'Auth').
ERROR in ./src/utils/handleUpload.js 29:28-57
export 'Auth' (imported as 'Auth') was not found in 'aws-amplify' (possible exports: Amplify)

ERROR in ./src/utils/handleUpload.js 37:12-23
export 'Storage' (imported as 'Storage') was not found in 'aws-amplify' (possible exports: Amplify)

webpack compiled with 2 errors

package.json を編集する。（元のプロジェクトのファイルを参照）

{
  "name": "amplify-upload",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@aws-amplify/ui-react": "^5.0.2",
    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
    "@cloudscape-design/components": "^3.0.316",
    "@cloudscape-design/global-styles": "^1.0.10",
    "aws-amplify": "^5.3.1",
    "react": "^17.0.0",
    "react-dom": "^17.0.0",
    "react-router-dom": "^6.13.0",
    "react-scripts": "^5.0.1",
    "source-map-explorer": "^2.5.3"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

依存関係をインストールする。

$ npm install

npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: amplify-upload@1.0.0
npm ERR! Found: @aws-amplify/ui-react@6.1.12
npm ERR! node_modules/@aws-amplify/ui-react
npm ERR! @aws-amplify/ui-react@"^5.0.2" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! @aws-amplify/ui-react@"^5.0.2" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: aws-amplify@5.3.19
npm ERR! node_modules/aws-amplify
npm ERR! peerOptional aws-amplify@"^5.0.1" from @aws-amplify/ui-react@5.3.3
npm ERR! node_modules/@aws-amplify/ui-react
npm ERR! @aws-amplify/ui-react@"^5.0.2" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR!
npm ERR! For a full report see:
npm ERR! /home/ec2-user/.npm/_logs/2024-06-24T06_41_27_169Z-eresolve-report.txt

npm ERR! A complete log of this run can be found in: /home/ec2-user/.npm/_logs/2024-06-24T06_41_27_169Z-debug-0.log

legacy-peer-deps オプションを使用して依存関係をインストールする。

$ npm install --legacy-peer-deps

npm WARN deprecated @babel/plugin-proposal-private-property-in-object@7.21.11: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-private-property-in-object instead.
npm WARN deprecated rimraf@2.6.3: Rimraf versions prior to v4 are no longer supported
npm WARN deprecated querystring@0.2.0: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.
npm WARN deprecated uuid@3.4.0: Please upgrade to version 7 or higher. Older versions may use Math.random() in certain circumstances, which is known to be problematic. See https://v8.dev/blog/math-random for details.

added 474 packages, removed 99 packages, changed 59 packages, and audited 2145 packages in 36s

276 packages are looking for funding
run npm fund for details

8 vulnerabilities (2 moderate, 6 high)

To address all issues (including breaking changes), run:
npm audit fix --force

Run npm audit for details.

$ npm start

You can now view amplify-upload 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

aws-amplify と @aws-amplify/ui-react を v5からv6 にアップデート

aws-amplify と@aws-amplify/ui-reactをアンインストールする。

npm uninstall aws-amplify @aws-amplify/ui-react

pm WARN ERESOLVE overriding peer dependency
added 1 package, removed 611 packages, and audited 1535 packages in 22s
264 packages are looking for funding
run npm fund for details

aws-amplify と@aws-amplify/ui-reactの新しいバージョンをインストールする。

npm install aws-amplify@latest @aws-amplify/ui-react@latest

added 254 packages, and audited 1789 packages in 26s
272 packages are looking for funding

aws-amplify のバージョンを確認する。

$ npm list aws-amplify

amplify-upload@1.0.0 /home/ec2-user/environment/amplify-upload
├─┬ @aws-amplify/ui-react@6.1.12
│ ├─┬ @aws-amplify/ui-react-core@3.0.16
│ │ └── aws-amplify@6.3.7 deduped
│ ├─┬ @aws-amplify/ui@6.0.16
│ │ └── aws-amplify@6.3.7 deduped
│ └── aws-amplify@6.3.7 deduped
└── aws-amplify@6.3.7

react のバージョンを確認する。

$ npm list react

amplify-upload@1.0.0 /home/ec2-user/environment/amplify-upload
├─┬ @aws-amplify/ui-react@6.1.12
│ ├─┬ @aws-amplify/ui-react-core@3.0.16
│ │ ├─┬ react-hook-form@7.52.0
│ │ │ └── react@17.0.2 deduped
│ │ └── react@17.0.2 deduped
│ ├─┬ @radix-ui/react-direction@1.0.0
│ │ └── react@17.0.2 deduped
│ ├─┬ @radix-ui/react-dropdown-menu@1.0.0
│ │ ├─┬ @radix-ui/react-compose-refs@1.0.0
│ │ │ └── react@17.0.2 deduped
│ │ ├─┬ @radix-ui/react-context@1.0.0
│ │ │ └── react@17.0.2 deduped
│ │ ├─┬ @radix-ui/react-id@1.0.0
│ │ │ └── react@17.0.2 deduped
│ │ ├─┬ @radix-ui/react-menu@1.0.0
│ │ │ ├─┬ @radix-ui/react-dismissable-layer@1.0.0
│ │ │ │ ├─┬ @radix-ui/react-use-escape-keydown@1.0.0
│ │ │ │ │ └── react@17.0.2 deduped
│ │ │ │ └── react@17.0.2 deduped
│ │ │ ├─┬ @radix-ui/react-focus-guards@1.0.0
│ │ │ │ └── react@17.0.2 deduped
│ │ │ ├─┬ @radix-ui/react-focus-scope@1.0.0
│ │ │ │ └── react@17.0.2 deduped
│ │ │ ├─┬ @radix-ui/react-popper@1.0.0
│ │ │ │ ├─┬ @floating-ui/react-dom@0.7.2
│ │ │ │ │ └── react@17.0.2 deduped
│ │ │ │ ├─┬ @radix-ui/react-arrow@1.0.0
│ │ │ │ │ └── react@17.0.2 deduped
│ │ │ │ ├─┬ @radix-ui/react-use-rect@1.0.0
│ │ │ │ │ └── react@17.0.2 deduped
│ │ │ │ └── react@17.0.2 deduped
│ │ │ ├─┬ @radix-ui/react-portal@1.0.0
│ │ │ │ └── react@17.0.2 deduped
│ │ │ ├─┬ @radix-ui/react-presence@1.0.0
│ │ │ │ └── react@17.0.2 deduped
│ │ │ ├─┬ @radix-ui/react-roving-focus@1.0.0
│ │ │ │ └── react@17.0.2 deduped
│ │ │ ├─┬ @radix-ui/react-slot@1.0.0
│ │ │ │ └── react@17.0.2 deduped
│ │ │ ├─┬ @radix-ui/react-use-callback-ref@1.0.0
│ │ │ │ └── react@17.0.2 deduped
│ │ │ ├─┬ react-remove-scroll@2.5.4
│ │ │ │ ├─┬ react-remove-scroll-bar@2.3.6
│ │ │ │ │ └── react@17.0.2 deduped
│ │ │ │ ├─┬ react-style-singleton@2.2.1
│ │ │ │ │ └── react@17.0.2 deduped
│ │ │ │ ├── react@17.0.2 deduped
│ │ │ │ ├─┬ use-callback-ref@1.3.2
│ │ │ │ │ └── react@17.0.2 deduped
│ │ │ │ └─┬ use-sidecar@1.1.2
│ │ │ │ └── react@17.0.2 deduped
│ │ │ └── react@17.0.2 deduped
│ │ ├─┬ @radix-ui/react-primitive@1.0.0
│ │ │ └── react@17.0.2 deduped
│ │ ├─┬ @radix-ui/react-use-controllable-state@1.0.0
│ │ │ └── react@17.0.2 deduped
│ │ └── react@17.0.2 deduped
│ ├─┬ @radix-ui/react-slider@1.0.0
│ │ ├─┬ @radix-ui/react-collection@1.0.0
│ │ │ └── react@17.0.2 deduped
│ │ ├─┬ @radix-ui/react-use-layout-effect@1.0.0
│ │ │ └── react@17.0.2 deduped
│ │ ├─┬ @radix-ui/react-use-previous@1.0.0
│ │ │ └── react@17.0.2 deduped
│ │ ├─┬ @radix-ui/react-use-size@1.0.0
│ │ │ └── react@17.0.2 deduped
│ │ └── react@17.0.2 deduped
│ ├─┬ @xstate/react@3.2.2
│ │ ├── react@17.0.2 deduped
│ │ ├─┬ use-isomorphic-layout-effect@1.1.2
│ │ │ └── react@17.0.2 deduped
│ │ └─┬ use-sync-external-store@1.2.2
│ │ └── react@17.0.2 deduped
│ └── react@17.0.2 deduped
├─┬ @cloudscape-design/components@3.0.664
│ ├─┬ @cloudscape-design/collection-hooks@1.0.48
│ │ └── react@17.0.2 deduped
│ ├─┬ @dnd-kit/core@6.1.0
│ │ ├─┬ @dnd-kit/accessibility@3.1.0
│ │ │ └── react@17.0.2 deduped
│ │ └── react@17.0.2 deduped
│ ├─┬ @dnd-kit/sortable@7.0.2
│ │ └── react@17.0.2 deduped
│ ├─┬ @dnd-kit/utilities@3.2.2
│ │ └── react@17.0.2 deduped
│ ├─┬ react-keyed-flatten-children@1.3.0
│ │ └── react@17.0.2 deduped
│ ├─┬ react-transition-group@4.4.5
│ │ └── react@17.0.2 deduped
│ └── react@17.0.2 deduped
├─┬ react-dom@17.0.2
│ └── react@17.0.2 deduped
├─┬ react-router-dom@6.23.1
│ ├─┬ react-router@6.23.1
│ │ └── react@17.0.2 deduped
│ └── react@17.0.2 deduped
├─┬ react-scripts@5.0.1
│ └── react@17.0.2 deduped
└── react@17.0.2

Reactを最新版にアップグレードする。

$ npm install react@latest react-dom@latest

ARN ERESOLVE overriding peer dependency
npm WARN While resolving: amplify-upload@1.0.0
npm WARN Found: react@17.0.2
npm WARN node_modules/react
npm WARN peer react@"^16.14.0 || ^17.0 || ^18.0" from @aws-amplify/ui-react@6.1.12
npm WARN node_modules/@aws-amplify/ui-react
npm WARN @aws-amplify/ui-react@"^6.1.12" from the root project
npm WARN 49 more (@aws-amplify/ui-react-core, ...)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer react@"17.0.2" from react-dom@17.0.2
npm WARN node_modules/react-dom
npm WARN peer react-dom@"^16.14.0 || ^17.0 || ^18.0" from @aws-amplify/ui-react@6.1.12
npm WARN node_modules/@aws-amplify/ui-react
npm WARN 18 more (@cloudscape-design/components, @dnd-kit/core, ...)
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: amplify-upload@1.0.0
npm WARN Found: react@17.0.2
npm WARN node_modules/react
npm WARN peer react@"^16.14.0 || ^17.0 || ^18.0" from @aws-amplify/ui-react@6.1.12
npm WARN node_modules/@aws-amplify/ui-react
npm WARN @aws-amplify/ui-react@"^6.1.12" from the root project
npm WARN 49 more (@aws-amplify/ui-react-core, ...)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer react@"17.0.2" from react-dom@17.0.2
npm WARN node_modules/react-dom
npm WARN peer react-dom@"^16.14.0 || ^17.0 || ^18.0" from @aws-amplify/ui-react@6.1.12
npm WARN node_modules/@aws-amplify/ui-react
npm WARN 18 more (@cloudscape-design/components, @dnd-kit/core, ...)
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: amplify-upload@1.0.0
npm WARN Found: react@17.0.2
npm WARN node_modules/react
npm WARN peer react@"^16.14.0 || ^17.0 || ^18.0" from @aws-amplify/ui-react@6.1.12
npm WARN node_modules/@aws-amplify/ui-react
npm WARN @aws-amplify/ui-react@"^6.1.12" from the root project
npm WARN 49 more (@aws-amplify/ui-react-core, ...)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer react@"17.0.2" from react-dom@17.0.2
npm WARN node_modules/react-dom
npm WARN peer react-dom@"^16.14.0 || ^17.0 || ^18.0" from @aws-amplify/ui-react@6.1.12
npm WARN node_modules/@aws-amplify/ui-react
npm WARN 18 more (@cloudscape-design/components, @dnd-kit/core, ...)

changed 3 packages, and audited 1789 packages in 11s

272 packages are looking for funding
run npm fund for details

AWS Amplify を最新バージョンにアップグレードする。

$ npm install aws-amplify@latest @aws-amplify/ui-react@latest

up to date, audited 1789 packages in 8s

272 packages are looking for funding
run npm fund for details

8 vulnerabilities (2 moderate, 6 high)

To address all issues (including breaking changes), run:
npm audit fix --force

Amplify の設定変更

import React from 'react';
import { createRoot } from 'react-dom/client';

import { BrowserRouter as Router } from 'react-router-dom';
import { Amplify } from 'aws-amplify';
import awsconfig from './aws-exports';
import './index.css';
import App from './App';

Amplify.configure(awsconfig);

const rootElement = document.getElementById('root');
const root = createRoot(rootElement);

root.render(
  <React.StrictMode>
    <Router>
      <App />
    </Router>
  </React.StrictMode>
);

marchan

2024.06.25(火)

aws-amplify @aws-amplify/ui-reactをもとに戻す

"aws-amplifyをv5に戻す @aws-amplify/ui-reactをv5 に戻す。
package.json を元に戻す

{
  "name": "amplify-upload",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@aws-amplify/ui-react": "^5.0.2",
    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
    "@cloudscape-design/components": "^3.0.316",
    "@cloudscape-design/global-styles": "^1.0.10",
    "aws-amplify": "^5.3.1",
    "react": "^17.0.0",
    "react-dom": "^17.0.0",
    "react-router-dom": "^6.13.0",
    "react-scripts": "^5.0.1",
    "source-map-explorer": "^2.5.3"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

node_modulesディレクトリと package-lock.json　ファイルを削除する。

$ rm -rf node_modules package-lock.json

依存関係を再インストールする。

$ npm install

各ファイルについて元に、auth storage のインポート処理記述を元に戻す。
<Authenticator hideSignUp={true}> や css .amplify-tabs { display: none;}

-　App.css を編集する。

App.csss

/*This CSS hide the signUp tab*/
.amplify-tabs {
  display: true; ●false から true に変更
}

marchan

このセクションは未作業

Cognito user にs3 へのアップロード権限

IAM ロールとポリシーの設定
IAM ポリシーを作成する。 CognitoS3AccessPolicy

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Effect": "Allow",
            "Action": [
                "s3:PutObject",
                "s3:GetObject",
                "s3:ListBucket"
            ],
            "Resource": [
                "arn:aws:s3:::your-bucket-name",
                "arn:aws:s3:::your-bucket-name/*"
            ]
        }
    ]
}

上記のポリシーを使用して新しい IAM ロールを作成する。 CognitoS3AccessRole
信頼関係を以下のように設定する。

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Effect": "Allow",
            "Principal": {
                "Federated": "cognito-identity.amazonaws.com"
            },
            "Action": "sts:AssumeRoleWithWebIdentity",
            "Condition": {
                "StringEquals": {
                    "cognito-identity.amazonaws.com:aud": "YOUR_COGNITO_IDENTITY_POOL_ID"
                },
                "ForAnyValue:StringLike": {
                    "cognito-identity.amazonaws.com:amr": "authenticated"
                }
            }
        }
    ]
}

ロールにポリシーをアタッチする。
Cognito の ID プール設定
aws-exports.js または Amplify.configure に正しい Cognito ID プール ID を設定する。

marchan

amplify push

$ amplify push

⠇ Fetching updates to backend environment: dev from the cloud.⠋ Building resource auth/amplifyupl✔ Successfully pulled backend environment dev from the cloud.

Current Environment: dev

No changes detected

amplify publish

$ amplify publish

╭──────────────────────────────────────────────
│ │
│ Update available: │
│ Run amplify upgrade for the latest features and fixes! │
│ │
╰──────────────────────────────────────────────

⠇ Fetching updates to backend environment: dev from the cloud.⠋ Building resource auth/amplifyupl✔ Successfully pulled backend environment dev from the cloud.

Current Environment: dev

No changes detected

? Do you still want to publish the frontend? Yes

amplify-upload@1.0.0 build
react-scripts build

Creating an optimized production build...
Compiled successfully.

File sizes after gzip:

316.97 kB build/static/js/main.34010d8c.js
77.9 kB build/static/css/main.3caea47c.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

Cannot find the distribution folder.
Distribution folder is currently set as:
/home/ec2-user/environment/amplify-upload/dist

🛑 Cannot find the distribution folder.

Resolution: Please report this issue at https://github.com/aws-amplify/amplify-cli/issues and include the project identifier from: 'amplify diagnose --send-report'
Learn more at: https: //docs.amplify.aws/cli/project/troubleshooting/

Session Identifier: 61826b01-9ddd-40de-bc95-cfca1b0543fb

✅ Report saved: /tmp/amplifyupload/report-1719300666041.zip

✔ Done

Project Identifier: 62f880e822f1aca5b64544db91d99d69

npm run build

$ npm run build

amplify-upload@1.0.0 build
react-scripts build

Creating an optimized production build...
Compiled successfully.

File sizes after gzip:

316.97 kB build/static/js/main.34010d8c.js
77.9 kB build/static/css/main.3caea47c.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

marchan

2024.06.26(水)
auth storage hosting を一度削除してやりなおし

$ amplify remove auth
$ amplify remove storage
$ amplify remove hosting

$ amplify configure project

AWS Profile setting
| Selected profile: default

Advanced: Container-based deployments
| Leverage container-based deployments: No

? Which setting do you want to configure? Project information
? Enter a name for the project amplifyupload
? Choose your default editor: Visual Studio Code
✔ Choose the type of app that you're building · javascript
Please tell us about your project
? What javascript framework are you using react
? Source Directory Path: src
? Distribution Directory Path: build
? Build Command: npm run build
? Start Command: npm run start
Using default provider awscloudformation
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

Successfully made configuration changes to your project.

amplify add auth

$ amplify add auth

Using service: Cognito, provided by: awscloudformation

The current configured provider is Amazon Cognito.

Do you want to use the default authentication and security configuration? Default configuration
Warning: you will not be able to edit these selections.
How do you want users to be able to sign in? Email
Do you want to configure advanced settings? No, I am done.
✅ Successfully added auth resource amplifyupload82bfe643 locally

amplify add storage

$ amplify add storage

? 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: · amplifyupload

✔ Provide bucket name: · amplifyupload
✔ Who should have access: · Auth users only
✔ What kind of access do you want for Authenticated users? · create/update
✔ Do you want to add a Lambda Trigger for your S3 Bucket? (y/N) · no
✅ Successfully added resource amplifyupload locally

amplify add hosting

$ amplify add hosting

✔ Select the plugin module to execute · Amazon CloudFront and S3
✔ hosting bucket name · amplifyupload-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

npm install

$ npm install

up to date, audited 2554 packages in 11s

282 packages are looking for funding
run npm fund for details

8 vulnerabilities (2 moderate, 6 high)

To address all issues (including breaking changes), run:
npm audit fix --force

Run npm audit for details.

npm run build

$ npm run build

amplify-upload@1.0.0 build
react-scripts build

Creating an optimized production build...
Compiled successfully.

File sizes after gzip:

316.61 kB (-377 B) build/static/js/main.06bb9c93.js
77.9 kB build/static/css/main.3caea47c.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

amplify push

$ amplify push

⠇ Fetching updates to backend environment: dev from the cloud.⠋ Building resource auth/amplifyupl✔ Successfully pulled backend environment dev from the cloud.

Current Environment: dev

┌──────────┬───────────────────────┬───────────
│ Category │ Resource name │ Operation │ Provider plugin │
├──────────┼───────────────────────┼───────────
│ Auth │ amplifyupload82bfe643 │ Create │ awscloudformation │
├──────────┼───────────────────────┼───────────
│ Storage │ amplifyupload │ Create │ awscloudformation │
├──────────┼───────────────────────┼───────────
│ Hosting │ S3AndCloudFront │ Update │ awscloudformation │
├──────────┼───────────────────────┼───────────
│ Auth │ amplifyupload01c03a22 │ Delete │ awscloudformation │
├──────────┼───────────────────────┼───────────
│ Storage │ s3ad563863 │ Delete │ awscloudformation │
└──────────┴───────────────────────┴───────────
✔ Are you sure you want to continue? (Y/n) · yes

Deployment completed.
Deploying root amplify-amplifyupload-dev-243… storageamplifyupload hostingS3AndCloudFront authamplifyupload82bfe643 Deploying auth UserPoolClientRole UserPool UserPoolClientWeb UserPoolClient IdentityPool IdentityPoolRoleMap Deployed storage S3AuthUploadPolicy S3AuthPrivatePolicy S3AuthPublicPolicy S3AuthProtectedPolicy Deployed hosting S3Bucket PrivateBucketPolicy CloudFrontDistribution stack amplifyupload [ ==============================---------- ] 3/4
AWS::CloudFormation::Stack UPDATE_COMPLETE_CLEANUP_
AWS::CloudFormation::Stack CREATE_COMPLETE
AWS::CloudFormation::Stack UPDATE_COMPLETE
AWS::CloudFormation::Stack CREATE_COMPLETE
amplifyupload82bfe643 [ ========================================--------
AWS::IAM::Role DELETE_COMPLETE
AWS::Cognito::UserPool DELETE_COMPLETE
AWS::Cognito::UserPoolClient DELETE_COMPLETE
AWS::Cognito::UserPoolClient DELETE_COMPLETE
AWS::Cognito::IdentityPool DELETE_COMPLETE
AWS::Cognito::IdentityPoolRol… DELETE_COMPLETE
amplifyupload [ ======================================== ] 7/7
AWS::IAM::Policy CREATE_IN_PROGRESS
AWS::IAM::Policy CREATE_IN_PROGRESS
AWS::IAM::Policy CREATE_IN_PROGRESS
AWS::IAM::Policy CREATE_IN_PROGRESS
S3AndCloudFront [ ======================================== ] 4/4
AWS::S3::Bucket UPDATE_COMPLETE
AWS::S3::BucketPolicy UPDATE_COMPLETE
AWS::CloudFront::Distribution UPDATE_COMPLETE

Deployment state saved successfully.

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

amplify publish

amplify publish

⠇ Fetching updates to backend environment: dev from the cloud.⠋ Building resource auth/amplifyupl✔ Successfully pulled backend environment dev from the cloud.

Current Environment: dev

No changes detected

? Do you still want to publish the frontend? Yes

amplify-upload @1.0.0 build
react-scripts build

Creating an optimized production build...
Compiled successfully.

File sizes after gzip:

316.97 kB (+363 B) build/static/js/main.21564385.js
77.9 kB build/static/css/main.3caea47c.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

amplify init

amplify add auth

amplify add storage

npm install

amplify push

npm start

依存関係の再インストール

必要なパッケージのインストール

amplify hosting add

amplify push

amplify publish

npm start

aws-amplify と @aws-amplify/ui-react を v5からv6 にアップデート

Amplify の設定変更

aws-amplify @aws-amplify/ui-reactをもとに戻す

Cognito user にs3 へのアップロード権限

amplify push

amplify publish

npm run build

auth storage hosting を一度削除してやりなおし

amplify add auth

amplify add storage

amplify add hosting

npm install

npm run build

amplify push

amplify publish