プログラマーのメモ書き

伊勢在住のプログラマーが気になることを気ままにメモったブログです

さくらインターネットのドメイン設定の『www.を付与せずマルチドメインとして使用する』について

hugo と netlify を使った静的ウェブサイトのホスティングを試していた際に、さくらインターネットの設定で分かりにくいところがあったので、まとめておきます。

ドメイン設定の『www.を付与せずマルチドメインとして使用する』について

さくらインターネットのレンタルサーバーのコントロールパネルのドメイン設定で

f:id:junichim:20180112110143p:plain

『www.を付与せずマルチドメインとして使用する』を選択した場合、 www.mori-soft.com にアクセスできなくなるだけだと思っていました。 (サーバーが見つかりません、などのエラー)

でも、実際は、www を使ってもアクセスできて、

f:id:junichim:20180112110404p:plain

のようなエラー画面が表示されます。

確かに、さくらインターネットの説明をよく読むと『エラーメッセージが表示されます』とありました。

help.sakura.ad.jp

このエラーメッセージが、さくらインターネットが用意しているエラーメッセージだとは思わなかったということです。

DNS 設定について

なぜ、上記のようなことが気になったかというと、通常選択するであろう『マルチドメインとして使用する』と『www.を付与せずマルチドメインとして使用する』で DNSのゾーン情報の設定が変わることを期待していたからです。

つまり、

  • 『マルチドメインとして使用する』の場合、 www CNAME @ のレコードが設定される
  • 『www.を付与せずマルチドメインとして使用する』の場合、wwwに関するレコードが設定されない

と勝手に思ってました。

で、実際のDNS設定を確認してみると、なんと、どちらのオプションを選んだ場合でも、wwwのレコードは、

www CNAME @

となっていました(他のレコードも一切かわりません)。

ネットを調べてみると、下記の記事にもオプションの選択でゾーン設定が変わっていないことが書いてありました。

d.hatena.ne.jp

これってどういうことなんだろうか?

www がサブドメイン名として有効で、さくらインターネットが用意したエラーページが表示されている、ということは、 『www.を付与せずマルチドメインとして使用する』を選択した場合は、apacheのバーチャルホストの設定か何かを変更して、 常にエラーページを表示するように向けているんだろうな、と思われます。

設定画面(かFAQのページに)もうちょっと詳しく書いてあると分かり易いんですけどね。

なんでこんなことが気になったのか

まあ、状況さえわかったら、特に気にする事でもないんですが、なんでこんなことが気になったのか、最後に書いておきます。 hugo と netlify で作った静的サイトを独自ドメインで運用する設定をやっていたときに、最初、

  • www.mori-soft.com を netlify のサーバー に向けて
  • さくらインターネットのサーバーに来た mori-soft.com は .htaccess で netlify にリダイレクトする

と考えたためです。

それで、上記の『www.を付与せずマルチドメインとして使用する』を試してみた、という次第でした。

まあ、結果的には、 Netlify 側でapexドメインとwwwサブドメインの両方をさばいてくれることになったので、 とくにこのオプションを使う必要はなくなりました。

ご参考までに。

Webサイトを静的サイトにしました : ドメイン設定(3/3)

最後は Netlify で公開したサイトを自分のドメインでアクセスできるようにします。https も無料で使えるので有効にします。

基本的な方針としては、

とします。 なお、ウェブサイトを apexドメイン(wwwなしのドメイン)にしないのは、自分の好みに加えて、後述する理由のためです。

設定方法について

最初は、 www.mori-soft.com を Netlify のサーバーに向けるだけなので、DNS の www の CNAME レコードを設定すればよいだけかと思いました。

でも、Netlify の推奨設定方法を調べてみると、 apexドメインと www サブドメインのどちらかをカスタムドメインとして設定する場合は、 両方を Netlify のサーバーに向けるのが推奨(必須?)とのことでした。

www はともかく、apexドメインはどうしようか? 以前の記事

blog.mori-soft.com

