NextのプロジェクトをVercelにデプロイして、独自ドメインを設定する
アプリケーションデプロイ先の選定
本ブログは Next.js を用いて作成されている。いざデプロイ！というところで、デプロイ先のサーバーを選定する必要があるのだが、今回に関してはVercel一択であった。そもそも Vercel 社は Next.js フレームワークそのものを提供している企業で、Next.js で作成されたアプリケーションのデプロイが非常にできることと、CI/CD 周りをほぼ何も設定せずに自動デプロイまでしてくれるので、今回は Vercel をデプロイ先に選定した。
はじめてのでぷろい
GitHub Actions の変更などは行なったことがあったが、初回デプロイに関しては初めてなので、色々と調べつつ行なった。
デプロイ手順
- GitHub アカウントを元に Vercel のアカウントを作成する。
- Add New... → Project を選択
- Import Git Repository から、import したいプロジェクトを選択
- Project Name を設定、フレームワークを「Next.js」にし、デプロイ！
- 一分ほど待ったら、デプロイ完了(簡単すぎ)
以下参考サイト
独自ドメイン設定
vercel で特に設定せずにデプロイを行うと、URL がhttps://{projectName}.vercel.appになる(被ってなければこうなるはず)。せっかくなので、URL をgamulog.comに変更してみた。
はじめてのお名前.com
まず独自ドメインである、gamulog.comを取得する。お名前.com を使ったらとても簡単に取得することができたので説明は割愛する。初めてのドメイン取得だったので安かった。
ドメイン設定手順
- 一旦 Vercel で使いたい独自ドメインを入力
デプロイしているプロジェクト →Settings→Domains に移動して、検索ボックス内に自分が追加したいドメインを入力して、「Add」を押下
↓ この検索ボックス内にドメインを入力(画像は独自ドメイン設定後のものなので本来はwww.gamulog.comとgamulog.comは下にない)
- Recommended されている一番上のものを選ぶ(
wwwあり・なしを両方登録し、wwwありはwwwなしにリダイレクトする)
AレコードとCNAMEのValueをメモする
お名前.com で DNS 設定する際に使う。
- 「DNS 設定」から設定したいドメインを選択 → 「DNS レコード設定を利用する」を選択
- さっきメモったやつ(2 種類)を入力
TTL は 3600 のままで OK。
Aレコードの場合はホスト名は空、CNAMEの場合はwww
- Vercel に戻って、
Valid Configurationになれば完了。SSL 証明書も自動で発行してくれるので、20 分ほど待つと、SSL 証明書周りの処理も完了になる(https 通信になる)
以下参考サイト
余談 1.ドメイン自動診断
SSL 証明書発行中に、お名前.com がドメインの自動診断を行っていて、
これが表示されたのでちょっと焦った。HTTPS 接続になった後は評価が B まで上がったのでひとまず安心。A 評価にするにはおそらく追加で課金して色々なセキュリティオプションをつける必要がありそう。
余談 2.A レコードと CNAME レコード,TTL とは
A レコード...ドメインを IP アドレスに置き換える最も基本的なレコード
CNAME レコード...ドメインを別のドメインにリダイレクトするためのレコード。wwwありをwwwなしの URL にリダイレクトする時などに利用。
TTL...Time to Live キャッシュ保持時間。今回の話では、ブラウザやリゾルバがレコードをキャッシュに保持する時間を指す。
どれも FE の勉強や AWS-SAA の勉強でやった内容なので、実際に使うことでより知識が定着した。
CI/CD について
以上の手順で、初回デプロイは完了した。この状態で、いつも通りにmainブランチからブランチを切り開発しpush、そしてプルリクエストを行うと、Vercel がプルリクエストを検証し、正しくデプロイできるかを判断してくれる。チェックが終わった後にmainブランチにマージを行うと、自動的に新しいソースコードがデプロイされ、変更が反映される。
おわりに
今回は Vercel を用いたデプロイ、独自ドメイン設定を行った。初めてのデプロイ、ドメイン設定であったがとても簡単に行うことができた。CI/CD も基本的な部分は自動化されているので開発においても非常に助かっている。Vercel さんありがとう 🫰🏻
