AmplifyでNext.jsのアプリケーションをデプロイしよう

この章では、Amplify HostingへのNext.jsアプリケーションのデプロイをハンズオン形式で学習します。これにより、環境変数の設定・プレビュー環境・Basic認証・ビルド通知まで、Amplifyの一連の機能を使いこなせるようになります。

1. 本章の概要

1.1 本章の目的

Next.jsのようなJavaScriptベースのフロントエンドアプリケーションはS3+CloudFrontで配信することもできますが、Amplify Hostingを使うとGitHub連携による自動デプロイ、ブランチごとのプレビュー環境、Basic認証、ビルド通知など、実務で必要になる機能をノーコードでまとめて用意できます。本章はAWS講座を締めくくるハンズオンとして、Amplify Hostingの主要機能を1つのAmplifyアプリケーションで一気通貫に体験します。

1.2 ハンズオンの流れ

サンプルのタスク管理アプリケーションをGitHubリポジトリからAmplify Hostingにデプロイします。デプロイ後、環境変数の設定、featureブランチのデプロイとBasic認証、ビルド通知、応用的な設定の確認までを1つのAmplifyアプリケーションで体験します。

graph LR
    A[リポジトリの準備] --> B[Amplifyアプリケーションの作成]
    B --> C[動作確認]
    C --> D[環境変数の設定]
    D --> E[featureブランチのデプロイ]
    E --> F[ビルド通知の設定]
    F --> G[応用の設定]

1.3 事前準備

前提となる講座

この章では、以下の知識を前提としています。自信がない場合は先に関連講座を実施してみましょう。

必要なツール

この章では、以下のツールを使用します。まだインストールしていない場合は、リンク先の手順に沿って準備をお願いします。

必要なアカウント

この章では、以下のアカウントを使用します。まだ用意していない場合は、リンク先の手順に沿って準備をお願いします。

2. リポジトリの準備

Amplify Hostingは、GitHubなどのGitリポジトリと連携して自動デプロイを実現するサービスです。そのため、まずデプロイ対象となるアプリケーションのソースコードがGitHubリポジトリに存在している必要があります。

このセクションでは、シンプルなタスク管理アプリケーションが入ったサンプルリポジトリを使用します。自分のGitHubアカウントにフォークして、自由に変更をプッシュできる状態にしておきましょう。

2.1 サンプルリポジトリのフォーク

Amplifyと連携するには、自分のGitHubアカウントにリポジトリが存在する必要があります。以下の手順でサンプルリポジトリを自分のアカウントにフォークします。

まず、ブラウザで以下のURLにアクセスします。

https://github.com/gevanni-academy/devopscamp-amplify-sample

リポジトリページ右上にある「Fork」ボタンをクリックします。

「Create a new fork」画面が表示されるので、以下の設定を確認します。

設定を確認したら「Create fork」をクリックします。フォークが完了すると、自分のアカウントにリポジトリが作成され、リポジトリページに遷移します。

URLが https://github.com/<自分のユーザ名>/devopscamp-amplify-sample になっていれば、フォークは完了です。

2.2 ローカルへのクローン

後のセクションでコードを変更してプッシュする作業があるため、フォークしたリポジトリをローカル環境にクローンしておきます。

git clone https://github.com/<your-username>/devopscamp-amplify-sample.git

cd devopscamp-amplify-sample

2.3 アプリケーションの確認

本来であれば、Amplifyにデプロイする前にローカル環境でアプリケーションの動作確認を行うべきです。ローカルで動かないアプリケーションはデプロイしても動かないため、実際の開発では npm install と npm run dev を実行してブラウザで確認するのが基本です。

このセクションでは動作確認済みのサンプルリポジトリを使用しているため、ローカルでの確認は省略し、次のステップに進みます。

3. Amplifyアプリケーションの作成

リポジトリの準備ができたので、いよいよAmplifyにアプリケーションを登録してデプロイします。Amplifyでは「アプリケーション」という単位でデプロイ対象を管理します。アプリケーションを作成してGitHubリポジトリと紐付けることで、以降はコードをプッシュするだけで自動的にビルド・デプロイが実行されるようになります。

3.1 Amplifyコンソールへのアクセス

AWSマネジメントコンソールにログインし、検索バーで「Amplify」と入力してAWS Amplifyのコンソールを開きます。

3.2 アプリケーションの作成

Amplifyコンソールで「アプリケーションをデプロイ」をクリックします。

ソースコードプロバイダの選択

Amplifyがリポジトリからソースコードを取得できるように、ソースコードプロバイダとの連携を設定します。

ソースコードプロバイダとしてGitHubを選択し、「次へ」をクリックします。初回はGitHubとの認証が求められるので、画面の指示に従ってAmplifyにGitHubリポジトリへのアクセスを許可します。

