AWS AmplifyとReact を始めたメモ #amplify

Reactで作ったWebアプリをAWSで実行させたいと思って、AWSのチュートリアルをやったメモです。

参考にした情報
AWS Amplifyの公式チュートリアル
 Amplify Docsのチュートリアルを試してみる
 AWS Amplifyの公式チュートリアルでToDoリストアプリ（React）をデプロイしてみた
 AWS Amplify フレームワーク入門メモ

チュートリアルを1回目に進めた時に、実行したコマンドなどのメモ

npm install -g @aws-amplify/cli
amplify configure
npx create-react-app react-amplified
amplify init
npm install aws-amplify @aws-amplify/ui-react
amplify add api
amplify push
amplify status
amplify console api
amplify console

App.jsの中身を置き換える

npm start
amplify add auth
amplify push
amplify console

App.jsに login UI を追記するが、チュートリアルの通りにするとエラーになるので次のURLの通りに更新する
https://note.com/cudhub/n/nba179d0b484b#344e7a9e-e347-45bc-b4b3-9874ffae8be6

npm start
amplify add hosting
amplify publish

課金しないように削除（S3など全て削除される）

amplify delete

2回目にチュートリアルを実行したメモ

npx create-react-app react-amplified

アプリ実行を確認

npm start

App.jsをオリジナルのコードに入れ替えて、再度アプリ実行を確認

App.js

import React, { useState } from "react";

function App() {
  const [ count, setCount ] = useState(0);
  const onPressMinusOne = () => {
    setCount(count - 1);
  };
  const onPressPlusOne = () => {
    setCount(count + 1);
  };
  return (
    <>
      <button onClick={onPressMinusOne}>-1</button>
      <div>{count}</div>
      <button onClick={onPressPlusOne}>+1</button>
    </>
  );
}

export default App;

npm start
amplify init
npm install aws-amplify @aws-amplify/ui-react

src/index.jsにimportを追記

index.js

import { Amplify } from 'aws-amplify';
import awsExports from './aws-exports';
Amplify.configure(awsExports);

amplify add api

上記コマンド実行すると amplify/backend/api/myapi/schema.graphql がVScodeで起動します

amplify push
amplify status
npm start

今回は味見ですぐ消すのでauthentication抜きでデプロイします

amplify add hosting
amplify publish

コンソールに表示されたURLにアクセスするとWebアプリが表示されました
https://dev.***.amplifyapp.com

最後にdeleteして片付けます

amplify delete
amplify status

以上