herohoroブログ

Vercel自動ドメインから転送してGoogle Domainで取得したドメインを使う方法



🔄   2022-08-02

*******

ちょいと画像が表示されない現象ですが、

今回こそは慌てず、

寝て待つことにしました。

表示されない時は明日また見に来てくださいましm(_ _)m

*******

前回の記事を投稿した時のこと。。。

夜な夜な呪われました・・・・(。>﹏<。)

ちょいと前にサーバータイムアウト現象に見舞われ

アルパカ先生からの耳寄り情報が👀

チョッキン、デプロイ ファンクションログ カクニンセヨ

Σ(゚Д゚)ラジャ//

画像が読み込まれない場合はページを更新してみてください。

問題なさそうにGETしております。。。。

😵‍💫

っていう時、

imageにnext/imageを使用するのをストップするcommitを追加してくださりましたm(_ _)m

今回はこれじゃない!!!

じゃ何だ!?

ちょいと前のアルパカ先生のツイートをふと思い出す。

😨
Vercelアカウントを取得したアドレスは確か普段開きもせず放置してたはず・・・・

ってことに今更気づき、

ログインして確認してみると・・・・

画像が読み込まれない場合はページを更新してみてください。

画像が読み込まれない場合はページを更新してみてください。

🤔
Image Optimization Source Images がヤバいってことか・・・・

この後の内容によれば「proにすればOK。放置するとブロックしちゃうよ」って感じのもの

画像が読み込まれない場合はページを更新してみてください。

アルパカ先生はどのように対処したかというと・・・

Google Cloud Runというのに移行したようなんだけど・・・

ワタシニハ ソンナ ムズカシイコト デキマセン・・・・😵‍💫😵‍💫😵‍💫😵‍💫😵‍💫😵‍💫😵‍💫

ってことで腹を決めた。

んで一度はproにしてごまかそうとしていたんだけど・・・・

1日寝て夕方に無料プランの方のアドレスを確認すると・・・

普通に見れた。Σ(゚Д゚)Σ(゚Д゚)

え??????????

一時的に超えてしまった呪いだったということが後から分かり、

落ち着いて警告メールの来た日付を確認すると、

imageをnext/imageにしないようにcommitしていただく前のものだということに気づき・・・・

大反省。。。。。

「騒ぐだけ騒いでこのオチはなんじゃい」っていう感じで終わりましたm(_ _)m(;・∀・)

今回気づいたのは、

「Vercelでプラン変更をしたらドメインが変わってしまう」ってこと。

Vercelでなくアルパカ先生のように違うサーバーを使うことになっても変えることになるってこと。

だから、

私も独自ドメインを持っておかないといけないな

と、気付かされたのでした。

独自ドメインを持っておけば、

サーバーを変えてもドメインは同じ。

ドメインが二転三転してしまうと訪問者にも迷惑をかけてしまう。

なので、

「ここはビシッと1本で通していこうぜ!」

ということで、

独自ドメインを取得してVercelに追加する流れを解説することにしました。

概要

Google Domainではないけれど流れは同じだったので

__35dさんの記事を頼りに進めていったらなんとか設定できました。

重複した解説はなるべく避けて簡単に説明していこうと思いますー\(^o^)/

詳しい内容はこちらの記事を参考にしてください。

Google Domainで独自ドメインを取得する

画像が読み込まれない場合はページを更新してみてください。

https://domains.google/intl/ja_jp/

「新しいドメインを検索」の部分に使いたいワードを入れて【取得】ボタンを押すと

画像が読み込まれない場合はページを更新してみてください。

いろいろ出てくるのでお財布と相談をして決めます。

画像が読み込まれない場合はページを更新してみてください。

カートに追加すると右上のカートアイコンに件数が表示されます。

画像が読み込まれない場合はページを更新してみてください。

カートアイコンから精算すれば独自ドメインGETです\(^o^)/

DNSの設定

サイドメニューから「マイドメイン」を開くと

精算したドメインが表示されてます★

画像が読み込まれない場合はページを更新してみてください。

「管理」をクリックして

サイドメニューの「DNS」から【カスタムネームサーバー】を選びます。

画像が読み込まれない場合はページを更新してみてください。

