Netlifyで独自ドメイン設定 ※Xドメインで取得

はじめに

前回とデプロイ関連で色々試しているのでNetlifyの独自ドメイン化を試してみます。

✅ゴール
・Netlifyの理解を深める

✅参考
Netlifyにお名前.comで取得した独自ドメインを設定する

【Netlify】カスタムドメインを設定する

Netlifyで独自ドメイン化

※Netlifyにデプロイしたプロジェクトがあるのが前提です。

①Add custom domainを押す

②自身が取得したドメインを入力しSaveをクリック。

③それぞれのCheck DNS configurationをクリック

④以下のALIAS/A/CHANME以降の部分を控える(※すべて同じ)。

<独自ドメイン名> ALIAS ~~.netlify.app // 推奨
<独自ドメイン名> A ~~.netlify.app // 非推奨
www CHANME ~~.netlify.app

⑤Xドメインの場合はサーバーパネル⇒DNSレコード設定でDNSレコードを追加。DNSレコード一覧に表示されればOK。

⑥独自ドメインに接続して確認。表示された。

解除の場合

※追記

NetlifyのCustom Domain設定からRemove Domainを選択

XserverのDNSレコード設定から追加した部分を削除

1時間ほど待つと変更されています。

おわりに

Laravelではデプロイでとても躓いたのにNuxt.jsでは特に躓くことなくデプロイ⇒独自ドメイン化まで完了。便利。。。

Gitのリポジトリと連携しておけばリモートリポジトリにプッシュするだけで自動デプロイされるのもとてもいい点。

参考：Netlifyへの自動デプロイをしよう

CircleCIと組み合わせるのも今後チャレンジしていきたい。

参考：CircleCIを使ってNuxt.jsをGitHub Pagesへデプロイする、Nuxt アプリケーションへの CircleCI による自動テスト

まずはVue.jsで慣れるところからか。

参考：Vue.js + AWS S3でのHTTPS対応とCircle CIでの自動デプロイ手順、CI/CD未経験者がVue CLI 3で作ったアプリをCircleCIでFirebaseにデプロイ