NextJSプロジェクトをAmplifyにデプロイする
この記事について
NextJSプロジェクトをAmplifyにデプロイする方法について、自分用に備忘録として記載
準備
プロジェクトの作成
作成時点のnode.jsは20.11.0
cf. https://nextjs.org/docs/getting-started/installation
npx create-next-app@latest
を叩いてプロジェクトを作成。この時のnextのバージョンは14.2.4だった。
Githubの準備
プロジェクトはGithubで管理することにする。Amplify使うならCodeCommitを利用したほうが良さそうだけど、個人的に利用していることが多いのでGithubを採用した。
リモートリポジトリを作成して、先ほど作成したプロジェクトをリモートにプッシュしておく。
Amplifyの準備
Amplifyの作成を開始する。最初にGithubを使ってデプロイを選択する。
Githubのリポジトリ選択画面に入るので、準備していたリモートリポジトリを選択する。
初回時には以下を参考に設定が必要。
アプリケーション名を入れる。自動検出されたフレームワークにNext.jsとなっていることを確認しておく。
デプロイすると、すぐにサイトが公開されてしまう。リリースの準備ができるまでは認証をかけて入れないようにしておきたい。
そこで、「自分のサイトをパスワードで保護」をチェックして、ユーザー名とパスワードを決めて入れておく。これは後で必要なのでメモしておく。
あとは全部デフォルトの設定なので作成まで進む。
終わると以下のような画面になっているはず。ここに記載のリンクをクリックするとサイトが表示される。（さっき決めたIDとパスワードを入れる必要がある）
これでAmplifyを使ってデプロイが完了する。
ユーザー認証
Amplifyを使ってユーザー認証を実施する。trialをクリックしたあと、認証>ユーザー管理に進む。
初期設定方法が記載されているのでこれに従って作業をする。
次にターミナルでnpm run devをした後にnpx ampx sandboxを叩いてサンドボックスの準備をする。
以下のような画面が勝手に立ち上がるので、「今すぐ設定を初期化」をクリックする。
次に認証周りを簡単にテストするためにUIパッケージを入れる
npm add @aws-amplify/ui-react
src/app/page.tsxを以下のように書き換える。
'use client'
import outputs from '../../amplify_outputs.json'
import { Amplify } from 'aws-amplify'
import { Authenticator } from '@aws-amplify/ui-react'
Amplify.configure(outputs)
export default function Home() {
return (
<main className="flex min-h-screen flex-col items-center justify-between p-24">
<Authenticator>
{({ signOut, user}) => (
<>
<button onClick={signOut}>Sign out</button>
</>
)}
</Authenticator>
</main>
);
}
うまくいっていれば以下のような画面で登録、ログイン、ログアウトが試せるようになっている。
Discussion