Zenn
Open3

操作履歴 aws Amplify Gen2 デモ amplify-social-room.git

AWS
Amplify
marchanmarchan

https://aws.amazon.com/jp/blogs/news/amplify-gen2-ga/

  • 2024.05.20(月)

  • GitHub テンプレートを起点としてリポジトリを新規に作成する

  • クローンした GitHub リポジトリのアプリを Amplify でホストする

  • リポジトリをローカルにクローンする。

amplify_outputs.json (management Consoleからダウンロード)

  • main をクリックする。

  • デプロイされたバックエンドリソースをクリックする。

  • Download amplify_outputs.json をクリックする。

  • amplify_outputs.json をダウンロードしてリポジトリのルートにコピーする。

main.tsx

$ cd src
$ cat main.tsx

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.tsx'
import './index.css'
import { Amplify } from 'aws-amplify';
import '@aws-amplify/ui-react/styles.css'
import outputs from '../amplify_outputs.json'

Amplify.configure(outputs);

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
      <App />
  </React.StrictMode>,
)

resource.ts

$ cd ../amplify/auth
$ ls -ls
total 4
4 -rw-r--r--. 1 ec2-user ec2-user 236 May 20 05:14 resource.ts
$ cat resource.ts

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

/**
 * Define and configure your auth resource
 * @see https://docs.amplify.aws/gen2/build-a-backend/auth
 */
export const auth = defineAuth({
  loginWith: {
    email: true,
  },
});
marchanmarchan

npm install

npm install

src/main.tx を編集

  • import { Authenticator } from '@aws-amplify/ui-react';を追加
  • <Authenticator>を追加
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.tsx'
import './index.css'
import { Amplify } from 'aws-amplify';
import { Authenticator } from '@aws-amplify/ui-react';　●追加
import '@aws-amplify/ui-react/styles.css'
import outputs from '../amplify_outputs.json'

Amplify.configure(outputs);

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <Authenticator>●追加
      <App />
    </Authenticator>●追加
  </React.StrictMode>,
)