$ npm create vite@latest amplify-qrticket -- --template react-ts   

Ok to proceed? (y) y

$ cd amplify-qrticket/
$ ls -ls

$ npm install

$ npm run dev

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
// https://vitejs.dev/config/
export default defineConfig({
  // cloud9が許可するポート番号
  server: {　●追加
    port: 8080,　●追加
  },  　●追加
  plugins: [react()],
})

$ npm run dev

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

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

~/environment/amplify-qrticket $ mkdir amplify
~/environment/amplify-qrticket $ touch amplify/backend.ts

import { defineBackend } from '@aws-amplify/backend';

defineBackend({});

~/environment/amplify-qrticket $ npx ampx sandbox

~/environment/amplify-qrticket $ cat amplify_outputs.json

~/environment/amplify-qrticket/amplify $ mkdir auth
~/environment/amplify-qrticket/amplify $ touch auth/resource.ts

import { defineAuth } from '@aws-amplify/backend';
export const auth = defineAuth({
    loginWith: {
        email: true
    }
});

import { defineBackend } from '@aws-amplify/backend';
import { auth } from './auth/resource';　●追加

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

npm add @aws-amplify/ui-react

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.tsx'
import './index.css'
  
import '@aws-amplify/ui-react/styles.css'　●追加

import { Amplify } from 'aws-amplify'　●追加
import outputs from '../amplify_outputs.json'　●追加
Amplify.configure(outputs)　●追加
  
ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
      <App />
  </React.StrictMode>,
)

  import { useState } from 'react'
  import reactLogo from './assets/react.svg'
  import viteLogo from '/vite.svg'
  import './App.css'
+ import { Authenticator } from '@aws-amplify/ui-react'●追加
  
  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

$ npm run dev

$ npx ampx sandbox

$ npx ampx sandbox

$ npm add --save-dev aws-lambda

import { defineFunction } from '@aws-amplify/backend';

export const hello = defineFunction({
    name: 'hello',
    entry: './handler.ts',
})

import { Handler } from 'aws-lambda';

export const handler: Handler = async (event, context) => {
    return { message: 'Hello, World' }
}

import { defineBackend } from '@aws-amplify/backend';
import { auth } from './auth/resource';
import { hello } from './function/hello/resource'　●追加

const backend = defineBackend({　●修正
  auth,
  hello,　●追加
});

import { defineBackend } from '@aws-amplify/backend';
import { auth } from './auth/resource';
import { hello } from './function/hello/resource'

const backend = defineBackend({
  auth,
  hello,
});

//認証されたユーザーのIAMロールの取得　●追加
const authenticatedUserIamRole = backend.auth.resources.authenticatedUserIamRole;

//Lambda関数への実行権限の付与　●追加
backend.hello.resources.lambda.grantInvoke(authenticatedUserIamRole);

import { defineBackend } from '@aws-amplify/backend';
import { auth } from './auth/resource';
import { hello } from './function/hello/resource'
const backend = defineBackend({
  auth,
  hello,
});
//認証されたユーザーのIAMロールの取得
const authenticatedUserIamRole = backend.auth.resources.authenticatedUserIamRole;
//Lambda関数への実行権限の付与
backend.hello.resources.lambda.grantInvoke(authenticatedUserIamRole);
//
backend.addOutput({
  custom: {
    helloFunctionName: backend.hello.resources.lambda.functionName,
  },
});

{
  "auth": {
    "user_pool_id": "ap-northeast-1_L**",
    "aws_region": "ap-northeast-1",
    "user_pool_client_id": "36senjs1893d0mmgkj***",
    "identity_pool_id": "ap-northeast-1:48d676ec-e3e8-4d91-95a6-***",
    "standard_required_attributes": [
      "email"
    ],
    "username_attributes": [
      "email"
    ],
    "user_verification_types": [
      "email"
    ],
    "password_policy": {
      "min_length": 8,
      "require_numbers": true,
      "require_lowercase": true,
      "require_uppercase": true,
      "require_symbols": true
    },
    "unauthenticated_identities_enabled": true
  },
  "version": "1",
  "custom": {
    "helloFunctionName": "amplify-amplifyqrticket-ec2use-hel***" ●確認した
  }
}

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

import { Authenticator } from '@aws-amplify/ui-react'

import { InvokeCommand, LambdaClient } from '@aws-sdk/client-lambda'　●追加
import { fetchAuthSession } from 'aws-amplify/auth'　●追加
  
import outputs from "../amplify_outputs.json"　●追加

function App() {
  const [count, setCount] = useState(0)
　●追加　ここから
  const [text, setText] = useState("")
  
  async function invokeHelloWorld() {

    const { credentials } = await fetchAuthSession()
    const awsRegion = outputs.auth.aws_region
    const functionName = outputs.custom.helloFunctionName

    const labmda = new LambdaClient({ credentials: credentials, region: awsRegion })
    const command = new InvokeCommand({
      FunctionName: functionName,
    });
    const apiResponse = await labmda.send(command);

    if (apiResponse.Payload) {
      const payload = JSON.parse(new TextDecoder().decode(apiResponse.Payload))
      setText(payload.message)
    }
  }
●追加　ここまで
  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>
      <p>●追加
        <button onClick={invokeHello}>invokeHello</button>●追加
        <div>{text}</div>●追加
      </p>●追加
    </>
        )}
    </Authenticator>
  )
}
export default App