でやったように Route53 ならそちらでゾーン情報をホストして Alias レコードを使って apex ドメインでアクセスする、という 形が取れます。Netlify にも DNS ゾーン情報をホストする機能があるようですが、使いませんでした(実は設定が完了するまで気づいてなかったので検討していなかった)。

でも、さくらインターネットのDNSだと、Alias レコードに相当するものがありません(もしあったらごめんなさい)。

で、Netlify のドキュメントを見ると、解決策が書いてありました。要は Apex ドメインの A レコードに Netlify のロードバランサーのIPアドレスを割り当てるというものです。

これを具体的にする方法としては、さくらインターネットの下記の記事を参考にして、

knowledge.sakura.ad.jp

ゾーン情報はそのままさくらインターネットで管理して、 mori-soft.com のIPアドレスを Netlify の ロードバランサーに振り向けることにしました。

さくらインターネット側の設定

まずは、さくらインターネット側の設定です。上記の記事を参考に、ドメインメニューから、

@ A Netlify のロードバランサーのIPアドレス
@ MX 10 xxx.sakura.ne.jp. 

とします(xxx.sakura.ne.jp はレンタルサーバーの初期ドメインです)。

さらに、 Netlify の推奨設定に従って、

www CNAME xxxxx.netlify.com.

としておきます。ここで、 xxxxx.netlify.com はデプロイしたサイトを表示するurlです。FQDN 表現の末尾の . (ピリオド)をお忘れなく。

Netlify 側の設定

Netlify にログインして、ホストしているサイトの選択画面を開いて、Domain Settings を選びます。

f:id:junichim:20180112094708p:plain

Add Custom Domain をクリックして、 www.mori-soft.com を追加します。

f:id:junichim:20180112094816p:plain

これは、Primary Domain として www.mori-soft.com を使うためです。

Netlify ではカスタムドメインを追加して、それが apex ドメインまたは www サブドメインの場合は両方を登録する必要があるとのことです。 で、最初に入れたほうが Primary ドメインとして追加され、他方のドメインも自動的に追加されます。 カスタムドメインへのアクセスは自動的に Primary ドメインのほうへリダイレクトされます。

詳しくは ドキュメントのこのあたりに載っています。

このため、両方のドメイン名(今回の場合だと www.mori-soft.com と mori-soft.com)が Netlify を指している必要があります。 もし、この設定がうまくいっていなくて問題があれば、注意マークが表示されて、DNS設定を確認するように表示されます。

f:id:junichim:20180112094512p:plain

ここで、一度ブラウザから表示させてみて、問題なく表示できるか確認します。 (手元の環境では、さくらインターネット側のDNS設定変更後、1時間程度かかりました)

https の有効化

ここまでできれば、あとは https を有効にするだけです。 Netlify の設定画面の HTTPS の箇所に書いてあるように ボタンをクリックするだけで設定できます。

ただし、例えば、カスタムドメインとして www.mori-soft.com を追加しているが、 mori-soft.com がNetlifyに向いていない場合は、

f:id:junichim:20180112095146p:plain

のように、エラーが出て https を有効にすることができません。

Netlify で https を有効にする場合も example.com と www.example.com の両方を Netlify に向ける必要があるようです。

https が無事に有効になったら、再度ブラウザでアクセスしてみます。正しく表示されればOKです。

後始末

さて、これで問題なく設定できたと思いきや、いくつか修正がありました。

baseurl の修正

まず、hugo の config.toml の baseurl ですが、これを設定しておかないと検索機能などが正しく呼ばれません。

baseurl = "https://www.mori-soft.com/"

のようにして、再度 git push すると自動的にデプロイされます(いいですねー)。

フォームからの送信の再確認

universal テーマでは formspree というサービスを使って、フォームからの送信を実現しています。

formspree を有効にするためには config.toml にフォームを受け取るメールアドレスを設定しておき、サイトをアップロード後、フォームから送信を行います。 すると、確認メールが来るので、メール内のリンクをクリックすると受け取りが有効になります。

このフォームの有効化ですが、ドメイン名毎に確認する必要があります。

最初 Netlify でデプロイしたデフォルトのドメイン名(xxxxx.netlify.comのやつ)でフォームの確認をしていても、 独自ドメインを設定したら、もう一度フォームから送信を行って、再度確認しておく必要があります。

