Next.js アプリを Amplify ホスティングにデプロイする - AWS Amplify ホスティング
ステップ 1: リポジトリの接続ステップ 2: ビルド設定を確認するステップ 3: アプリケーションをデプロイするステップ 4: (省略可) リソースをクリーンアップするアプリに機能を追加する

翻訳は機械翻訳により提供されています。提供された翻訳内容と英語版の間で齟齬、不一致または矛盾がある場合、英語版が優先します。

Next.js アプリを Amplify ホスティングにデプロイする

このチュートリアルでは、Git リポジトリから Next.js アプリケーションを構築およびデプロイする方法について説明します。

このチュートリアルを始める前に、次の前提条件を完了してください。

AWS アカウントへのサインアップ

まだ AWS カスタマーでない場合は、オンライン手順に従ってAWS アカウント を作成する必要があります。サインアップすると、Amplify や、アプリケーションで使用できるその他の AWS サービスにアクセスできます。

アプリケーションの作成

「Next.js ドキュメント」の create-next-app 手順を使用して、このチュートリアルで使用する基本的な Next.js アプリケーションを作成します。

Git リポジトリを作成する

Amplify は GitLab、Bitbucket、GitLab および AWS CodeCommit をサポートしています。create-next-app アプリケーションを Git リポジトリにプッシュします。

ステップ 1: Git リポジトリの接続

このステップでは、Git リポジトリの Next.js アプリケーションを Amplify ホスティングに接続します。

アプリを GitHub リポジトリに接続するには

  1. Amplify コンソールを開きます。

  2. 現在のリージョンに最初のアプリをデプロイしている場合は、デフォルトで [AWS Amplify] サービスページから開始できます。

    ページの上部で、[アプリの新規作成] を選択します。

  3. [Amplify で構築を開始] ページで、自分の Git リポジトリプロバイダーを選択し、[次へ] を選択します。

    GitHub リポジトリの場合、Amplify は GitHub Apps の機能を使用して Amplify へのアクセスを承認するようになります。GitHub App のインストールと認証の詳細については、GitHub リポジトリへの Amplify アクセスの設定 をご参照ください。

    注記

    Bitbucket、GitLab、またはAWS CodeCommitを使用してAmplify コンソールを承認した後、Amplify はリポジトリプロバイダーからアクセストークンを取得しますが、AWSサーバーにトークンを保存しません。Amplify は、特定のリポジトリにのみインストールされているデプロイキーを使用してリポジトリにアクセスします。

  4. 「リポジトリブランチを追加」ページで、以下の操作を行います。

    1. 接続するリポジトリの名前を選択します。

    2. 接続するリポジトリブランチの名前を選択します。

    3. [Next] を選択します。

ステップ 2: ビルド設定を確認する

Amplify は、デプロイしているブランチに対して実行するビルドコマンドのシーケンスを自動的に検出します。このステップでは、ビルド設定を確認して承認します。

アプリのビルド設定を確認するには

  1. [アプリ設定] ページで、[ビルド設定] セクションを見つけます。

    [フロントエンドのビルドコマンド] と [ビルド出力ディレクトリ] が正しいことを確認します。この Next.js サンプルアプリケーションの場合、[ビルド出力ディレクトリ] は .next に設定されます。

  2. サービスロールを追加する手順は、新しいロールを作成するか、既存のロールを使用するかによって異なります。

    • 新規ロールを作成するには:

      1. [新しいサービスロールの作成と使用] を選択します。

    • 既存のサービスロールを使用するには:

      1. [既存のロールを使用する] を選択します。

      2. サービスロールリストで、使用するロールを選択します。

  3. [Next] を選択します。

ステップ 3: アプリケーションをデプロイする

このステップでは、アプリを AWS グローバルコンテンツ配信ネットワーク (CDN) にデプロイします。

アプリを保存してデプロイするには

  1. [レビュー] ページで、リポジトリの詳細とアプリの設定が適切であることを確認します。

  2. [保存してデプロイ] を選択します。フロントエンドのビルドには通常 1〜2 分かかりますが、アプリのサイズによって変わります。

  3. デプロイが完了したら、amplifyapp.com デフォルトドメインへのリンクを使用してアプリを表示できます。

注記

Amplify のアプリケーションのセキュリティを強化するために、amplifyapp.comドメインはパブリックサフィックスリスト (PSL) に登録されています。セキュリティを強化するために、Amplify アプリケーションのデフォルトドメイン名に機密性の高いCookieを設定する必要がある場合は、__Host-プレフィックスの付いたCookieを使用することをお勧めします。このプラクティスは、クロスサイトリクエストフォージェリ (CSRF) 攻撃からドメインを防ぐ際に役立ちます。詳細については、Mozilla 開発者ネットワークの「Set-Cookie」ページを参照してください。

ステップ 4: (省略可) リソースをクリーンアップする

チュートリアルでデプロイしたアプリが不要になった場合は、削除できます。このステップにより、使用していないリソースに対して課金されることがなくなります。

アプリを削除するには

  1. ナビゲーションペインの [アプリの設定] メニューから、[全般設定] を選択します。

  2. [全般設定] ページで、[アプリの削除] を選択します。

  3. 確認ウィンドウで、delete と入力します。その後、[アプリの削除] を選択します。

アプリに機能を追加する

これで、Amplify にアプリがデプロイされたので、ホストされたアプリで利用可能な機能の一部を以下で確認できます。

環境変数

多くの場合、アプリケーションは実行時に構成情報を必要とします。この構成には、データベース接続の詳細、API キー、パラメータなどがあります。環境変数は、ビルド時にこれらの構成を公開する方法として使用できます。詳細については、「環境変数」を参照してください。

カスタムドメイン

このチュートリアルでは、Amplify は https://branch-name.d1m7bkiki6tdw1.amplifyapp.com などの URL を使用して、デフォルトの amplifyapp.com ドメインでアプリをホストします。アプリをカスタムドメインに接続すると、ユーザーは、アプリがカスタム URL (https://www.example.com など) でホストされていることを理解できます。詳細については、「カスタムドメイン名の設定」を参照してください。

プルリクエストのプレビュー

Web プルリクエストプレビューは、コードを本番ブランチや統合ブランチにマージする前に、プルリクエスト (PR) からの変更をプレビューする方法をチームに提供します。詳細については、「プルリクエストのウェブプレビュー」を参照してください。

複数の環境を管理する

Amplify が機能ブランチと GitFlow ワークフローと連携して複数のデプロイをサポートする方法については、「機能ブランチのデプロイとチームワークフロー」を参照してください。