前回は、AWS Amplify で認証を追加しました。

今回は、開発したプロジェクトを AWS Amplify でデプロイします。

ホーム画面に読書リストが来るよう、開発していたプロジェクトを修正します。

また、Signin や Signup も AWS でするようになったので、削除します。

App.tsx

import React from "react"
import { Route, Switch } from "react-router-dom"
import { withAuthenticator } from "@aws-amplify/ui-react"
import "@aws-amplify/ui-react/styles.css"

import "./App.css"
import Dashboard from "./layout/Dashboard"
import Account from "./pages/Account"
import Book from "./pages/Book"
import BookDetail from "./pages/BookDetail"
import Signin from "./pages/Signin"
import Signup from "./pages/Signup"

function App() {
  return (
    <div className="App">
      <Switch>
        <Route exact path="/">
          <Dashboard>
            <Book />
          </Dashboard>
        </Route>
        <Route path="/book/:id">
          <Dashboard>
            <BookDetail />
          </Dashboard>
        </Route>
        <Route path="/account">
          <Dashboard>
            <Account />
          </Dashboard>
        </Route>
      </Switch>
    </div>
  )
}

export default withAuthenticator(App)

まずは、プロジェクトにホスティングを追加します。

プロジェクトのディレクトリに移動し、ターミナルで、amplify add hosting を実行します。

どのプラグインモジュールを使うかと聞かれるので、『Hosting with Amplify Console』を選択します。

image2

デプロイの方法を聞かれます。

今回限りのデプロイなので、『Manual Deployment』を選択します。

image3

ホスティングが完了しました。

image4

ターミナルの指示通り、amplify publish を実行します。

エンターキーを押します。

image5

デプロイが完了しました。

image6

ターミナルの Deployment complete の下にある URL にカーソルを当てて、Ctrl を押しながらクリックしてブラウザを起動します。

image7

image8

ログイン画面が表示されました。

ログインすると、

image9

読書リスト画面へ遷移しました。

ブログ一覧