👁 0

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

このハンズオンでは、Next.jsで作成したフロントエンドアプリケーションをAWS Amplify Hostingにデプロイする方法を実際にハンズオン形式で手を動かしながら体験します。

  • GitHubリポジトリとAmplify Hostingの連携
  • Next.jsアプリケーションの自動ビルド・デプロイ
  • 環境変数の設定とアプリケーションへの反映
  • featureブランチのデプロイとBasic認証によるアクセス制限
  • ビルド通知の設定
  • 応用的な設定の紹介（カスタムドメイン含む）

1. 事前準備

この講座のハンズオンでは、以下のツールやアカウントが必要です。まだ準備できていない場合は、リンク先の手順に沿って準備をお願いします。

また、以下の講座を修了していることを前提としています。

Gitの基礎知識を習得していることを前提とします。自信のない方は先に以下の講座を実施してください。

2. ハンズオンの概要

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

全体の流れは以下のとおりです。

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

3. リポジトリの準備

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

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

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

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

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

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

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

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

設定項目 値 設定の基準
Owner （自分のGitHubアカウント） フォーク先のアカウントを選択
Repository name devopscamp-amplify-sample デフォルトのまま
Copy the main branch only チェックあり mainブランチのみコピーすれば十分

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

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

3.2 ローカルへのクローン

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

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

cd devopscamp-amplify-sample

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

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

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

4. Amplifyアプリの作成

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

4.1 Amplifyコンソールにアクセス

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

4.2 アプリの作成

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

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

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

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

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

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

設定項目 値 設定の基準
リポジトリ devopscamp-amplify-sample フォークしたリポジトリを選択
ブランチ main 本番環境としてデプロイするブランチ

ビルド設定の確認

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

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

デプロイの実行

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

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

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

5. 動作確認

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

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

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

5.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との連携は正常に機能しています。

6. 環境変数の設定

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

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

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

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

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

const APP_TITLE = process.env.NEXT_PUBLIC_APP_TITLE || "タスク管理アプリ";

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

📝 NEXT_PUBLIC_ プレフィックスとは
Next.jsでは、クライアントサイド（ブラウザ）で環境変数を参照するには、変数名の先頭に NEXT_PUBLIC_ を付ける必要があります。このプレフィックスがない環境変数は、サーバサイドでのみ参照でき、ブラウザには公開されません。APIキーなどの機密情報はプレフィックスなしで設定することで、クライアントに漏洩するのを防ぐことができます。

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

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

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

設定項目 値 設定の基準
キー NEXT_PUBLIC_APP_TITLE Next.jsでクライアントサイドから参照する変数には NEXT_PUBLIC_ プレフィックスが必要
値 タスク管理アプリ（環境変数で指定） デフォルト値との違いが分かる値を設定

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

6.3 再デプロイと確認

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

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

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

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

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

💡 ポイント
環境変数を追加・変更した場合は、再デプロイが必要です。Amplifyコンソールから手動でデプロイを再実行するか、リポジトリにコードをプッシュすることで再ビルドが走り、新しい環境変数が反映されます。

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

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

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

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

7.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
💡 ポイント
この時点では、Amplifyに接続しているのはmainブランチだけです。そのため、feature/dark-mode ブランチをプッシュしても、Amplifyは自動デプロイを実行しません。新しいブランチをデプロイ対象にするには、次の手順でAmplifyにブランチを追加する必要があります。

7.2 Amplifyでブランチの接続

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

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

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

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

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

7.3 Basic認証の設定

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

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

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

設定項目 値 設定の基準
ブランチ feature/dark-mode アクセスを制限するブランチ
アクセス設定 制限 - パスワードが必要です Basic認証を有効にする
ユーザ名 （任意のユーザ名） アクセス時に入力するユーザ名
パスワード （任意のパスワード） アクセス時に入力するパスワード

設定を保存します。

7.4 動作確認

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

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

💡 ポイント
mainブランチのURLにアクセスすると、認証なしでそのままアプリケーションが表示されます。このように、Amplifyではブランチごとにアクセス制御を分けることができ、本番環境は公開したまま開発中のブランチだけを保護するといった運用が可能です。

8. ビルド通知の設定

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

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

8.1 メール通知の設定

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

設定項目 値 設定の基準
メールアドレス （自分のメールアドレス） 通知を受け取るメールアドレス
ブランチ すべてのブランチ mainブランチとfeatureブランチの両方のビルド結果を通知する

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

8.2 通知の確認

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

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

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

9. 応用の設定

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

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

9.1 ビルドの設定

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

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

9.2 カスタムヘッダー

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

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

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

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

9.3 ファイアウォール

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

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

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

9.4 プレビュー

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

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

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

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

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

設定項目 説明 入力例
送信元アドレス リダイレクト元のURLパターン /old-page
ターゲットアドレス リダイレクト先のURL /new-page
タイプ リダイレクトの種類 301（永続的リダイレクト）

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

9.6 シークレット

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

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

設定項目 説明 入力例
キー シークレットの名前 API_SECRET_KEY
値 機密情報（保存後はマスクされる） sk-xxxxxxxxxxxx

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

9.7 カスタムドメイン

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

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

設定項目 説明 入力例
ドメイン 使用するドメイン名 devopscamp.net
サブドメイン ドメインの前に付ける文字列 app（app.devopscamp.net でアクセス）

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

💡 ポイント
カスタムドメインの設定には、Route 53でドメインを購入済みであることと、ホストゾーンが作成されていることが前提となります。また、DNS検証の完了に数分から数十分かかるため、このハンズオンでは動作確認は行いません。

10. 不要リソースの削除

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

10.1 Amplifyアプリの削除

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

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

11. まとめ

このハンズオンでは、Next.jsアプリケーションをAWS Amplify Hostingにデプロイする方法を体験しました。

  • GitHubリポジトリとAmplify Hostingを連携し、コードのプッシュだけで自動ビルド・デプロイが実行される仕組みを構築した
  • 環境変数 NEXT_PUBLIC_APP_TITLE を設定し、アプリケーションの表示内容をコンソールから変更する方法を学んだ
  • featureブランチを接続してブランチごとの独立した環境を作成し、Basic認証でアクセスを制限する方法を学んだ
  • ビルド通知を設定し、デプロイの成功・失敗をメールで受け取る仕組みを構築した
  • ビルド設定、カスタムヘッダー、ファイアウォール、プレビュー、リライトとリダイレクト、シークレット、カスタムドメインなどの応用的な設定を確認した

12. 次のステップ

これでAWS講座は最後の講座まで完了です。学んだ内容を実際の成果物に落とし込みたい方は、章末尾の応用課題に挑戦してみてください。Next.js + FastAPI のタスク管理アプリのインフラを、VPC・ALB・EC2・RDS・Amplify を組み合わせて自分で構築する課題です。

応用課題の課題内容は誰でも閲覧できます。メンターによる成果物レビューや実装の壁打ちはポートフォリオプランでご提供しています。

この教材は役に立ちましたか？

いいねをたくさんいただけると、制作者の励みになり、より多くの講座が作れるようになります。

感想を一言（任意）

いただいたコメントは次の制作のヒントになります。ぜひお気軽にご投稿ください。

このコメントは他の受講生には公開されません。DevOps Camp運営が、教材改善のために確認します。

0 / 2000