【AWS Amplify Gen2】Next.js の App Router をデプロイ＆Basic 認証を付ける方法

Posted at 2025-01-07

はじめに

AWS Amplify が Gen2 にアップデートされましたが、Next.js の App Router を使って Amplify Gen2 を試したことがなかったので、本記事では備忘録も兼ねてデプロイ手順をまとめています。公式のクイックスタートガイドは以下の通りです。

まとめ

スターターテンプレートを利用することで、AWS Amplify Gen2 上に Next.js (App Router) のアプリを約 20 分でデプロイ可能
Amplify コンソール上でバックエンドやホスティング設定も一括管理できる
ローカルで変更した内容をプッシュすれば自動で再デプロイされる
Basic 認証を使って簡単なアクセス制御をかけることもできる

環境情報

node -v
v23.5.0

npm -v
10.9.2

スターターテンプレートを使ってリポジトリ作成

下記のリンクをクリックし、スターターテンプレートからリポジトリを作成します。
https://github.com/new?template_name=amplify-next-template&template_owner=aws-samples&name=amplify-next-template&description=My%20Amplify%20Gen%202%20starter%20application
任意のリポジトリ名を設定し、Create repository ボタンを押下すると、GitHub 上にリポジトリが作成されます。

Amplify コンソールでデプロイ

AWS コンソールにログインし、Amplify サービスへ移動します。
アプリケーションをデプロイ → GitHub を選択します。
GitHub アカウントの認証を行い、main ブランチを選択します。特に他の変更は行わずに次へ進み、保存してデプロイ をクリックします。

デプロイには 10 分ほどかかります。完了したら画面右上にある 「デプロイされた URL にアクセス」 を押下し、アプリケーションが正しくデプロイされているか確認しましょう。

下記のように、ToDo アプリケーションが表示されます。

バックエンドのデプロイも自動的に行われるため、数分待つだけで簡単に動作する ToDo アプリを確認できます。ここまで約 20 分ほどで完了しました。

ローカルで修正してみる

次に、ローカル環境でアプリを修正してデプロイまでの流れを確認しましょう。

先ほど作成したリポジトリをクローンします。

git clone https://github.com/<github-user>/amplify-next-template.git
cd amplify-next-template && npm install

AWS コンソール → Amplify → デプロイされたバックエンドリソース から amplify_outputs.json をダウンロードします。
ダウンロードした amplify_outputs.json を、プロジェクトのルートディレクトリに配置します。
```
amplify/
src/
amplify_outputs.json  <== backend outputs file
package.json
tsconfig.json
```
開発サーバを立ち上げて、ローカルでの動作を確認します。
```
npm run dev
```

Todo の削除機能を追加する

app/page.tsx に削除機能（deleteTodo）を新しく追加してみましょう。デフォルトで生成されていた Todo アプリに、以下のような削除機能を追加します。

変更後の page.tsx

"use client";

import { useState, useEffect } from "react";
import { generateClient } from "aws-amplify/data";
import type { Schema } from "@/amplify/data/resource";
import "./../app/app.css";
import { Amplify } from "aws-amplify";
import outputs from "@/amplify_outputs.json";
import "@aws-amplify/ui-react/styles.css";

Amplify.configure(outputs);

const client = generateClient<Schema>();

export default function App() {
  const [todos, setTodos] = useState<Array<Schema["Todo"]["type"]>>([]);

  function listTodos() {
    client.models.Todo.observeQuery().subscribe({
      next: (data) => setTodos([...data.items]),
    });
  }

  useEffect(() => {
    listTodos();
  }, []);

  function createTodo() {
    client.models.Todo.create({
      content: window.prompt("Todo content"),
    });
  }

  function deleteTodo(id: string) {
    client.models.Todo.delete({ id });
  }

  return (
    <main>
      <h1>My todos</h1>
      <button onClick={createTodo}>+ new</button>
      <ul>
        {todos.map((todo) => (
          <li onClick={() => deleteTodo(todo.id)} key={todo.id}>
            {todo.content}
          </li>
        ))}
      </ul>
      <div>
        🥳 App successfully hosted. Try creating a new todo.
        <br />
        <a href="https://docs.amplify.aws/nextjs/start/quickstart/nextjs-app-router-client-components/">
          Review next steps of this tutorial.
        </a>
      </div>
    </main>
  );
}

ローカルで動作が確認できたら、git push origin main して GitHub にプッシュします。Amplify が自動で再ビルド・再デプロイしてくれるので、完了後に再度デプロイ先 URL にアクセスして動作確認を行いましょう。

CICD に関する設定は、Amplify の アプリケーションの設定 → ブランチの設定 から確認・変更できます。

Basic 認証をかける

最後に、簡易的な認証を実装するため、Amplify コンソールの Basic 認証 を有効にしてみましょう。

AWS コンソール → Amplify → 対象アプリケーションの ホスティング → アクセスコントロール を開きます。
アクセスの制限を「制限（パスワードが必須です）」に設定し、任意のユーザー名とパスワードを入力します。
設定が完了すると、デプロイされたアプリケーションにアクセスする際に Basic 認証が求められるようになります。

おわりに

AWS Amplify はフロントエンドとバックエンドが一体化しており、個人開発やプロトタイプまでを短時間で構築できるのが魅力です。本記事では Next.js の App Router を利用したサンプルをベースに、Amplify Gen2 でのデプロイ方法や Basic 認証の設定を紹介しました。
次回は認証機能（Cognito 連携など）の追加方法などをまとめたいと思います。

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up