😊
VercelにGoogle Domainsで取得したドメインを設定
TL;DR
- Vercel に Google Domains で取得したドメインを設定する方法を紹介します。
- ドメインは Production 環境に設定します。
Google Domainsでドメインを取得
Google Domains でドメインを取得する方法は、以下を参考にしてください。
Next.jsでプロジェクト作成
$ pnpm create next-app vercel-googledomains --typescript --eslint --src-dir --import-alias "@/*" --use-pnpm
$ cd vercel-googledomains
GitHubリポジトリの作成
GitHub リポジトリを作成します。
GitHubリポジトリへプッシュ
GitHub リポジトリへプッシュします。
$ git add .
$ git commit -m "first commit"
$ git remote add origin https://github.com/hayato94087/vercel-googledomains.git
$ git branch -M main
$ git push -u origin main
Vercelで新規プロジェクト作成
以下の手順で、Vercel で新規プロジェクトを作成します。
- 「Add New」ボタンをクリックします。
- 「Project」ボタンをクリックします。
対象のリポジトリの「import」をクリックし、GitHub リポジトリと連携させます。
「Deploy」ボタンをクリックします。
デプロイが完了しました。
プロジェクト一覧に戻って、作成した Vercel プロジェクトをクリックします。
「Settings」をクリックします。
「Domains」をクリックします。
- ドメインを記入します。
- 「Add」ボタンをクリックします。
- Recoomended を選択します。
- 「Add」ボタンをクリックします。
- エラーが２つ発生しています。
- これは、Google Domains で取得したドメインを設定するための設定が必要です。
Google DomainsのDNSの設定
以下の手順で、Google Domains の DNS にレコードを追加し、Vercel のエラーを解消します。
- Google Domains の画面にアクセスします。
- 「DNS」をクリックします。
- 1 つめのエラーを解消するために、タイプは A，データは Vercel の IP を記入します。
- 2 つめのエラーを解消するために、「新しいレコードを作成」をクリックします。
- 1 つめのエラーを解消するために、ホスト名は www、タイプは C，データ CNAME の値を記入します。
- 完了ボタンをクリックします。
設定が完了しました。
エラーが解消していることがわかります。
動作確認
ブラウザでアクセスできれば問題ありません。
まとめ
Vercel に Google Domains で取得したドメインを設定する方法を紹介しました。
以下は利用したリポジトリです。
Discussion