404 エラーページの確認と修正

独自ドメインを設定したからというわけではないのですが、hugo のローカルサーバーでは 404エラーページ(404.html)の確認ができないようです。 なので、これは netlify にホスティング後、存在しないURLを入れて、確認・修正を行っておきます。

メーラー設定の修正

直接的には Netlify のカスタムドメイン設定とは関係ないのですが、実はこの設定後メールの送受信ができなくなりました。

というのも、POP・SMTPサーバーの設定として、初期ドメインではなく独自ドメインを使って設定していたためです。要するに、DNSの設定が変わったため、POP・SMTPサーバーとして Netlify のサイトを見にいくことになり、送受信ができなくなったというものです(ウェブメールを見ると問題なく受信できていましたよ)。

ということで、メーラーの設定を変更して、正しいメールサーバーを指すようにしました(さらくインターネットの場合、初期ドメインを指定すればOKです)。

Netlify でのカスタムドメイン設定について

上記の一連の設定から、Netlify でカスタムドメインを設定する際の注意点についてまとめておきます。

apex ドメインは netlify に向けずに www サブドメインだけ netlify に向ける

ウェブサイトを表示するだけならできました(最初設定が間違っていて、この状態になっていました)。

www CNAME xxxxx.netlify.com.

のように www に対して CNAME レコードを設定してやればOKです。

でも、https を有効にしようとすると、apexドメインがnetlifyに向いていないといって怒られます。

不可能ではなくても、Netlify が推奨していないんで、やめといたほうが無難かと思います。

常に apex ドメインでウェブサイトを表示する

DNSサーバーで CNAME flatting, alias, aname など、apexドメインで別名を扱うサービスがある場合は問題ないようです。 一方、これらのサービスがない場合は、推奨されていないようです。

詳しくは下記の記事

www.netlify.com

に解説があるのですが、ざっと読んだ印象では

  • Netlify の CDN を有効に使うには CNAME レコードを使ってね
  • CNAME レコードは netlify でホストしているサーバー名に向けてね(デプロイした時に決まる xxxxx.netlify.com)
  • でも、 apex ドメインには CNAME レコードは設定できないでしょう
  • なので、 www サブドメインを使って CNAME を設定したほうがいいよ

とのことでした(理解が間違っていたらごめんなさい)。

最後に

一応、これで静的ウェブサイトでホストすることができました。 少なくとも元のサイトのバックアップサーバーは不要になったので、コスト的にはありがたいです。

当面、これで様子を見ていきたいと思います。

Webサイトを静的サイトにしました : Netlify でホスティング(2/3)

さて、前の記事で hugo による静的サイトが(一応)できたので、次はこのサイトをホスティングします。

静的サイトホスティング先の選定

いろいろありますねー。

Amazon S3, GitHub Pages, Bitbucket, etc 今回はそんななかでも、 Netlify というホスティングサービスを利用することにしました。

当初は、S3 で考えていたのですが、自分の場合のアクセス数から考えると Netlify の無料版で十分かなというのと、 github や bitbucket と連動して、コミット -> デプロイ を自動でやってくれるというのが魅力的です。

無料プランの範囲でも結構いろいろなことができるようなので、とりあえずはこれで十分かと思います。

(参考) yoshidashingo.hatenablog.com

git リポジトリにコミット

Netlify は GitHub や Bitbucket のアカウントがあれば、すぐに使い始めることができます。 でも、その前に git リポジトリにコミットしておきます。

準備1:下書きの解消

hugo で記事を作成した際に

mor@DESKTOP-RLA4CF1:~/tmp/mor$ hugo new news/test.md

のようにすると、ドラフト状態になっているかもしれません。念のため content/news/test.md のフロントマターを見ると

---
title: "Test"
date: 2018-01-11T14:45:14+09:00
draft: true
---

のように draft が true になっていました。

そこで、リポジトリにコミットする前にドラフト状態にある記事を公開状態に変更しておきます。

mor@DESKTOP-RLA4CF1:~/tmp/mor$ for post in `hugo list drafts`;do hugo undraft content/$post; done

