2024.06.21(金)

frontend

元のプロジェクトの srcディレクトリ public ディレクトリを新しいプロジェクトにコピーする。

$  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 init

This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See npm help init for definitive documentation on these fields
and exactly what they do.

Use npm install <pkg> afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
package name: (s3upload-cognitoemail)
version: (1.0.0)
description:
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)
About to write to /home/ec2-user/environment/s3upload-cognitoemail/package.json:

{
"name": "s3upload-cognitoemail",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo "Error: no test specified" && exit 1"
},
"author": "",
"license": "ISC"
}
Is this OK? (yes) yes ● yes を入力

ls -ls

$ ls -ls
total 4
0 drwxr-xr-x. 6 ec2-user ec2-user 143 Jun 21 02:03 amplify
4 -rw-r--r--. 1 ec2-user ec2-user 217 Jun 21 02:31 package.json ●新規作成された
0 drwxr-xr-x. 5 ec2-user ec2-user 186 Jun 20 07:29 s3uploader-ui
0 drwxr-xr-x. 2 ec2-user ec2-user 61 Jun 20 07:36 src

$ cat package.json

{
"name": "s3upload-cognitoemail",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo "Error: no test specified" && exit 1"
},
"author": "",
"license": "ISC"
}

  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "echo \"Error: no test specified\" && exit 1"
  },

package.json を編集する。

package.json

{
  "name": "s3upload-cognitoemail",
  "version": "0.2.0",
  "private": true,
  "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"
  },
  "scripts": {
    "analyze": "source-map-explorer 'build/static/js/*.js'",
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "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

added 2553 packages, and audited 2554 packages in 3m

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 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
Compiled successfully!

開発サーバを起動する。

npm start

You can now view s3upload-cognitoemail 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

Preview Runnning Application で閲覧する。

/src/aws-exports.json を修正

/src (main)  $ ls -ls

4 -rw-r--r--. 1 ec2-user ec2-user 1257 Jun 14 15:00 aws-exports.js

フロントエンドプロジェクトに新しいバックエンドの設定を反映させる。

/src (main)  $ amplify pull

Pre-pull status:
Current Environment: dev
┌──────────┬──────────────────────────────┬────
│ Category │ Resource name │ Operation │ Provider plugin │
├──────────┼──────────────────────────────┼────
│ Auth │ s3uploadcognitoemail76241edd │ No Change │ awscloudformation │
├──────────┼──────────────────────────────┼────
│ Storage │ s3cognitoemail │ No Change │ awscloudformation │
├──────────┼──────────────────────────────┼────
│ Hosting │ S3AndCloudFront │ No Change │ awscloudformation │
└──────────┴──────────────────────────────┴────

✔ Successfully pulled backend environment dev from the cloud.
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
✅
Post-pull status:

Current Environment: dev

┌──────────┬──────────────────────────────┬────
│ Category │ Resource name │ Operation │ Provider plugin │
├──────────┼──────────────────────────────┼────
│ Auth │ s3uploadcognitoemail76241edd │ No Change │ awscloudformation │
├──────────┼──────────────────────────────┼────
│ Storage │ s3cognitoemail │ No Change │ awscloudformation │
├──────────┼──────────────────────────────┼────
│ Hosting │ S3AndCloudFront │ No Change │ awscloudformation │
└──────────┴──────────────────────────────┴────

/src (main)  $ ls -lt

-rw-r--r--. 1 ec2-user ec2-user 1085 Jun 21 06:21 amplifyconfiguration.json　●新規作成
-rw-r--r--. 1 ec2-user ec2-user 1327 Jun 21 06:21 aws-exports.js　●新規作成
-rw-r--r--. 1 ec2-user ec2-user 1704 Jun 14 08:08 App.js

開発サーバを起動する。

$ npm start

GitHubリポジトリのクローン

依存関係のインストール

Amplifyの初期化

認証(Cognito)の追加

Storage(s3)の追加

ホスティング機能(s3 CloudFront)の追加

依存関係のインストール

確認

backendをデプロイ(amplify push)

cognito ユーザに s3 アップロード権限

backendとfrontendをデプロイ(amplify publish)

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

frontend

/src/aws-exports.json を修正

Github

認証(Cognito)の追加【再】