ブログ構築 3. Nuxt.jsアプリを公開する #03
2019年10月12日に更新

NetlifyにデプロイしたNuxt.jsに独自ドメインを設定する

今回達成すること

今回は、NetlifyにデプロイしたNuxtアプリに独自ドメインを設定していきます。

できるだけ画像付きで分かりやすく説明していきますのでご安心ください。

それでは、Netlifyにログインして独自ドメインを設定するアプリを選択しましょう。

1. ドメイン設定ページに移動する

Netlifyのプロジェクトトップページから、「Set up a custom domain」をクリックしてください。

2019-08-11 16-32-13

トップページから移動する場合は、

  • Settings」メニュー > 「Domain management」 > 「Domain

へ行き、

  • Add domain alias」のボタンをクリックします。

2. 自分のドメインを入力する

現れたフォームにあなたのドメインを入力し、「Verify」をクリックしてください。

2019-08-11 16-37-11

あなたのドメインですか?と聞かれますので、「Yes, add domain」をクリックしましょう。

ドメインページにリダイレクトされます。

このページでドメイン購入も可能

ちなみに、ここで新しいドメインを購入することもできます。

  1. Add payment method」で支払い方法を追加すると、
  2. Register domain now」で購入することができます。

2019-08-11 16-44-18

3. デフォルトのサブドメイン名を編集する

この設定は必須でありませんが、DNS設定を見返したときに分かりやすくするためにも編集を行うことをおすすめします。

Default subdomain」の「•••」アイコンをクリックして編集します。

ここで設定したドメイン名は、このプロジェクト名にもなります。

2019-08-11 21-32-41

変更したら、デフォルトのサブドメインにアクセスしてみましょう。

先ほどと同じく、"Hello Nuxt"が表示されているはずです。

4. 独自ドメインのDNS設定をする

それでは、一旦Netlifyから離れてください。

ご自身のドメインサービスへログインしDNS設定を行います。

サブドメインを設定した場合

CNAMEを新たに追加します。

筆者の場合は、demo-blogというサブドメインを追加したのでこのような設定になりました。

  • タイプ => CNAME
  • ホスト => demo-blog
  • ポイント先 => さっき編集したデフォルトサブドメイン

2019-08-11 21-47-32

ルートドメインを設定した場合

ALIASもしくはANAMEを設定します。

  • ホスト => @もしくは空白

    ホストは個々のドメインサービスによって設定方法が変わります。

    ドメインサービスのドキュメントに設定方法の記載があるはずです。

  • ポイント先 => Check DNS configurationをクリックすると設定するポイント先が表示されます。

2019-08-11 22-04-40

5. 独自ドメインが設定できたか確認する

DNS設定が終わったら、Netlifyに戻りましょう。

ブラウザをリロードしてみてください。

下のように緑のマークでNETLIFY DNSと表示されていたら成功です。(時間がかかる場合があります)

2019-08-11 22-16-31

新しいURLにアクセスしてみてください。

SSL(https)化も自動で行ってくれています。なんて素敵!!

SSL化の確認はChromeの場合、URL横の鍵アイコンをクリックします。

2019-08-11 22-21-30

6. 独自ドメインへのリダイレクト設定をする

このままでは、自分のサイトが2つのドメインでアクセスできる状況です。

そこで、デフォルトのドメインにアクセスすると、独自ドメインへリダイレクトする設定を行います。

Nuxtプロジェクトのstaticディレクトリ直下に _redirects ファイルを作成します。

_redirectsの作成場所

2019-08-11 22-46-17

次にNetlifyの

  • Settings」 > 「Domains」ページの
  • How to redirect the default Netlify subdomain to your primary domain

をクリックして、黒く表示されている部分をまるっとコピーしましょう。

2019-08-11 22-47-44

そして_redirectsに貼り付けます。
デフォルトサブドメイン、プライマリードメインはご自身のものに書き換えて下さい。

statics/_redirects

# These rules will change if you change your site’s custom domains or HTTPS settings

# Redirect default Netlify subdomain to primary domain
https://デフォルトサブドメイン/* https://プライマリードメイン/:splat 301!

7. BitbucketにPushする

そしたら変更をgitでコミットし、Bitbucketにpushします。

$ git add -A
$ git commit -m "add_redirect_domain_file"
$ git push

8. Netlifyでデプロイを確認する

pushが完了したら、Netlifyの「deploys」ページを確認しましょう。

Bitbucketにpushしたコードが自動的にNetlifyにも反映されます。

しばし待って、緑の文字で「PUBLISHED」となったら変更が反映された証拠です。

2019-08-11 23-01-43

デフォルトのドメインへアクセスしてみてください。

ちゃんと独自ドメインへリダイレクトされています。

ちなみに、コードの反映を手動にするには?

deploys」ページの「Stop auto publishing」をクリックすると自動デプロイを止めることができます。

その場合、デプロイした履歴からどのバージョンを公開するか手動で設定することになります。

最後に

以上で自分のNuxtプロジェクトがインターネット上に公開することができました。

以上でチャープター「Nuxtアプリをインターネットに公開する」を完了とします。

次回はContentfulのセッティングをしていきます。

お楽しみに!!

現在、カテゴリー「Rails apiとNuxt.jsでSPA開発」のデモアプリを構築中です。記事になるまでもう少々のお時間が必要です。ブログの更新が止まって申し訳ありません。デモアプリの進捗状況は こちらの記事 で随時お伝えしてまいります。
スポンサー広告
次の記事はこちらです
ブログ構築
1. 今回作るアプリケーション
#01
Nuxt.jsとContentfulで作るマイブログ
今日のTweet
スポンサー広告