UnleashZealUpliftPersevereOvercomeDrive

AWS Amplify を利用したブログのデプロイ手順

Next.js で作成したブログを AWS Amplify を使ってデプロイする方法を記載します。
この記事では、特に カスタムドメイン設定 や、デプロイ時に発生しやすいエラーとその対処法についても共有しますので、少しでもお役に立てたら幸いです。

前提条件

  1. AWS アカウントを作成済み
  2. Route 53 を使用してドメインを管理している、または外部プロバイダーのドメインを AWS に移行済み
  3. GitHub リポジトリにブログのソースコードがアップロード済み

手順

1. Amplify アプリケーションを作成

  1. AWS コンソールで Amplify にアクセス
  2. 「アプリをホストする」を選択
  3. ソースコード管理（例: GitHub）と連携し、リポジトリを選択
  4. ブランチを指定し、「保存して続行」をクリック

2. 環境の構築とデプロイ

Amplify が自動的に以下の手順を実行します。

  • ビルド設定の生成（例: Next.js 用）
  • バックエンドリソース（必要に応じて）の作成
  • アプリケーションのビルドとホスティング

注意: ビルドエラーが発生する場合、環境に合わせてamplify.yml を修正する必要があります。

ビルド設定の例 (amplify.yml)

version: 1
frontend:
  phases:
    preBuild:
      commands:
        - yarn install
    build:
      commands:
        - yarn build
  artifacts:
    baseDirectory: out
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*

3. カスタムドメインを設定

  1. Amplify 管理画面で「ドメインの管理」を選択
  2. 「ドメインを接続する」をクリックし、使用するカスタムドメインを入力
  3. Route 53 を選択している場合、自動的に DNS レコードが作成されます
  4. 外部プロバイダーの場合は、提供された DNS レコード（CNAME など）を手動で設定が必要です

実際に起きた問題

1. ドメインのアクティベーションが完了しない

原因:
DNS レコードが正しく設定されていない、または伝播が完了していない

対処法:

  • Route 53 を使用している場合は、自動生成されたレコードが正しいか確認する
  • 外部プロバイダーの場合は、Amplify で提供される CNAME レコードを正確に追加する ※なお、DNS の伝播には最大 48 時間かかることがあるため注意

2. ビルドエラーが発生する

原因:
ビルド設定が適切でない、またはライブラリのバージョン不一致

対処法:

  • amplify.yml ファイルを確認し、Next.js 用に適切な設定を行う
  • Node.js のバージョンが Amplify のデフォルト（14.x）と一致しているか確認する
  • 必要に応じて、package.json の設定を見直す

3. 「サブドメインの追加を要求される」エラー

原因:
Amplify が所有権確認用の CNAME レコードを要求している

対処法:

  • Amplify の指示に従い、CNAME レコードを Route 53 に手動で追加
  • 所有権確認が完了すると、このエラーは解消します
← TOP