Next.js 13 アプリケーションを Amplify Hosting でデプロイする

この記事は、Deploy a Next.js 13 app to AWS with Amplify Hosting を翻訳したものです。

本日、AWS Amplify Hosting は Next.js 12 と 13 のサポートを発表しました。サーバーサイドレンダリング（SSR）、API ルート、ミドルウェア、インクリメンタル静的再生成（ISR）、画像最適化などの Next.js の機能をアプリで利用することができます。

Next.js の機能のサポートに加えて、Amplify Hosting は AWS 上での Next.js アプリの実行体験を向上させています。

より高速なビルド。Next.js アプリのデプロイが 3 倍以上速くなるため、開発者は変更を本番環境に迅速に提供できます。
Amazon CloudWatch との統合。サーバー側のログは Amazon CloudWatch に配信され、アプリケーションの監視、モニタリング、トラブルシューティングを行うことができます。
Next.js アプリは、認証やデータなどの Amplify のバックエンドとシームレスに連携します。
フルマネージドのホスティングインフラストラクチャは、AWS アカウントで管理するリソースが少なくて済むため、開発チームの運用オーバーヘッドが軽減されます。価格の詳細については料金ページをご覧ください。

以下のチュートリアルに従って、Next.js アプリを作成し、Amplify Hosting を使ってデプロイしてください。

始める前に

このチュートリアルでは、以下を前提としています。

AWS アカウントを持っていること
Node.js 16 と Next.js 13 がインストールされていること
JavaScript、ターミナルでの作業、Git の使用など、ある程度の開発経験があること

Next.js アプリケーションを作成する

ターミナルを開き、Create Next App で新しい Next.js アプリを作成するコマンドを入力し、アプリのディレクトリに移動します。

npx create-next-app my-next-app-on-amplify --javascript --no-eslint
cd my-next-app-on-amplify

静的サイト生成（SSG）とサーバーサイドレンダリング（SSR）のデモを行うため、 2 つのページを作成します。

エディターで、pages/index.js ファイルの内容を以下のコードに置き換えます。この変更により、ページがビルドされた時刻を表示する静的ページが作成されます。

// pages/index.js
export default function Home({ formattedDate }) {
  return (
    <>
      <h1>Static page</h1>
      <p>This page is static. It was built on {formattedDate}.</p>
      <p>
        <a href="/ssr">View a server-side rendered page.</a>
      </p>
    </>
  );
}

export async function getStaticProps() {
  const buildDate = Date.now();
  const formattedDate = new Intl.DateTimeFormat("en-US", {
    dateStyle: "long",
    timeStyle: "long",
  }).format(buildDate);

  return { props: { formattedDate } };
}

次に、以下のコードを含む新しい pages/ssr.js ファイルを作成します。この変更により、ページがレンダリングされた時刻を表示する SSR ページが作成されます。

// pages/ssr.js
export default function SSR({ formattedDate }) {
  return (
    <>
      <h1>Server-side rendered page</h1>
      <p>
        This page is server-side rendered. It was rendered on {formattedDate}.
      </p>
      <p>
        <a href="/">View a static page.</a>
      </p>
    </>
  );
}

export async function getServerSideProps() {
  const renderDate = Date.now();
  const formattedDate = new Intl.DateTimeFormat("en-US", {
    dateStyle: "long",
    timeStyle: "long",
  }).format(renderDate);
  console.log(
    `SSR ran on ${formattedDate}. This will be logged in CloudWatch.`
  );
  return { props: { formattedDate } };
}

コードを Git にコミットし、リポジトリを任意のプロバイダーにプッシュします。Amplify は AWS CodeCommit、GitHub、GitLab、Bitbucket をサポートしています。

Amplify Hosting にデプロイする

アプリが Git プロバイダーにプッシュされたら、Amplify Hosting にデプロイする準備は完了です。

まず Amplify コンソールにアクセスします。Amplify アプリを作成したことがない場合は、ページの一番下までスクロールして、Amplify Hosting > Host your web app > Get started を選択します。アプリを作成したことがある場合は、New app > Host web app を選択します。

お使いの Git リポジトリホスティングプロバイダーを選択し、Continue を選択します。

Git プロバイダーによっては、Amplify Hosting にリポジトリへのアクセスを許可するよう求められます。認証が成功したら、Recently updated repositories list からこのアプリのリポジトリを選択し、Next を選択します。

Build settings ページでは、Amplify が自動的に正しいビルド設定を検出するため、設定を変更する必要はありません。Next を選択してデフォルトをそのまま使用します。

Review ページで、Save and deploy を選択します。

アプリが作成され、Amplify コンソールのアプリのページに移動します。Amplify Hosting は、あなたのプロジェクト用に独立したビルドとホスティング環境をプロビジョニングしてデプロイします。この処理には 2 〜 3 分かかります。以下のように Provision、Build または Deploy リンクを選択すると、進捗状況を確認できます。

アプリの表示

デプロイフェーズが完了したら、Provision、Build または Deploy のいずれかのリンクを選択すると、ビルドの概要ページが表示されます。ここでは、ビルド時間などのビルドに関する情報を確認できます。「ドメイン」リンクにアクセスすると、アプリに移動します。形式は https://<branch-name>.<app-id>.amplifyapp.com です。2 つのページ間を移動すると、静的ページのビルドの日時は変更されないのに対し、SSR ページのレンダリング日時はページ更新のたびに更新されることに注意してください。

サーバーサイドのレンダリングごとに呼び出される console.log 関数の出力は CloudWatch に送信されます。Amplify コンソールのアプリのページから App settings > Monitoring > Hosting compute log を選択すると、アプリのログストリームへのディープリンクが表示され、CloudWatch で操作できるようになります。例えば、以下のスクリーンショットは、This will be logged in CloudWatch の検索結果を示しています。

もっと詳しく

おめでとうございます。これで Next.js 13 アプリが Amplify Hosting に正常にデプロイされました。カスタムドメイン名、プルリクエストのウェブプレビュー、フィーチャーブランチなど、Amplify Hosting の機能について詳しくはドキュメントをご覧ください。

翻訳は Solutions Architect の Ryotaro Tsuzuki が担当しました。

Amazon Web Services ブログ