Amplifyの準備をしよう！

久しぶりすぎる。。。
転職してから、忙しく・・・無いのですが、技術的なことをなーーーんにもしてなかったので、
最近やっていることをメモ書きします。

フルスタック？というと、馬鹿にされるか、笑われるか、激詰めされるのいずれかですが、堂々とフルスタックを謡っているツールがあります。

それが、AWS Amplifyです。

インフラ屋の自分でも何か作れるのか？と思いとりあえず環境準備をしました。

テンプレートを起動する


まずは、テンプレートをインストールします。

npm create vite@latest createAutoTest -- --template react-ts
│
◇  Package name:　<Package名>

でこうするとPackage名のフォルダができます。
続いて、移動して、起動してみます。

 cd <Package名>
  npm install
  npm run dev

でここまで実行すると以下のWeb画面が表示されます。

AmplifyからAWSにリソースを作ろう

続いて、cognitoのリソースを作成して、認証画面を作成します。

プロジェクトフォルダのルートに移動して、amplifyのライブラリをインストールします。

npm add --save-dev @aws-amplify/backend@latest @aws-amplify/backend-cli@latest

つづいて、プロジェクトフォルダ直下にamplifyフォルダとawsのリソースを定義するファイルを作成します。

mkdir amplify
touch amplify/backend.ts　#awsにデプロイするリソースを定義

次にamplify/backend.tsを以下の様にします。

//backendを定義するためのライブラリ
import {defineBackend} from '@aws-amplify/backend'

defineBackend({})

そしたら　サンドボックスにリソースを立てましょう。

npx ampx sandbox

サンドボックスは使用したことがないと、初回セットアップ画面がブラウザで表示されるので、初期化を最初に実行します。

その後、ルートフォルダにamplify_outputs.jsonが作成されます。ここにリソースの定義が出力されていきます。

続いて認証リソースのファイルを作成とライブラリをインストールします。

mkidr amplify/auth
touch amplify/auth/resource.ts
npm add --save-dev @aws-amplify/ui-react

リソースファイルには以下の様に記載します。

// 認証モジュールをインポート
import { defineAuth } from "@aws-amplify/backend"

// 認証機能を定義。ここではメール設定
export const auth = defineAuth({
  loginWith: {
    email: true,
  },
})

次にbackend.tsにリソースファイルに定義した[auth]をインポートして、バックエンドとして機能するように
設定します。

//backendを定義するためのライブラリをインポート
import {defineBackend} from '@aws-amplify/backend'
// ./auth/resourceファイルからauthをインポート
import { auth } from "./auth/resource"

// /auth/resourceでエクスポートしてあるauthをBackendに設定
defineBackend({auth})

ここまで実施することで、認証機能が使えるようになります。
次に画面に認証画面が表示されるように設定します。

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

//以下を追加
//amplifyUIライブラリを読み込み
import { Authenticator } from '@aws-amplify/ui-react';
import { Amplify } from 'aws-amplify';
//AWSのリソース設定をインポート
import outputs from '../amplify_outputs.json';
import '@aws-amplify/ui-react/styles.css';

//AWSのリソース設定を読み込む
Amplify.configure(outputs)

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

  return (
    <>
   {/* Authenticatorを追加*/}
      <Authenticator>
      <div>
      ・・・・
      </Authenticator>
    </>
  )
}

export default App

Authenticatorタグで括ると、認証画面を突破すると、タグ内のリソースを参照できるようになります。

認証画面は以下のような画面になります。