翻訳は機械翻訳により提供されています。提供された翻訳内容と英語版の間で齟齬、不一致または矛盾がある場合、英語版が優先します。
# Next.js アプリを Amplify ホスティングにデプロイする
このチュートリアルでは、Git リポジトリから Next.js アプリケーションを構築およびデプロイする方法について説明します。
このチュートリアルを始める前に、次の前提条件を完了してください。
**にサインアップする AWS アカウント**
まだ AWS のお客様でない場合は、オンラインの手順に従って [を作成 AWS アカウント](https://portal.aws.amazon.com/billing/signup#/start/email)する必要があります。サインアップすると、Amplify やアプリケーションで使用できるその他の AWS サービスにアクセスできます。
** アプリケーションの作成**
「*Next.js ドキュメント*」の [create-next-app](https://nextjs.org/docs/app/api-reference/create-next-app) 手順を使用して、このチュートリアルで使用する基本的な Next.js アプリケーションを作成します。
**Git リポジトリを作成する**
Amplify は、GitHub、Bitbucket、GitLab、および をサポートしています AWS CodeCommit。`create-next-app` アプリケーションを Git リポジトリにプッシュします。
## ステップ 1: Git リポジトリの接続
このステップでは、Git リポジトリの Next.js アプリケーションを Amplify ホスティングに接続します。
**アプリを GitHub リポジトリに接続するには**
1. [Amplify コンソールを開きます](https://console.aws.amazon.com/amplify/)。
1. 現在のリージョンに最初のアプリをデプロイしている場合は、デフォルトで **[AWS Amplify]** サービスページから開始できます。
ページの上部で、**[アプリケーションをデプロイする]** を選択します。
1. **[Amplify で構築を開始]** ページで、自分の Git リポジトリプロバイダーを選択し、**[次へ]** を選択します。
GitHub リポジトリの場合、Amplify は GitHub Apps の機能を使用して Amplify へのアクセスを承認するようになります。GitHub App のインストールと認証の詳細については、[GitHub リポジトリへの Amplify アクセスの設定](setting-up-GitHub-access.md) をご参照ください。
**注記**
Bitbucket、GitLab、または で Amplify コンソールを承認すると AWS CodeCommit、Amplify はリポジトリプロバイダーからアクセストークンを取得しますが、 AWS サーバーには*トークンを保存しません*。Amplify は、特定のリポジトリにのみインストールされているデプロイキーを使用してリポジトリにアクセスします。
1. 「**リポジトリブランチを追加**」ページで、以下の操作を行います。
1. 接続するリポジトリの名前を選択します。
1. 接続するリポジトリブランチの名前を選択します。
1. [**次へ**] を選択します。
## ステップ 2: ビルド設定を確認する
Amplify は、デプロイしているブランチに対して実行するビルドコマンドのシーケンスを自動的に検出します。このステップでは、ビルド設定を確認して承認します。
**アプリのビルド設定を確認するには**
1. **[アプリ設定]** ページで、**[ビルド設定]** セクションを見つけます。
**[フロントエンドのビルドコマンド]** と **[ビルド出力ディレクトリ]** が正しいことを確認します。この Next.js サンプルアプリケーションの場合、**[ビルド出力ディレクトリ]** は `.next` に設定されます。
1. サービスロールを追加する手順は、新しいロールを作成するか、既存のロールを使用するかによって異なります。
+ 新規ロールを作成するには:
1. **[新しいサービスロールの作成と使用]** を選択します。
+ 既存のサービスロールを使用するには:
1. **[既存のロールを使用する]** を選択します。
1. サービスロールリストで、使用するロールを選択します。
1. [**次へ**] を選択します。
## ステップ 3: アプリケーションをデプロイする
このステップでは、 AWS グローバルコンテンツ配信ネットワーク (CDN) にアプリケーションをデプロイします。
**アプリを保存してデプロイするには**
1. **[レビュー]** ページで、リポジトリの詳細とアプリの設定が適切であることを確認します。
1. **[保存してデプロイ]** を選択します。フロントエンドのビルドには通常 1〜2 分かかりますが、アプリのサイズによって変わります。
1. デプロイが完了したら、`amplifyapp.com` デフォルトドメインへのリンクを使用してアプリを表示できます。
**注記**
Amplify のアプリケーションのセキュリティを強化するために、*amplifyapp.com* ドメインは[パブリックサフィックスリスト (PSL)](https://publicsuffix.org/) に登録されています。セキュリティを強化するために、Amplify アプリケーションのデフォルトドメイン名に機密性の高いCookieを設定する必要がある場合は、`__Host-`プレフィックスの付いたCookieを使用することをお勧めします。このプラクティスは、クロスサイトリクエストフォージェリ (CSRF) 攻撃からドメインを防ぐ際に役立ちます。詳細については、Mozilla 開発者ネットワークの「[Set-Cookie](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Set-Cookie#cookie_prefixes)」ページを参照してください。
## ステップ 4: (省略可) リソースをクリーンアップする
チュートリアルでデプロイしたアプリが不要になった場合は、削除できます。このステップにより、使用していないリソースに対して課金されることがなくなります。
**アプリを削除するには**
1. ナビゲーションペインの **[アプリの設定]** メニューから、**[全般設定]** を選択します。
1. **[全般設定]** ページで、**[アプリの削除]** を選択します。
1. 確認ウィンドウで、**delete** と入力します。その後、**[アプリの削除]** を選択します。
## アプリに機能を追加する
これで、Amplify にアプリがデプロイされたので、ホストされたアプリで利用可能な機能の一部を以下で確認できます。
**環境変数**
多くの場合、アプリケーションは実行時に構成情報を必要とします。この構成には、データベース接続の詳細、API キー、パラメータなどがあります。環境変数は、ビルド時にこれらの構成を公開する方法として使用できます。詳細については、「[環境変数](environment-variables.md)」を参照してください。
**カスタムドメイン**
このチュートリアルでは、Amplify は `https://branch-name.d1m7bkiki6tdw1.amplifyapp.com` などの URL を使用して、デフォルトの `amplifyapp.com` ドメインでアプリをホストします。アプリをカスタムドメインに接続すると、ユーザーは、アプリがカスタム URL (`https://www.example.com` など) でホストされていることを理解できます。詳細については、「[カスタムドメイン名の設定](custom-domains.md)」を参照してください。
**プルリクエストのプレビュー**
Web プルリクエストプレビューは、コードを本番ブランチや統合ブランチにマージする前に、プルリクエスト (PR) からの変更をプレビューする方法をチームに提供します。詳細については、「[プルリクエストのウェブプレビュー](pr-previews.md)」を参照してください。
**複数の環境を管理する**
Amplify が機能ブランチと GitFlow ワークフローと連携して複数のデプロイをサポートする方法については、「[機能ブランチのデプロイとチームワークフロー](multi-environments.md)」を参照してください。