Open7

Amplify Gen2 auth storage (amplify-transcription)

marchanmarchan

  • 2024.06.17(月)

  • 「amplify-transcription」という名前のReactプロジェクトをTypeScriptテンプレートと最新版の Vite で作成する。

npm create vite@latest amplify-transcription -- --template react-ts

Scaffolding project in /home/ec2-user/environment/amplify-transcription...

Done. Now run:

cd amplify-transcription
npm install
npm run dev

  • ディレクトリを移動して作成されたファイルを確認する。
$ cd amplify-transcription
$ ls -ls

total 24
4 -rw-r--r--. 1 ec2-user ec2-user 1300 Jun 17 01:32 README.md
4 -rw-r--r--. 1 ec2-user ec2-user 366 Jun 17 01:32 index.html
4 -rw-r--r--. 1 ec2-user ec2-user 756 Jun 17 01:32 package.json
0 drwxr-xr-x. 2 ec2-user ec2-user 22 Jun 17 01:32 public
0 drwxr-xr-x. 3 ec2-user ec2-user 104 Jun 17 01:32 src
4 -rw-r--r--. 1 ec2-user ec2-user 605 Jun 17 01:32 tsconfig.json
4 -rw-r--r--. 1 ec2-user ec2-user 233 Jun 17 01:32 tsconfig.node.json
4 -rw-r--r--. 1 ec2-user ec2-user 163 Jun 17 01:32 vite.config.ts

  • 依存関係をインストールする
$ npm install

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 @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 @humanwhocodes/object-schema@2.0.3: Use @eslint/object-schema instead
npm WARN deprecated glob@7.2.3: Glob versions prior to v9 are no longer supported

added 214 packages, and audited 215 packages in 20s

41 packages are looking for funding
run npm fund for details

found 0 vulnerabilities

  • これは「現在のプロジェクトの依存関係に既知のセキュリティ脆弱性が存在しないことを意味している。

  • 開発サーバーを起動する

$ npm run dev

VITE v5.3.1 ready in 496 ms

➜ Local: http://localhost:5173/
➜ Network: use --host to expose
➜ press h + enter to show help

  • Cloud9 でプレビューするため、src/ vite.config.ts の内容を変更する。
$ cat vite.config.ts
vite.config.ts
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  // cloud9 port
  server: {
    port: 8080,
  },
  plugins: [react()],
})
  • 開発サーバが自動再起動される。

amplify-transcription@0.0.0 dev
vite

VITE v5.3.1 ready in 496 ms

➜ Local: http://localhost:5173/
➜ Network: use --host to expose
➜ press h + enter to show help
1:48:42 AM [vite] vite.config.ts changed, restarting server...
1:48:42 AM [vite] server restarted.

➜ Local: http://localhost:8080/
➜ Network: use --host to expose
1:48:58 AM [vite] vite.config.ts changed, restarting server...
1:48:58 AM [vite] server restarted.

  • 上記にて、開発サーバが自動再起動され、ポートが5173から8080に変更となる。

  • ブラウザ上部 Preview > Preview Running Application をクリックすると、ブラウザの新規ウィンドウにプロジェクトの初期画面が表示される。

  • 左：ターミナル　右：プロジェクト初期画面

参考記録

src/App.tsx
import { useState } from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'

function App() {
  const [count, setCount] = useState(0)

  return (
    <>
      <div>
        <a href="https://vitejs.dev" target="_blank">
          <img src={viteLogo} className="logo" alt="Vite logo" />
        </a>
        <a href="https://react.dev" target="_blank">
          <img src={reactLogo} className="logo react" alt="React logo" />
        </a>
      </div>
      <h1>Vite + React</h1>
      <div className="card">
        <button onClick={() => setCount((count) => count + 1)}>
          count is {count}
        </button>
        <p>
          Edit <code>src/App.tsx</code> and save to test HMR
        </p>
      </div>
      <p className="read-the-docs">
        Click on the Vite and React logos to learn more
      </p>
    </>
  )
}