リポジトリとブランチの選択

どのリポジトリのどのブランチをデプロイするかを指定します。Amplifyではブランチ単位でデプロイを管理するため、ここで選択したブランチにプッシュがあるたびに自動デプロイが実行されます。

ビルド設定の確認

Amplifyはリポジトリの内容から使用しているフレームワークを自動検出し、適切なビルドコマンドを生成します。ここでは、自動検出された設定が正しいかを確認します。

フレームワークの欄がNext.jsと表示されていれば、正しく検出されています。ビルド設定はデフォルトのまま変更せずに進めます。

デプロイの実行

設定を確認し、「保存してデプロイ」をクリックします。Amplifyがリポジトリからコードを取得し、ビルド・デプロイを自動で実行します。

デプロイが完了するまで数分かかります。

ステータスが「デプロイ済み」になるまで待ちましょう。

4. 動作確認

Amplifyアプリケーションの作成が完了したので、実際にデプロイされたアプリケーションにアクセスして動作を確認します。Amplifyはデプロイ完了時にアクセス用のURLを自動生成するため、そのURLを使ってブラウザからアクセスします。

デプロイが完了すると、Amplifyが自動生成したURLが表示されます。このURLにアクセスし、タスク管理アプリケーションが正しく表示されれば、デプロイは成功です。

URLは https://main.<app-id>.amplifyapp.com のような形式になります。画面にタスクの入力欄と「追加」ボタンが表示されていることを確認してください。

4.1 自動デプロイの確認

Amplifyの大きなメリットの一つは、GitHubにコードをプッシュするだけで自動的にビルド・デプロイが実行されることです。この自動デプロイが正しく機能しているか、実際にコードを変更してプッシュすることで確認してみましょう。

src/app/page.tsx のフッター部分のテキストを変更します。

<footer className="mt-10 text-center text-xs text-gray-400">
  DevOps Camp - Amplify Hands-on（自動デプロイ確認）
</footer>

変更をコミットしてプッシュします。

git add .

git commit -m "Update footer text"

git push

プッシュ後、Amplifyコンソールで新しいビルドが自動で開始されることを確認します。特に操作を行わなくても、GitHubのmainブランチが変更されたことをAmplifyが検知して、デプロイを開始してくれます。

ビルドが完了したら、URLにアクセスしてフッターのテキストが変更されていることを確認します。

自動デプロイが動作していることが確認できれば、GitHubとの連携は正常に機能しています。

5. 環境変数の設定

ここまでで、GitHubリポジトリからAmplifyへの自動デプロイができるようになりました。しかし、実際のアプリケーション開発では、APIのエンドポイントURLやアプリケーションの動作モードなど、コードには直接書かずに環境ごとに切り替えたい設定値があります。Amplifyでは、こうした設定値を環境変数としてコンソールから管理できます。

今回のアプリケーションはバックエンドAPIを使用しない構成のため、環境変数を使ってアプリケーションのタイトルを変更することで、環境変数の仕組みを体験します。

5.1 アプリケーションの環境変数対応

まず、サンプルアプリケーションがどのように環境変数を参照しているかを確認しておきましょう。NEXT_PUBLIC_APP_TITLE という環境変数でページタイトルを変更できるようになっています。

以下のコードで環境変数を参照しています。

const APP_TITLE = process.env.NEXT_PUBLIC_APP_TITLE || "タスク管理アプリケーション";

環境変数が設定されていない場合は「タスク管理アプリケーション」がデフォルト値として使われ、環境変数を設定するとその値がタイトルとして表示されます。

5.2 Amplifyコンソールでの環境変数の追加

アプリケーション側の準備は整っているので、Amplify側で環境変数を設定します。Amplifyコンソールから環境変数を追加すると、ビルド時にアプリケーションに値が渡されます。

Amplifyコンソールで、対象のアプリケーションを選択し、サイドメニューの「ホスティング」から「環境変数」を開きます。「変数の管理」をクリックし、以下のように環境変数を追加します。

設定を保存したら、環境変数を反映するために再デプロイが必要です。

5.3 再デプロイと確認

環境変数はビルド時にアプリケーションに埋め込まれるため、コンソールで値を追加・変更しただけではアプリケーションに反映されません。反映するには再デプロイが必要です。

Amplifyコンソールからデプロイを再実行します。サイドメニューから概要をクリックし、対象のブランチを選択します。

その後、「このバージョンを再デプロイ」をクリックします。

デプロイが完了したら、アプリケーションのURLにアクセスし、ページタイトルが「タスク管理アプリケーション（環境変数で指定）」に変更されていることを確認します。

タイトルが変更されていれば、環境変数の設定は完了です。

6. featureブランチのデプロイ

