1. NaokiIshimura

    Posted

    NaokiIshimura
Changes in title
+【Netlify】カスタムドメインを設定する
Changes in tags
Changes in body
Source | HTML | Preview
@@ -0,0 +1,89 @@
+# Netlifyとは
+
+WEBサイトのホスティングサービス
+https://www.netlify.com/
+
+![netlify.png](https://qiita-image-store.s3.amazonaws.com/0/141934/36200c1e-9c92-8376-964d-7113cf0ef524.png)
+
+# Netlifyに関する投稿
+・[Netlify / GithubPages / Heroku の速度比較](https://qiita.com/NaokiIshimura/items/0b6c4ff5da437081866b)
+・[ドラッグ&ドロップでWEBサイトを公開する](https://qiita.com/NaokiIshimura/items/40ed08203b35aa0b527c)
+・[Github連携でWEBサイトを公開する](https://qiita.com/NaokiIshimura/items/9f12805af85c9be22814)
+・カスタムドメインを設定する ←今回の投稿
+・Forms機能を利用して問い合わせフォームを作成する(予定)
+
+# 目的
+
+サブドメイン無しのURL( https://naokiishimura.cloud )へアクセスしたときに、Netlifyを利用して公開したサイトへアクセスできるようにする。
+
+# 補足
+
+手順内では私が所持していたドメイン( **naokiishimura.cloud** )を利用してます。
+
+![domain00.png](https://qiita-image-store.s3.amazonaws.com/0/141934/e9507893-0446-4d6f-8dbf-4e72277f027f.png)
+
+# カスタムドメインの設定
+
+Netlifyの管理コンソールでドメインを設定する。
+
+![domain01-a.png](https://qiita-image-store.s3.amazonaws.com/0/141934/7f1bb5e5-a2bb-698e-ba1b-efa8610c00e5.png)
+![domain02-a.png](https://qiita-image-store.s3.amazonaws.com/0/141934/6fddde53-a6cf-3929-2df0-8a4506c5211c.png)
+![domain03-a.png](https://qiita-image-store.s3.amazonaws.com/0/141934/73052546-0523-115d-b1fc-fb6f186f5724.png)
+![domain04-a.png](https://qiita-image-store.s3.amazonaws.com/0/141934/861a7370-618c-417c-569a-4bca2b7d637d.png)
+![domain05.png](https://qiita-image-store.s3.amazonaws.com/0/141934/2bcedbd3-12d0-598b-b9b8-1f46c0125aed.png)
+> 補足:サブドメイン無しのドメインを指定した場合は、サブドメインにwwwが指定されたドメインも自動的に追加されるようです
+
+
+# DNS設定の確認
+
+Netlifyの管理コンソール上でDNS設定を確認する。
+
+サブドメイン無しの場合は、**ALIAS(推奨)**かAレコードの設定方法が表示される。
+
+```
+# ALIAS(推奨)
+naokiishimura.cloud ALIAS eloquent-sammet-202e50.netlify.com.
+```
+
+```
+# Aレコード
+naokiishimura.cloud A 104.198.14.52
+```
+
+サブドメインがついてる場合は、CNAMEの設定方法が表示される。
+
+```
+www CNAME eloquent-sammet-202e50.netlify.com.
+```
+
+![domain05-a.png](https://qiita-image-store.s3.amazonaws.com/0/141934/95c7318f-e721-69b6-d231-51a8728798db.png)
+![domain06-a.png](https://qiita-image-store.s3.amazonaws.com/0/141934/69844750-727c-3666-baab-c48d148042aa.png)
+![domain07-a.png](https://qiita-image-store.s3.amazonaws.com/0/141934/1403a71b-d7ee-98a9-9315-f1854ef11d24.png)
+![domain08-a.png](https://qiita-image-store.s3.amazonaws.com/0/141934/86fec7f7-4db0-485e-20ae-ed17fb538860.png)
+
+# DNSの設定
+
+Netlifyの管理コンソールで確認した内容をDNSに設定する。
+AWS Route53を利用した場合は以下のようになる。
+
+> 補足:Route53ではALIASを利用できますが、ALIASが指定できないDNSもあるため、あえてAレコードを利用して設定しました
+
+![domain09-a.png](https://qiita-image-store.s3.amazonaws.com/0/141934/03bc1fb8-4b3a-cb90-b718-c3210d0ea8f9.png)
+
+DNSの設定が完了してしばらくすると、Netlifyの管理コンソール上で設定したカスタムドメインが**Primary domain**に変わる。
+
+![domain07.png](https://qiita-image-store.s3.amazonaws.com/0/141934/c38eeb42-abb1-e9c7-8c3d-b1ada868ced7.png)
+![domain11-b.png](https://qiita-image-store.s3.amazonaws.com/0/141934/942cd4c4-868b-7d43-3e80-71cb4f577da6.png)
+
+HTTPS通信用の証明書も自動的に設定される。
+
+![domain12-a.png](https://qiita-image-store.s3.amazonaws.com/0/141934/ede6ca61-3954-0ed1-6859-4388d5387272.png)
+
+# アクセス確認
+
+ブラウザから設定したカスタムドメインへアクセスして、Netlifyで公開したサイトが表示されることを確認する。
+
+![domain13.png](https://qiita-image-store.s3.amazonaws.com/0/141934/d5586355-8bfe-6d71-f744-1d18322bef0b.png)
+
+
+