【Google Domains】 ホームページとメールアドレスを独自ドメインにしてみた。

image

【Google Domains】 ホームページとメールアドレスを独自ドメインにしてみた。

Web制作に関することをブログにしました。誰かのお役に立てれば幸いです。

Next.js を使用していると、Vercel をデプロイ先にすることがあると思います。

今回のブログでは、Google Domains などでドメインを取得し、

Vercel でのカスタムドメインの設定方法と、Google Domains のメールエイリアスを使うことで、

独自ドメインのメールアドレスを作る方法について紹介します。

Vercel でのカスタムドメインの設定

プロジェクトのコンソールから、Setting を選択し、

サイドメニューの Domains を選択すると、ドメインの追加画面が表示されます。

domain_1

取得したドメインを入力し、Add を選択すると下の画面が表示されるので、

Recommended されたところにチェックを入れて ADD を選択します。

domain_2

追加したドメインに Invalid Configurationと表示された場合(下の画像)は、

Aレコードを追加する必要があります。

domain_7

Editを選択し、赤枠の部分に移動します。

domain_4

Aレコードの追加画面が表示されるので、赤枠内にドメインのAレコードの情報を追加します。

2枚目の画像は、Google Domains の管理画面です。

サイドメニューのDNSを選択するとAレコードの情報が表示されるので、

Vercel の方にコピーペーストしてください。

domain_5

domain_6

ここまでの設定で、下の画像の様に、すべてのドメインが Valid Configuration と表示されれば、

カスタムドメインの設定は完了です。追加したドメインのURLでサイトを表示して、テストしてみてください。

domain_3

Google Domains のメールエイリアスの設定

メールエイリアスを使うことで、独自ドメインのメールアドレスを作ることができますが、

メールの転送をする機能なので、事前に別のメールアドレスを用意する必要があります。

今回のブログでは、フリーの Gmail を使いました。

転送ではない形で独自ドメインのメールアドレスを作りたい場合は、

Google WorkSpace の利用を検討してください。

メールエイリアスの設定については、こちらのGoogle Domains ヘルプが参考になります。

https://support.google.com/domains/answer/3251241?hl=ja#emailForwarding

https://support.google.com/domains/answer/9437157


メールの転送の設定

Google Domains の管理画面で、サイドメニューのメールアドレスを選択し、

メールエイリアスの追加に移動します。

domain_8

独自ドメインを使ったメールアドレスと転送先のメールアドレスをそれぞれ入力し、追加を選択します。

domain_9

メール転送の一覧に、入力したアドレスが表示されれば設定は完了です。

独自ドメインのメールアドレスにメールを送信すると、

転送先アドレスの受信ボックスにメールが届いていることが確認できると思います。


次は、Gmail にメールアドレスの追加を行いますが、

ブログが長くなったので、続きは後編のブログで紹介します。



<参考にしたサイト>

https://support.google.com/domains/answer/3251241?hl=ja#emailForwarding

https://support.google.com/domains/answer/9437157


お知らせ

3月19日開催のアプリ開発講座の参加者募集中!!

3月19日開催のアプリ開発講座の参加者募集中!!

3月19日にアプリ開発講座を開催します!会場は岐阜県美濃加茂市のコワーキングスペース「こやぁね」です。興味のある方は是非ご参加ください!

Read More
可茂IT塾ではFlutterインターンを募集しています!

可茂IT塾ではFlutterインターンを募集しています!

可茂IT塾ではFlutterインターンを募集しています!可茂IT塾のエンジニアの判断で、一定以上のスキルをを習得した方には有給でのインターンも受け入れています。

Read More

タグ

Flutter (70)初心者向け (22)イベント (15)Nextjs (8)Google Apps Script (7)可茂IT塾 (6)Firebase (6)React (5)新卒 (3)就活 (3)給与支払報告書 (3)riverpod (3)Dart (3)JavaScript (3)TypeScript (3)インターン (3)FlutterWeb (2)画像 (2)アプリ開発 (2)React Hooks (2)tailwindcss (2)ワーケーション (2)社会人 (2)大学生 (2)お知らせ (2)webfeed (1)RSS (1)CodeRunner (1)VSCode (1)個人開発 (1)設計 (1)フルリモート (1)学生向け (1)Java (1)Spring Boot (1)エンジニア (1)DeviceOrientation (1)正規表現 (1)神楽 (1)趣味紹介 (1)プログラミングだけではない可茂IT塾のメンバー (1)線型計画法 (1)事例 (1)PreferredSize (1)マテリアルデザイン (1)Material (1)クパチーノデザイン (1)Cupertino (1)ListView (1)就活浪人 (1)既卒 (1)保守性 (1)シェアハウス (1)スクレイピング (1)Gmail (1)Googleグループ (1)GoogleWorkspace (1)ShaderMask (1)google map (1)Google Places API (1)Vercel (1)Google Domains (1)branch (1)Git (1)オンラインオフィス (1)Freezed (1)アイコン (1)Apple Store Connect (1)FlutterGen (1)検索機能 (1)Navigator (1)メール送信 (1)カスタム認証 (1)アニメーション (1)FloatingActionButton (1)Arduino (1)ESP32 (1)経験談 (1)フリーランス (1)Dialog (1)Figma (1)デザイン (1)Slack (1)BI (1)非同期処理 (1)BackdropFilter (1)iOS (1)レビュー (1)getAuth (1)匿名 (1)Algolia (1)chakra-ui (1)コンサルティング (1)Symbol (1)reactive_forms (1)

お知らせ

3月19日開催のアプリ開発講座の参加者募集中!!

3月19日開催のアプリ開発講座の参加者募集中!!

3月19日にアプリ開発講座を開催します!会場は岐阜県美濃加茂市のコワーキングスペース「こやぁね」です。興味のある方は是非ご参加ください!

Read More
可茂IT塾ではFlutterインターンを募集しています!

可茂IT塾ではFlutterインターンを募集しています!

可茂IT塾ではFlutterインターンを募集しています!可茂IT塾のエンジニアの判断で、一定以上のスキルをを習得した方には有給でのインターンも受け入れています。

Read More