爆速！Vercelとfreenomで独自ドメインのサイトを無料で作成する

5727 ワード
JavaScript Freenom Vercel Node.js SSL JavaScript テキストリンク

無料でWebアプリケーションのホスティングが出来るnow.shが名称変更してVercelになってましたね。

使い勝手などがどうなのか触って試してみました。

結果、ただ触るだけだと簡単すぎて記事にならないので、ついでにfreenomも使って無料で独自ドメイン（カスタムドメイン）も反映させてみます。

※タイトルの爆速！は処理速度ではなく手順の話
※プロトアウトスタジオの授業補足資料にもなります。

作るもの

こんな感じの独自ドメインのWebサイトを作成（デプロイ）します。

ちゃんとSSLも対応してます。

Vercel

読み方はバーセル？ですかね。

無料でWebアプリケーションのデプロイが出来ます。

コマンド一発で出来ます

Vercelで爆速デプロイ

  • 1. 簡単なhtmlファイルを作成します。

20200516sampleというフォルダを作成してindex.htmlを作成しました。

以下の記事のhtmlをコピーして作りました。

Vue.jsで東京都の今日の天気を表示するWebサイトを作るコピペサンプル

  • 2. Vercelのコマンドをインストール
npm i -g vercel
  • 3. デプロイ
vercel

以上です。相変わらずシンプルで簡単。
(ここで初めての人はメールアドレスの認証などを聞かれるかもしれません。僕の場合はnow（旧名称）で使っていたからだと思いますが特に聞かれませんでした。)

あとは対話式の質問が出てくるので答えていけばデプロイされます。

プロジェクト名を聞かれたのでsuikousaibaiにしました。なんとなく。

https://suikousaibai.n0bisuke.now.sh のURLでデプロイされました。

8888。

ここまででもだいぶ便利です。

ついでに独自ドメインもやってみます。

FreenomとVercelで独自ドメインなWebサイト

無料でドメインを取得できるサービスです。

  • 1. Freenomでドメインを取得します。

ここは割愛します。無料なので空いているものを取ってみましょう。

suikousaibai.gqというドメインを取得してみました。

  • 2. Vercelのネームサーバー情報を取得

Vercelの管理画面にいきます。
https://vercel.com/dashboard/domains

addボタンを押します。

作成したアプリ(ここではsuikousaibai)を選択して進みます。

freenomで取得したドメイン（ここではsuikousaibai.gq）を入力して進みます。

次の画面でChecking Domain Statusの箇所が読み込み中...のような表示になります。 画面表示が変わるので少し待ちましょう。

しばらく待つとIntended Nameserversのネームサーバー情報が表示されます。
ここの情報はユーザーやアプリごとで若干異なるみたいです。

今回は以下のような情報でした。

a.zeit-world.co.uk
c.zeit-world.org
d.zeit-world.net
f.zeit-world.com
  • 3. 取得したドメインをVercelのアプリに紐付け

このネームサーバーの情報をFreenom側に設定します。

Freenomのドメイン管理画面から利用するドメインの設定（Manage Domain）のボタンを押してドメインの設定画面に移動します。

Management Tools > Nameserversからネームサーバーを入力して保存します。

これで設定は完了です。

  • 4. 浸透されるのを待つ

設定は完了ですが、反映されるのに時間がかかるので少し待ちましょう。
数分〜数十分かかるときもありそうな印象です。

気長に待ちましょう。完了すると冒頭で紹介したような独自ドメインのWebサイトが出来ます。

お疲れ様でした。

更新するとき

index.htmlを編集してvercelコマンドで更新できます。

所感

無料でやれるのはやはり気軽で良いですね。
Freenom側のキャッシュなのか、更新時も反映されるのに時間がかかる印象でした。

無料なので文句言えないところはあるねぇくらいの感覚で使うと良いのかなと思います。