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

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

https://docs.amplify.aws/nextjs/start/quickstart/nextjs-app-router-client-components/


## まとめ

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



## 環境情報

```zsh
node -v
v23.5.0
```

```zsh
npm -v
10.9.2
```

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


1. 下記のリンクをクリックし、スターターテンプレートからリポジトリを作成します。
   [https://github.com/new?template_name=amplify-next-template&template_owner=aws-samples&name=amplify-next-template&description=My%20Amplify%20Gen%202%20starter%20application](https://github.com/new?template_name=amplify-next-template&template_owner=aws-samples&name=amplify-next-template&description=My%20Amplify%20Gen%202%20starter%20application)

2. 任意のリポジトリ名を設定し、**Create repository** ボタンを押下すると、GitHub 上にリポジトリが作成されます。

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/95954/b9b6467a-6ead-f76e-4639-ce0451192f66.png)

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/95954/628b327e-5a8c-37c1-8ed1-5e8b7e892767.png)



## Amplify コンソールでデプロイ

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

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/95954/589b8c2f-9f0e-0a88-4ae2-b62e03da71e3.png)

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

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/95954/5dc2b5d9-d5c1-d7de-44b1-1fc26f7d43f1.png)

下記のように、ToDo アプリケーションが表示されます。
![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/95954/12cb5ab9-9022-1239-1234-59c7918a0c9f.png)

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

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/95954/5fb009fe-efb0-05a8-191f-0e225602e6f7.png)

## ローカルで修正してみる

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

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

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

2. AWS コンソール → Amplify → **デプロイされたバックエンドリソース** から **amplify_outputs.json** をダウンロードします。
   ![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/95954/6589b3b1-ea04-e36b-9e10-f8eec2fdc1ad.png)

3. ダウンロードした **amplify_outputs.json** を、プロジェクトのルートディレクトリに配置します。

   ```zsh
   amplify/
   src/
   amplify_outputs.json  <== backend outputs file
   package.json
   tsconfig.json
   ```

4. 開発サーバを立ち上げて、ローカルでの動作を確認します。

   ```zsh
   npm run dev
   ```

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/95954/fb393937-37e7-2a5e-e58e-aee0118f7a79.png)



## Todo の削除機能を追加する

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

<details>
<summary>変更後の <code>page.tsx</code></summary>

```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>
  );
}
```

</details>

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


![スクリーンショット 2025-01-07 21.54.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/95954/90d70da9-2f09-94dc-66bd-7396de28747d.png)

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

![FireShot Capture 145 - ブランチの設定 - Amplify - ap-northeast-1 - ap-northeast-1.console.aws.amazon.com.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/95954/8da37402-b4c8-fed8-f7ee-f7bae3f51ecf.png)




## Basic 認証をかける

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

1. AWS コンソール → Amplify → 対象アプリケーションの **ホスティング** → **アクセスコントロール** を開きます。
   ![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/95954/d692769a-8670-05e7-3c22-038f418bccff.png)

2. アクセスの制限を「制限（パスワードが必須です）」に設定し、任意のユーザー名とパスワードを入力します。

3. 設定が完了すると、デプロイされたアプリケーションにアクセスする際に Basic 認証が求められるようになります。

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/95954/3f9e3013-5f07-dd1c-c54b-a13998501bd7.png)

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