1. NaokiIshimura

    No comment

    NaokiIshimura
Changes in body
Source | HTML | Preview
@@ -1,89 +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)