【ネームサーバーの管理】をクリック

画像が読み込まれない場合はページを更新してみてください。

ネームサーバーを入力する項目が表示されます。

画像が読み込まれない場合はページを更新してみてください。

この部分はVercelに記載がある部分なので

一旦Vercelを開きます。

今まで使ってきたeasy-notion-blogプロジェクトを選び、

Setting→Domains→domain入力→Add

画像が読み込まれない場合はページを更新してみてください。

Recommendedを選択したくなるけどそこはこらえて1本化。

画像が読み込まれない場合はページを更新してみてください。

ADDして終わりかと思えば・・・・

エラーがあるので設定を続けます。。。

画像が読み込まれない場合はページを更新してみてください。

Nameserversタブを開くとエラー内容が分かる。

画像が読み込まれない場合はページを更新してみてください。

Intended NameserversをGoogle DomainのDNSに設定すればOK\(^o^)/

画像が読み込まれない場合はページを更新してみてください。

「保存」をしたらカスタムネームサーバーを使用するように切替える。

画像が読み込まれない場合はページを更新してみてください。

こんなメッセージが。

画像が読み込まれない場合はページを更新してみてください。

実際「接続できません」といった画面になったり、

PCなら見れるのにスマホだと「接続できません」になっていたり、、

1日2日程放置してやっと安定して見れるようになりました(´・ω・`)

Vercelで追加する

Vercelに戻るとエラーが解除されて一安心。

画像が読み込まれない場合はページを更新してみてください。

__35dさんの記事によれば・・・

自動で割り振られたドメインの方にはリダイレクト設定をしておくのをオススメします。自動で割り振られたドメインの Edit をクリックし、Redirect to のところに、割り当てたドメインを入力しておくと、自動で割り振られたドメインにアクセスした際も、独自ドメインの方にリダイレクト処理が行われるようになります。

とのことなので、

リダイレクト設定をした方がよさそう。

自動で割り振られたドメイン👈「 easy-notion-blog-02.vercel.app」

リダイレクト設定をするとうれしいこと

  • 過去にツイートした記事リンクから飛んでもherohoro.comの方へ転送してくれる

🤔
引っ越しすると郵便局に転出届を出せば「1年間は転送してくれる」ってやつですな

これは絶対設定しておいた方がいいやつ💥

「Edit」からRedirect toの欄右アイコンをクリック。

画像が読み込まれない場合はページを更新してみてください。

独自ドメインで設定しているherohoro.comが出現するので選択。

画像が読み込まれない場合はページを更新してみてください。

Status Codeはシカトして【Save】

画像が読み込まれない場合はページを更新してみてください。

画像が読み込まれない場合はページを更新してみてください。

お後がよろしいようで(*´ڡ`●)

まとめ

  • 独自ドメインを得ることでお引越ししてもドメインが変わらない。
  • Vercelで使っていたドメインから転送できるので訪問者が迷子になることはない。
  • お金はかかるけど、月にジュース1本我慢すればいい程度。
  • Google Domainの設定画面がすごくシンプルで直感的。(素人は小さな文字の羅列にアレルギー有り)

🤔
転送機能によりリンクの修正をする必要は無くなったってことか!!!!(ラッキー)


Limitメールが来なければそのまま使おうとすると思っていた自動ドメイン。

proプランにしてやっと気づいたドメインの重要性。

Limitメールを確認するにあたって今更発覚したはてなブログ(有料)の自動更新完了のお知らせ。

使わないまま放置したあげくに自動更新って・・・・・。

そんなこんなで

過去に設定して放置しているブログやらドメインやらを

解約して整理整頓するキッカケとなったVercel Limit騒動でした。

めでたしめでたし👯‍♂️

Twitterでは更新のお知らせを随時行っています

興味ある方はLet'sフォロー★

▼ この記事に興味があったら同じタグから関連記事をのぞいてみてね

新着記事を通知したい??


RSSリーダーにatomのリンクを登録すると通知が行くよ🐌

https://herohoro.com/atom

やってみてね(*´ω`*)(*´ω`*)

Twitter Timeline


フォロー大歓迎\(^o^)/

Twitter Timeline


フォロー大歓迎\(^o^)/