ここまでで、mainブランチのデプロイと環境変数の管理ができました。しかし、実際の開発では、新機能を本番環境に直接デプロイする前にテスト環境で動作を確認したい場面があります。

Amplifyでは、GitHubのブランチごとに独立した環境をデプロイできます。たとえば feature/dark-mode というブランチを作れば、mainブランチとは別のURLで開発中の機能を確認できます。

ただし、テスト中のブランチが誰でもアクセスできる状態では、未リリースの機能が外部に公開されてしまう可能性があります。そこで、Amplifyのアクセスコントロール機能を使い、featureブランチにBasic認証をかけて、ユーザ名とパスワードを知っている人だけがアクセスできるように制限します。

6.1 featureブランチの作成

まず、テスト用のfeatureブランチを作成して変更を加えます。ここでは、ダークモードの背景色に変更するシンプルな修正を行います。

git switch -c feature/dark-mode

src/app/globals.css を編集して、背景色を変更します。

:root {
  --background: #1a1a2e;
  --foreground: #e0e0e0;
}

変更をコミットしてプッシュします。

git add .

git commit -m "Add dark mode style"

git push -u origin feature/dark-mode

6.2 Amplifyでブランチの接続

GitHubにブランチをプッシュしただけでは、Amplifyはそのブランチを自動デプロイしません。Amplifyに「このブランチもデプロイ対象である」ことを明示的に伝える必要があります。

Amplifyコンソールで、サイドメニューの「アプリケーションの設定」から「ブランチ設定」を開き、「ブランチを追加」をクリックします。

先ほどプッシュした feature/dark-mode ブランチを選択し、「ブランチを追加」をクリックします。

デプロイが完了すると、feature/dark-mode ブランチ用のURLが生成されます。URLは https://featuredark-mode.<app-id>.amplifyapp.com のような形式になります。

このURLにアクセスすると、背景色が変更されたダークモードのアプリケーションが表示されます。この時点では、URLを知っている人なら誰でもアクセスできる状態です。

6.3 Basic認証の設定

featureブランチのデプロイが確認できましたが、この時点ではURLを知っている人なら誰でもアクセスできてしまいます。開発中の機能を外部に公開しないために、Basic認証を設定してアクセスを制限します。

Amplifyコンソールで、サイドメニューの「ホスティング」から「アクセスコントロール」を開き、「アクセスを管理」をクリックします。

feature/dark-mode ブランチのアクセス設定を「制限 - パスワードが必要です」に変更し、ユーザ名とパスワードに任意の値を設定します。

設定を保存します。

6.4 動作確認

Basic認証が正しく設定されているか確認します。featureブランチのURLにアクセスし、ブラウザにユーザ名とパスワードの入力ダイアログが表示されることを確認してください。

設定したユーザ名とパスワードを入力してログインし、ダークモードのアプリケーションが表示されれば、Basic認証の設定は完了です。

7. ビルド通知の設定

ここまでのセクションで、Amplifyの主要な機能を一通り体験しました。最後に、運用面で重要なビルド通知を設定します。

mainブランチとfeatureブランチの両方で自動デプロイが動くようになりましたが、デプロイが成功したのか失敗したのかを毎回コンソールで確認するのは手間がかかります。ビルド通知を設定しておくことで、デプロイの結果をメールで自動的に受け取ることができ、失敗時にもすぐに気づけるようになります。

7.1 メール通知の設定

Amplifyコンソールで、サイドメニューの「ホスティング」から「通知」を開き、「通知を管理」をクリックします。メールアドレスを入力し、通知を追加します。

設定後、確認メールが届くので、メール内のリンクをクリックしてサブスクリプションを確認します。

7.2 通知の確認

通知設定が完了したので、実際にデプロイを実行して通知が届くかを確認します。

Amplifyコンソールのサイドメニューから概要をクリックし、mainブランチを選択します。「このバージョンを再デプロイ」をクリックして、再デプロイを実行します。

ビルドが完了すると、設定したメールアドレスに通知メールが届きます。メールが届けば、ビルド通知の設定は完了です。

8. 応用の設定

ここまでで、Amplifyの基本的な機能を一通り体験しました。このセクションでは、Amplifyコンソールから利用できるその他の設定画面を確認します。各機能の詳しい仕組みについてはAmplify概要で説明しているため、ここではコンソール上でどのように設定するかを紹介します。

このセクションで紹介する設定値や記述例はあくまでも一例です。また、これらの設定は効果を確認するためにアプリケーション側のコード変更が必要になるものや、WAFのように有効化すると追加料金が発生するものが含まれるため、ここでは実際の動作確認は行いません。各画面を開いて、どのような設定項目があるかを確認してみてください。

8.1 ビルドの設定

サイドメニューの「ホスティング」から「ビルドの設定」を開きます。

