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

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

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

にサインアップする AWS アカウント

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

アプリケーションの作成

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

Git リポジトリを作成する

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

ステップ 1: Git リポジトリを接続する

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

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

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

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

   ページの上部にある新しいアプリの作成を選択します。

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

   GitHub リポジトリの場合、Amplify は GitHub アプリ機能を使用して Amplify アクセスを承認します。アプリのインストールと承認の詳細については、 GitHub「」を参照してくださいGitHub リポジトリへの Amplify アクセスの設定。

   注記

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

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

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

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

   3. [次へ] をクリックします。

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

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

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

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

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

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

   • 新しいロールを作成するには：

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

   • 既存のロールを使用するには：

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

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

3. [次へ] をクリックします。

ステップ 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 が URLなどの を使用してデフォルトのamplifyapp.comドメインでアプリをホストしますhttps://branch-name.d1m7bkiki6tdw1.amplifyapp.com。アプリケーションをカスタムドメインに接続すると、ユーザーはURL、アプリケーションが などのカスタム でホストされていることを確認できますhttps://www.example.com。詳細については、「カスタムドメインのセットアップ」を参照してください。

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

ウェブプルリクエストのプレビューでは、コードを本番稼働用ブランチまたは統合ブランチにマージする前に、プルリクエスト (PRs) からの変更をプレビューできます。詳細については、「プルリクエストのウェブプレビュー」を参照してください。

複数の環境を管理する

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