準備2:テーマのインストール方法の変更

hugo のテーマをダウンロードする際は git clone で使っていたと思いますが、このままサイト全体をアップしようとすると themes/hugo-universal-theme/.git ディレクトリを削除する必要があります。

でも、これって、テーマ自体が git で管理されているのに、自分のローカルリポジトリに clone したものを再度コミットする形になって、ちょっと気持ち悪いですよね?

これって、hugo のサイトに解決方法が書いてありました。 git submodule を使えばよいとのことですs。

Host on Netlify | Hugo

この記事に従って submodule に変更してみます。

mor@DESKTOP-RLA4CF1:~/tmp/mor$ cd themes
mor@DESKTOP-RLA4CF1:~/tmp/mor/themes$ rm -rf hugo-universal-theme/
mor@DESKTOP-RLA4CF1:~/tmp/mor/themes$ cd ..
mor@DESKTOP-RLA4CF1:~/tmp/mor$
mor@DESKTOP-RLA4CF1:~/tmp/mor$ git init
Initialized empty Git repository in /home/mor/tmp/mor/.git/
mor@DESKTOP-RLA4CF1:~/tmp/mor$ cd themes/
mor@DESKTOP-RLA4CF1:~/tmp/mor/themes$ git submodule add https://github.com/devcows/hugo-universal-theme
Cloning into 'themes/hugo-universal-theme'...
remote: Counting objects: 1004, done.
remote: Compressing objects: 100% (2/2), done.
remote: Total 1004 (delta 0), reused 0 (delta 0), pack-reused 1002
Receiving objects: 100% (1004/1004), 9.17 MiB | 3.12 MiB/s, done.
Resolving deltas: 100% (529/529), done.
Checking connectivity... done.
mor@DESKTOP-RLA4CF1:~/tmp/mor/themes$

途中で今回 git リポジトリにアップするサイト全体に対して git init を行っています。

準備3: .gitignore の作成

.gitignore を作成しておきます。

mor@DESKTOP-RLA4CF1:~/tmp/mor$ touch .gitignore
mor@DESKTOP-RLA4CF1:~/tmp/mor$ echo /public >> .gitignore

ローカルリポジトリの状態を確認して、

mor@DESKTOP-RLA4CF1:~/tmp/mor$ git status
On branch master

最初のコミット

Changes to be committed:
  (use "git rm --cached <file>..." to unstage)

        new file:   .gitmodules
        new file:   themes/hugo-universal-theme

Untracked files:
  (use "git add <file>..." to include in what will be committed)

        .gitignore
        archetypes/
        config.toml
        content/
        data/
        i18n/
        layouts/
        static/

mor@DESKTOP-RLA4CF1:~/tmp/mor$ git add .
mor@DESKTOP-RLA4CF1:~/tmp/mor$ git commit -m 'initial commit'

Bitbucket 上にリポジトリを作成して、その後コミットします。

mor@DESKTOP-RLA4CF1:~/tmp/mor$ git remote add origin https://xxxxx@bitbucket.org/xxxxx/yyyyy.git
mor@DESKTOP-RLA4CF1:~/tmp/mor$ git push origin master

Netlify でホスティング

Netlify のアカウントを作成する際は、GitHub や BitbucketのアカウントでログインすればOKです。

Netlify でサイトをパブリッシュします。リンク先のように操作すればOK

qiita.com

あっという間にビルドされました。表示されたURLを見ると、無事、公開されていました。

でも、よく見ると、一部の表示がローカルと異なっています。 原因はよくわかりませんが、netlify で使う hugo のバージョンが怪しそうです。

ということで、下記に従って、 Hugoのバージョンをローカルに合わせて 0.32.2 にして試します。

monaural.net

OK。問題なくなりましたね。 ということで、めでたしめでたし、無事にホスティングできました。

(参考)

まだ、試していないのですが、Netlify CMS を使って、CMSライクに作業するというのができるそうです。

qiita.com

これを試すのもありかなー。

最後は、自分のドメインでこのサイトにアクセスできるようにします。