この画面では、アプリケーションの作成時にAmplifyが自動生成した amplify.yml の内容が表示されています。「編集」をクリックすると、ビルドコマンドやキャッシュ設定を直接編集できます。例えば、preBuild フェーズに npm run test を追加すれば、テストが失敗した場合にデプロイを中断させることができます。

8.2 カスタムヘッダー

サイドメニューの「ホスティング」から「カスタムヘッダー」を開きます。

この画面では、YAML形式でカスタムHTTPヘッダーを定義できます。例えば、以下のように記述すると、すべてのページにセキュリティヘッダーが追加されます。

customHeaders:
  - pattern: '**/*'
    headers:
      - key: X-Frame-Options
        value: DENY
      - key: Cache-Control
        value: max-age=3600

pattern でヘッダーを適用するURLパターンを指定し、key と value でヘッダーの内容を設定します。

8.3 ファイアウォール

サイドメニューの「ホスティング」から「ファイアウォール」を開きます。

「ファイアウォールを有効にする」をクリックすると、AWS WAFとの連携を設定できます。設定画面では、以下のようなルールを追加できます。

• IPアドレス制限 … 特定のIPアドレスからのアクセスのみ許可する（例：社内ネットワークからのみアクセス可能にする）
• 地域制限 … 特定の国からのアクセスをブロックする
• マネージドルール … AWSが提供する定義済みのルールセット（SQLインジェクション対策、XSS対策など）を有効にする

8.4 プレビュー

サイドメニューの「ホスティング」から「プレビュー」を開きます。

この画面でGitHubリポジトリのプレビュー機能を有効にすると、プルリクエストを作成するたびに、そのプルリクエスト専用のプレビュー環境が自動で作成されます。プレビュー環境にはブランチデプロイと同様に専用のURLが発行されるため、レビュー時に実際の画面を確認できます。プルリクエストがマージまたはクローズされると、プレビュー環境は自動的に削除されます。

8.5 リライトとリダイレクト

サイドメニューの「ホスティング」から「リライトとリダイレクト」を開きます。

「リダイレクトを管理」をクリックすると、URLの転送ルールを追加できます。各ルールには以下の項目を設定します。

例えば、サイトのURL構造を変更した場合に、古いURLへのアクセスを新しいURLに自動転送するルールを設定できます。

8.6 シークレット

サイドメニューの「ホスティング」から「シークレット」を開きます。

「シークレットを管理」をクリックすると、キーと値のペアでシークレットを追加できます。画面は環境変数の設定と似ていますが、値は保存後にマスクされて表示されます。

環境変数との使い分けとして、ブラウザに公開しても問題ない値（アプリケーションのタイトルなど）は環境変数に、APIキーやパスワードなど漏洩させてはいけない値はシークレットに設定します。

8.7 カスタムドメイン

サイドメニューの「ホスティング」から「カスタムドメイン」を開きます。

この画面では、Amplifyが自動生成した amplifyapp.com のURLの代わりに、独自のドメインを設定できます。「ドメインを追加」をクリックすると、Route 53で管理しているドメインをドロップダウンから選択できます。

ドメインを追加すると、AmplifyがSSL証明書の発行とDNS検証を自動で行います。「コンテンツ配信をしよう」ではACMでの証明書発行、CloudFrontの設定変更、Route 53でのレコード作成を手動で行いましたが、Amplifyではこれらがすべて自動化されています。

9. 不要リソースの削除

ハンズオンで作成したAWSリソースは、放置すると課金が発生し続ける場合があります。不要になったら削除しておきましょう。

9.1 Amplifyアプリケーションの削除

Amplifyコンソールで、対象のアプリケーションを選択し、「アプリケーションの設定」から「全般」を開きます。ページ下部の「アプリケーションを削除」をクリックし、確認画面で削除を実行します。

アプリケーションを削除すると、featureブランチの環境も自動的に削除されます。

10. まとめ

この章では、Next.jsアプリケーションをAmplify Hostingにデプロイする流れを体験しました。

• GitHubリポジトリとAmplify Hostingを連携し、コードのプッシュだけで自動ビルド・デプロイが走る仕組みを構築できる
• 環境変数を使い、コードを変更せずにアプリケーションの表示内容をコンソールから切り替えられる
• featureブランチをつないでブランチごとの独立した環境を作り、Basic認証でアクセスを制限できる
• ビルド通知を設定し、デプロイの成功・失敗をメールで受け取れる
• ビルド設定・カスタムヘッダー・ファイアウォール・プレビュー・リライトとリダイレクト・シークレット・カスタムドメインといった応用機能を、Amplify Hosting上から一貫して管理できる

次の章では、Next.js + FastAPI のタスク管理アプリケーションのインフラを、VPC・ALB・EC2・RDS・Amplify を組み合わせて自分で構築する応用課題に取り組んでいきます。