1
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

posted at

updated at

Next.jsアプリをVercelで公開して、独自ドメインに反映する

目次

1.Vercelにデプロイ
2.【おまけ】XServerで取得した独自ドメインに反映する

1.Vercelにデプロイ

VercelにNext.jsプロジェクトをデプロイする方法は、驚くほど簡単です。

下記、Next.jsの公式ドキュメントの通りに進めればアプリを公開できます。
(getting-startedのところだけ実施でよい。)

独自ドメインを持っていなくてもアプリのURLはVercelが自動で作成してくれます。
私は、「shifty」というプロジェクト名にして、Gitlabのプロジェクトをインポートしたら、

というURLにデプロイされました。

「-eosin」の部分が自動で作成されるわけですね。
他にも、「-snow」とかが付与されたりするそうです。

ちなみに、サインアップには、Gitlabアカウントを使いました。
Gitlabアカウントでサインアップすることのメリットは、
GitlabにソースコードをPUSHしたときに、自動で本番環境にもデプロイされることです。
なので、今回のPJをローカルPCで修正して、GitlabのリポジトリにPUSHしたら、
自動で「https://shifty-eosin.vercel.app/」にも再デプロイされるということです!(便利!!)

2.【おまけ】XSERVERで取得した独自ドメインに反映する

ですが、私は、XSERVERで取得した独自ドメインにアクセスしたときに、アプリを表示させたかった!
ということで、XSERVERでの必要な設定を記載します。
(サブドメインにアプリを反映するという前提で話を進めます。)

参考サイトはこちらです。

まず、上記公式ドキュメントの「Adding a Domain」の部分の設定を行います。

Step 4: Configuring the Domain
のところで、下記のように設定を行います。

XSERVERのDNSレコード追加を行う画面に遷移します。
(DNSレコード追加への遷移方法:XSERVERにログイン > サーバー管理 > DNSレコード設定 > 対象ドメインの「選択する」をクリック > DNSレコード追加)

下記の表のように値を設定します。

項目
ホスト名 [サブドメイン名]
種別 CNAME
内容 cname.vercel-dns.com
優先度

入力したら「確認画面へ進む」 > 「追加する」でレコードを登録します。

これで、設定は完了です。

今回は、こちらに反映させたのですが、無事反映できていることが確認できました!
ちなみに↑このサイトは、仕事のシフトの「早番」か、「遅番」かをGoogle Calendarに登録している友人向けに創ったアプリです。
これから徐々に改良していく予定です♪

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Sign upLogin
1
Help us understand the problem. What are the problem?