export default App
marchanmarchan

backend を作成

  • @aws-amplify/backend を開発時のみの依存関係としてインストールする。
$ npm add --save-dev @aws-amplify/backend@latest

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-object-rest-spread@7.20.7: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-object-rest-spread instead.
npm WARN deprecated core-js@2.6.12: core-js@<3.23.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Some versions have web compatibility issues. Please, upgrade your dependencies to the actual version of core-js.

added 438 packages, and audited 769 packages in 1m

119 packages are looking for funding
run npm fund for details

found 0 vulnerabilities

  • @aws-amplify/backend-cli を開発時のみの依存関係としてインストールする。
$ npm add --save-dev @aws-amplify/backend-cli@latest

added 479 packages, and audited 1248 packages in 39s

163 packages are looking for funding
run npm fund for details

found 0 vulnerabilities

  • amplifyディレクトリ、backend.tsファイルを新規作成する。
$ mkdir amplify
$ touch amplify/backend.ts
amplify/backend.ts
import { defineBackend } from '@aws-amplify/backend';

defineBackend({});

参考記録

package.json
{
  "name": "amplify-transcription",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@aws-amplify/backend": "^1.0.3",
    "@aws-amplify/backend-cli": "^1.0.4",
    "@types/react": "^18.2.66",
    "@types/react-dom": "^18.2.22",
    "@typescript-eslint/eslint-plugin": "^7.2.0",
    "@typescript-eslint/parser": "^7.2.0",
    "@vitejs/plugin-react": "^4.2.1",
    "eslint": "^8.57.0",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.4.6",
    "typescript": "^5.2.2",
    "vite": "^5.2.0"
  }
}
marchanmarchan

sandboxを作成

  • npm run devを実行中のターミナルと別のターミナルを開きいて、ampx パッケージの sandbox サブコマンドを実行する。
$ npx ampx sandbox

省略
Outputs:
amplify-amplifytranscription-ec2user-sandbox-16c78e7b06.deploymentType = sandbox
amplify-amplifytranscription-ec2user-sandbox-16c78e7b06.region = ap-northeast-1
Stack ARN:
arn:aws:cloudformation:ap-northeast-1:053423220213:stack/amplify-amplifytranscription-ec2user-sandbox-16c78e7b06/0c8272e0-2c56-11ef-a2e3-0af4c91b437d

✨ Total time: 6.05s

[Sandbox] Watching for file changes...
File written: amplify_outputs.json

  • amplify_outputs.json ファイルが生成されたことを確認する。
$ ls -ls

total 716
4 -rw-r--r--. 1 ec2-user ec2-user 1300 Jun 17 02:36 README.md
0 drwxr-xr-x. 2 ec2-user ec2-user 24 Jun 17 02:52 amplify
4 -rw-r--r--. 1 ec2-user ec2-user 20 Jun 17 03:02 amplify_outputs.json
4 -rw-r--r--. 1 ec2-user ec2-user 366 Jun 17 02:36 index.html
32 drwxr-xr-x. 475 ec2-user ec2-user 16384 Jun 17 02:59 node_modules
656 -rw-r--r--. 1 ec2-user ec2-user 670983 Jun 17 02:59 package-lock.json
4 -rw-r--r--. 1 ec2-user ec2-user 836 Jun 17 02:59 package.json
0 drwxr-xr-x. 2 ec2-user ec2-user 22 Jun 17 02:36 public
0 drwxr-xr-x. 3 ec2-user ec2-user 104 Jun 17 02:36 src
4 -rw-r--r--. 1 ec2-user ec2-user 605 Jun 17 02:36 tsconfig.json
4 -rw-r--r--. 1 ec2-user ec2-user 233 Jun 17 02:36 tsconfig.node.json
4 -rw-r--r--. 1 ec2-user ec2-user 213 Jun 17 02:45 vite.config.ts

