Amplify ホスティングの使用開始

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