VercelのProject間でドメインを移行する
TL;DR
- Vercel の Project 間でドメインを移行する手順を紹介します。
前提条件
以下が前提条件とします。
- ドメインが取得済みであること
- ドメイン移行元の Vercel プロジェクトが作成済みであること
- ドメイン移行先の Vercel プロジェクトが作成済みであること
Route53 でドメインを取得する方法は、以下を参考にしてください。
Route53 で取得したドメインを Vercel に設定するする方法は、以下の記事を参考にしてください。
取得済みドメインの確認
以下の通り、Route53 で作成済みのドメインを確認します。
AWS アカウントにログインします。
検索ボックスに「route53」と入力します。
検索結果が表示されるので、「Route53」をクリックします。
「登録済みのドメイン」をクリックします。
「next-study-ak3la.com」を今回は利用します。
ドメイン移行元のVercelプロジェクトの確認
以下の通り、Vercel で上記ドメインが紐付いているプロジェクトを確認します。
- 「next-vercel」がドメイン移行元のプロジェクトです。
- プロジェクトをクリックします。
- 「Settings」をクリックします。
- 「Domains」をクリックします。
- Route53 から取得済みのドメインが表示されていることを確認します。
- main ブランチは Production 環境、release ブランチは Staging 環境としています。
ドメイン移行先のVercelプロジェクトの確認
以下の通り、Vercel でドメイン移行先のプロジェクトを確認します。
- 「next-vercel-new」が、ドメイン移行先のプロジェクトです。
- 何もドメインは設定されていません。
ドメイン移行手順
ドメインの移行手順を記載します。
Production環境のドメイン移行
ドメイン移行先の「nextjs-vercel-new」プロジェクトのドメイン設定画面に移動します。
- 「next-vercel-new」のプロジェクトに移動します。
- 「Settings → Domains」でドメインの設定画面に移動します。
その後、ドメイン設定画面にてドメインを登録します。
- ドメインを入力します。
- 「ADD」をクリックします。
- ドメインの追加方法について Recommended を選択します。
- 親切にも、ドメインの移行手順が表示されます。
- 「MOVE 2 DOMAINS」をクリックします。
移行先の「next-vercel-new」のプロジェクトにドメインが追加されました。
移行元の「next-vercel」のプロジェクトを確認すると、ドメインが削除されてることわかります。
Staging環境のドメイン移行
続いて、Staging 環境のドメイン移行を実施します。
「nextjs-vercel」のプロジェクトで移行対象の staging 環境のドメインを確認します。
staging 環境のドメインのため、main ブランチではなく、release ブランチが対象になります。
- 「nextjs-vercel-new」のプロジェクトに移行します。
- staging 環境のドメインを記入します。
- 「Add」をクリックします。
「MOVE 1 DOMAIN」をクリックします。
- 「nextjs-vercel-new」のプロジェクトにドメインの追加が完了しました。
- 移行は完了しましたが、対象ブランチが main ブランチになっているため修正が必要です。
- 「Edit」をクリックします。
- Git Branch に「release」を記入します。
- 「Save」をクリックします。
- Staging 環境の設定も完了しました。
最後に、移行元の「nextjs-vercel」のプロジェクトを確認すると、ドメインが削除されてます。
動作確認
以下の手順で、main ブランチ、release ブランチにコンテンツをプッシュし、Production 環境と Staging 環境を更新します。
mainブランチ
以下の手順で、Vercel の Production 環境で表示するコンテンツを準備されていることを確認します。
main ブランチに移動します。
$ git checkout main
以下が Production 環境に表示するコンテンツです。
import { NextPage } from 'next';
const Home: NextPage = () => {
return (
<>
<h1>Production 移行成功</h1>
</>
);
};
export default Home;
コンテンツを更新するために、何かしら修正をし、main ブランチをコミットしてプッシュします。
$ git add .
$ git commit -m "add 移行成功！"
$ git push origin main
Production 環境の URL を確認します。
- next-study-ak3la.com にアクセスします。
- 「Production 移行成功」と表示されていれば、成功です。
releaseブランチ
Vercel の Staging 環境で表示するコンテンツを準備されていることを確認します。
release ブランチに移動します。
$ git checkout release
以下が Staging 環境に表示するコンテンツです。
import { NextPage } from 'next';
const Home: NextPage = () => {
return (
<>
<h1>Staging 移行成功</h1>
</>
);
};
export default Home;
コンテンツを更新するために、何かしら修正をし、release ブランチをコミットしてプッシュします。
$ git add .
$ git commit -m "add 移行成功！"
$ git push origin release
Staging 環境の URL を確認します。
- staging.next-study-ak3la.com にアクセスします。
- 「Staging 移行成功」と表示されていれば、成功です。
参考
Discussion