$ cat amplify_outputs.json

{
"version": "1"
}

  • aws management console にて、sandboxが生成されたことを確認する。
marchanmarchan

backend 認証機能（Cognito）

  • authディレクトリ、resource.tsファイルを作成する。
$ mkdir -p amplify/auth
$ touch amplify/auth/resource.ts
  • amplify/auth/resource.tsを編集する。
ampliify/auth/resource.ts
import { defineAuth } from '@aws-amplify/backend';

export const auth = defineAuth({
  loginWith: {
    email: true
  },
  multifactor: {
    mode: 'OPTIONAL',
    totp: true
  }
});
  • amplify/backend.tsファイルを編集して、authを追加する。
amplify/backend.ts
import { defineBackend } from '@aws-amplify/backend';
import { auth } from './auth/resource';　●追加

defineBackend({});●削除
defineBackend({●追加
     auth,●追加
});●追加
marchanmarchan

frontend 認証機能（Cognito）

  • @aws-amplify/ui-reactをインストールする。
$ npm add @aws-amplify/ui-react

added 316 packages, and audited 1564 packages in 43s

168 packages are looking for funding
run npm fund for details

found 0 vulnerabilitie

  • src/App.tsxを編集する（Authenticatorコンポーネントを追加）
src/App.tsx
import { useState } from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'

import '@aws-amplify/ui-react/styles.css'; // ●追加
import { Authenticator } from '@aws-amplify/ui-react';// ●追加
import { Amplify } from 'aws-amplify';// ●追加
import outputs from "../amplify_outputs.json";// ●追加

Amplify.configure(outputs);// ●追加

function App() {
  const [count, setCount] = useState(0)

  return (
+     <Authenticator>●追加
+       {({ signOut, user }) => (●追加
    <>
      <div>
        <a href="https://vitejs.dev" target="_blank">
          <img src={viteLogo} className="logo" alt="Vite logo" />
        </a>
        <a href="https://react.dev" target="_blank">
          <img src={reactLogo} className="logo react" alt="React logo" />
        </a>
      </div>
      <h1>Vite + React</h1>
      <div className="card">
        <button onClick={() => setCount((count) => count + 1)}>
          count is {count}
        </button>
        <p>
          Edit <code>src/App.tsx</code> and save to test HMR
        </p>
      </div>
      <p className="read-the-docs">
        Click on the Vite and React logos to learn more
      </p>
    </>
+       )}●追加
+     </Authenticator>　●追加
  )
}

export default App
  • Preview Running Application で確認する。
marchanmarchan

backend storage機能（s3）

  • storage、resource.tsファイルを作成する。
amplify/storage/resource.ts
$ mkdir -p amplify/storage                                 
$ touch amplify/storage/resource.ts
  • amplify/storage/resource.tsを編集する。
amplify/storage/resource.ts
import { defineStorage } from '@aws-amplify/backend';

export const storage = defineStorage({
  name: 'amplify-transcript-storage'
});
  • amplify/backend.tsファイルを編集して、storage機能を追加する。
import { defineBackend } from '@aws-amplify/backend';
import { auth } from './auth/resource';

import { storage } from './storage/resource'; //●追加

const backend = defineBackend({
  auth,
  storage, //●追加
});
});
  • sandboxで cloudformationが動作する。

✨ Total time: 57.05s

[Sandbox] Watching for file changes...
File written: amplify_outputs.json

  • aws management console にて、s3 bucket が生成されたことを確認する。
marchanmarchan

frontend storage機能（s3）

  • @aws-amplify/ui-react-storageのインストール
npm add @aws-amplify/ui-react-storage aws-amplify

added 1 package, and audited 2224 packages in 19s

170 packages are looking for funding
run npm fund for details

found 0 vulnerabilities

※　ここまで　一時停止中