VercelからAWS Amplifyへ移行する方法 (Next.js)

私はVercelでWebページをデプロイしていました。

しかし広告を貼りたい場合は Hobbyプラン（無料）からProプラン（月額20ドル）にアップグレードする必要があるそうです。

結果、「トラフィックなど使用した分だけ料金を払うAWS Amplifyの方がコスパが良い」と判断し移行に踏み切りました。

①AWS Amplifyのコンソール画面でGit Hubリポジトリを紐づける

↑まずGit Hubを選択して次へを押下します。この時テンプレートは特に選択しませんでした。

↑Git HubのAuthirize画面に飛ばされて連携を許可します。

紐付けが終わるとコンソール画面で自身のGit Hubにあるリポジトリを選択できます。

Amplifyでデプロイしたいリポジトリとブランチを選択したら次へを押します。

↑最後にアプリケーションの詳細設定です。

自動的に「Next.js」を検出してくれています。

もしVercelで環境変数を設定しているのであればここで同じものを設定して下さい。

↑最終的にデプロイが完了するとこの画面になります。

私は環境変数の設定に問題があって数回失敗しました。

※参考記事 AWS Amplifyで環境変数を設定し、Reactアプリで読み込む

②ネームサーバーを変更する

↑次にAWSのRoute53 コンソール画面に行き「ドメインを移管」を選択します。

↑「ドメインを追加」の部分で今までVercelで使用していたドメインを入力して下さい。

他部分はデフォルトのままで次に進みます。

↑設定を進めると「ホストゾーンネームサーバー」というものが4つ作成されます。

この4つの値をご自身が利用しているネームサーバーに設定して下さい。

↑私はXServerでネームサーバーを設定しているので4つの値をこのような形で貼り付けました。

↑ちなみにVercelを使用していた時はここの値がVercelで作成された（2つ）ものでした。

↑4つの値を貼り終えたらRoute53コンソールに戻ります。

そして「私は、上記のネームサーバーを自分のドメインレジストリに追加しました。」にチェックを入れます。

最後に「ドメインを追加」を押下して下さい。

↑この画面に移ってしばらく待っていると移管が完了します。

③Vercelでのデプロイ設定を削除する

AWSでのデプロイが完了しサイトが問題なく動くことを確認します。

確認できたらVercelでの設定を削除して下さい。（任意）

④「DNSレコードでのドメイン所有権の確認」を行う

②でネームサーバーを変更しているのでこちらの処理が必要になります。

↑サーチコンソールの画面よりGoogleから提供されるTXTの値をコピーします

↑AWS Route53のコンソールを開き対象のホストゾーンを選択します

そしたら「レコードを作成」を選択します。

レコードタイプは「TXT」、値には先ほどコピーした文字列を貼り付けます。（他項目は特に触らなくてOKです）

最後に「レコードを作成」を押せば完了です。

↑Search Console画面に戻り検証をすると無事所有権を証明することができます。