$ node --version
v18.18.2
$ npm --version
9.8.1
$ aws --version
aws-cli/2.15.10 Python/3.11.6 Linux/6.1.66-93.164.amzn2023.x86_64 exe/x86_64.amzn.2023 prompt/off

$ npx ampx sandbox

$ npm run dev

npm add --save-dev @aws-sdk/client-bedrock-runtime

$ mkdir amplify/function/bedrock
$ touch amplify/function/bedrock/resource.ts
$ touch amplify/function/bedrock/handler.ts

import { defineFunction } from '@aws-amplify/backend';

export const bedrock = defineFunction({
    name: 'bedrock',
    entry: './handler.ts',
})

// AWS Lambdaのハンドラーとコンテキスト型をインポート
import { Context, Handler } from 'aws-lambda';

// Node.jsのストリームライブラリからWritableクラスをインポート
import { Writable } from 'stream';

// AWS SDKからBedrockRuntimeClientとInvokeModelWithResponseStreamCommandをインポート
import {
    BedrockRuntimeClient,
    InvokeModelWithResponseStreamCommand,
} from "@aws-sdk/client-bedrock-runtime";

// イベントタイプを定義しprompt 文字列を持つオブジェクト
type eventType = {
    prompt: string
}

// 使用するモデルのIDを定義
const modelId = "anthropic.claude-3-haiku-20240307-v1:0"

// Lambda関数のハンドラを非同期関数として定義
export const handler: Handler = awslambda.streamifyResponse(
    async (event: eventType, responseStream: Writable, _context: Context) => {

        // BedrockRuntimeClientのインスタンスを作成し、リージョンを指定
        const client = new BedrockRuntimeClient({ region: "us-east-1" });

        // Lambda関数へ送信するデータペイロードを定義
        const payload = {
            anthropic_version: "bedrock-2023-05-31",
            max_tokens: 1000,
            messages: [
                {
                    role: "user",
                    content: [{ type: "text", text: event.prompt }],
                },
            ],
        };

        // モデルに対するコマンドを生成し、リクエストの内容と型を指定
        const command = new InvokeModelWithResponseStreamCommand({
            contentType: "application/json",
            body: JSON.stringify(payload),
            modelId,
        });

        // APIコマンドを送信し、レスポンスを取得
        const apiResponse = await client.send(command);

        // レスポンスのボディを反復処理し、内容に基づいて条件分岐
        if (apiResponse.body) {
            for await (const item of apiResponse.body) {
                if (item.chunk) {
                    // 受け取ったチャンクデータをJSONとして解析し、ストリームに書き込み
                    const chunk = JSON.parse(new TextDecoder().decode(item.chunk.bytes));
                    const chunk_type = chunk.type;

                    // コンテンツタイプが「content_block_delta」の場合、テキストをレスポンスストリームに書き込み
                    if (chunk_type === "content_block_delta") {
                        const text = chunk.delta.text;
                        responseStream.write(text);
                    }
                } else if (item.internalServerException) {
                    throw item.internalServerException
                } else if (item.modelStreamErrorException) {
                    throw item.modelStreamErrorException
                } else if (item.throttlingException) {
                    throw item.throttlingException
                } else if (item.validationException) {
                    throw item.validationException
                }
            }
        }

        // ストリームの終了を宣言
        responseStream.end()
    }
)

import { defineBackend } from '@aws-amplify/backend';
import { auth } from './auth/resource';
import { hello } from './function/hello/resource'
import { bedrock } from './function/bedrock/resource'
import * as iam from 'aws-cdk-lib/aws-iam';

const backend = defineBackend({
  auth,
  hello,
  bedrock,●追加
});

//認証されたユーザーのIAMロールの取得
const authenticatedUserIamRole = backend.auth.resources.authenticatedUserIamRole;

●ここから追加
const bedrockStatement = new iam.PolicyStatement({
  actions: ["bedrock:InvokeModel", "bedrock:InvokeModelWithResponseStream"],
  resources: ["arn:aws:bedrock:us-east-1::foundation-model/*"]
})
●ここまで追加
//Lambda関数への実行権限の付与
backend.hello.resources.lambda.grantInvoke(authenticatedUserIamRole);
backend.bedrock.resources.lambda.grantInvoke(authenticatedUserIamRole);●追加

backend.bedrock.resources.lambda.addToRolePolicy(bedrockStatement)●追加

//amplify_outputs.jsonにLambda関数名を出力する。
backend.addOutput({
  custom: {
    helloFunctionName: backend.hello.resources.lambda.functionName,
    bedrockFunctionName: backend.bedrock.resources.lambda.functionName,●追加
  },
});

✨  Total time: 0.27s
[Sandbox] Watching for file changes...
File written: amplify_outputs.json