Vercelで欲しいものリストを独自ドメインで運用する

Amazonの欲しいものリスト(通称干し芋)ってあるじゃないですか。
twitterのオタクがカラーコーンとかスク水とか業が深いもの送りつけて楽しんでるあれですね。
干し芋の公開URLって長くて、twitterのbioに貼ると文字数結構食うし、個人的に見栄えが悪いと思うんですよね。bitlyとかで短縮URLにしてもいいけど、それだと一目で欲しいものリストだとわからない。
じゃあ、独自ドメインにしちゃえーと思ったわけです。
やり方は簡単で、リダイレクトすればいいだけです。
自鯖持っている人は、htaccessなりPHPなりmetaタグなり自分のやりたい方法でリダイレクトすればいいですが、私は持っていないので、Vercelを使います。
Vercel君、DNSコンテンツサーバとしての機能も保有しているので、ドメインのネームサーバを Vercel のネームサーバに変更すれば、GUIでDNSレコード設定ができてしまいます。つまり、Vercel内でサブドメインの生成等、ドメイン管理が完結できてしまうのです。これは便利。

まずドメインを取ってきましょう。何でも良いですが、干し芋にドメイン代なんて払えんわって方は、freenomとか良いのではないでしょうか。

https://www.freenom.com/ja/index.html


SEO的には、metaタグでのリダイレクトは推奨されないので、普段のサイトのリダイレクトはPHPやhtaccessを利用した方が良いです。
一応VercelはPHPがつかえたり、htaccessもjsonファイルで代用できたりします。
ただ、今回は干し芋のリダイレクトなので、SEOとかマジでどうでもいいので、一番楽なmetaタグでリダイレクトします。
リダイレクト用githubリポジトリを作ってindex.htmlを作ります。
index.htmlはこんな感じで良いかと。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="uft-8">
<meta http-equiv="refresh" content="0;URL=干し芋URL">
</head>
</html>

作れたら、Vercelを開き、Inport Projectから、該当するリポジトリのURLを張り付け。VercelはPaaSなのでNext.jsとかVueとか色々なフレームワークを選べますが、index.htmlを読み込むだけなので何もいりません。

でそのままデプロイすれば、

コングラチュレーション~
visitを押して、干し芋のリストに飛べば成功です。


次に独自ドメインを設定します。
私は、to-son.netというブログ用で取得した独自ドメインがあるので、そのサブドメイン、wish.to-son.netを干し芋用URLとして登録したいと思います。
サブドメインを使う場合、独自ドメイン管理専用のプロジェクトを別に作ります。
元々Vercelでサブドメインではない独自ドメインを使ったプロジェクトがあるなら、ここは飛ばしてもらってよいです。
ヘッダからDomainsを選択しAddを押します。

create a new projectを選択して、projectの名前と独自ドメインを入力する画面が出てくると思います。独自ドメインが登録されると、Nameserverが違うし、Aレコードも登録できてないから名前解決できないよとのことで、Invarid Configurationとでてくると思います。
NameserverをVercelに変えてあげましょう。
Intended Nameseversにurlが表示されていると思います。これが、Vercelのネームサーバーなので、コピーして、ドメイン管理会社のページを開いてネームサーバを変更してあげましょう。
freenomならMnagement Toolsから変更できます。こんな感じ。

設定出来たら、反映されるまで少し時間がかかります。
Vercelの設定画面にもどりInvarid Configurationが消えたらOKです。


サブドメインを作ります。
wish.to-son.netを作ります。
index.htmlがあるプロジェクトをクリックして設定から、Domainsを押して、サブドメインを入力しましょう。

Invarid Configurationが出なければ成功です。
私もびっくりしたのですが、Vercel君一度独自ドメイン登録してあればDNSレコード弄らなくても勝手に、サブドメインのDNSレコード設定してくれるみたいです。すごいですね。
ただ、たまに事故ってInvarid Configurationが出ます。でもVercel君とても親切でレコードの設定値を教えてくれます。先ほど作ったドメイン管理プロジェクト、若しくは元の独自ドメインが登録してあるプロジェクトからView DNS Record & More for hogehogeをクリックしてレコード設定を開き、ここにVercel君が教えてくれた設定値を入力すれば使えるようになるはずです。

できたかな?私ウイスキーそろそろ切れそうなのでお金に余裕ある方お酒をお恵みくださいースク水はいらないです…
https://wish.to-son.net