Azure Storage の静的ウェブを Cloudflare で運用する
前回、Azure Storage で静的ウェブサイトを作成した際は、Azure 内で用意されている CDN サービスを利用して構築しました。
そして、実際に上記を運用してみた結果、月額約 25 円で運用でき、その費用の大半が CDN の費用だということもわかりました。
それであれば CDN を無料の Cloudflare にしたらほぼ料金はかからないのでは？という仮説の元、Azure Storage の静的ウェブサイトを Cloudflare に接続してみました。
Cloudflare のサインアップ・設定
Cloudflare のアカウントを持っていない場合、取得するところから始めましょう。
Cloudflare ウェブサイト
メールアドレス、パスワードを入れ、「サインアップ」を押すと、「Add your site」ということで CDN を利用するサイトの入力を求められます。
ここでは www などのサブドメインを含んだ FQDN ではなく、ベースドメインを記入します。つまり、今回のように http://storage-web.avalon-studio.work/ というサイトを運用したい場合、ここには avalon-studio.work を入力します。
[Add site] ボタンを押すと、「DNS をチェックしますよ」という画面が表示されるので、特に考えず「Next」を押します。
続いて、有料プランか無料プランかを選択する画面になるので、無料である「FREE」を選択し「Confirm Plan」ボタンを押します。
確認ダイアログが表示されるので「Confirm」ボタンを押します。
ボタンを押すと、自身のアカウントに管理ドメインがひとつ追加された状態になります。そして、ネームサーバーを設定しろという画面になります。
Cloudflare はその運用形態上、ネームサーバーを Cloudflare に設定する必要があります。ネームサーバーの管理をお名前.comや自身のドメイン管理会社で行っている場合、そちらの管理画面に行き、NS を変更する作業を行います。
上図の 1 に書かれているのが現在の設定値、それを、2 の Nameserver 1 , Nameserver 2 の値に書き換えろということです。
ネームサーバーさせ変更すれば既存環境がそのまま運用できるよう、DNS レコードの値はデフォルトで現在地を引っ張ってきてくれます。なのでネームサーバーを変更したら動かなくなるものがあるわけではありませんので、ご安心を。
お名前.com での変更例
お名前.com でネームサーバーを変更する場合は、ドメイン Navi の ネームサーバーの変更から行います。
プライマリネームサーバーとセカンダリネームサーバーに、Cloudflare より指定されたネームサーバーを指定し、確認画面にて確認を行います。
ネームサーバーの変更は 2 時間～ 24 時間かかるので、その間に DNS の設定値を一つ加えておきます。
Azure Storage からの識別子の追加
仮に、static.avalon-studio.work という FQDN で静的ウェブを運用したいとした場合、Cloudflare 側では以下の DNS 設定を行う必要があります。
下の static という CNAME は実際にウェブサイトにアクセスする際の FQDN、そしてもうひとつ、asverify. という文字列のついた CNAME を設定してあげる必要があります。
static に設定する value が <yourcustom-subdomain>.<id>.web.core.windows.net だとするならば、
asverify.static に設定する value は asverify.<yourcustom-subdomain>.<id>.web.core.windows.net になります。これを設定しておくことで、Azure 側では Cloudflare 側からの CNAME を受け入れることができます。
Azure Storage 側での設定
時間も十分に経過しネームサーバーの変更が終わると、Cloudflare 側では以下のような画面が表示されメールでも案内が届きます。
最後に Azure 側で設定を行います。
Azure Portal にログインし、ストレージアカウントのブレードを表示し、「Blob service」-「カスタムドメイン」をクリックします。
ここで、カスタムドメインと Azure Storage 静的ウェブサイトの接続を行います。下部のテキストボックスに FQDN を入力し、下の「間接 CNAME 検証を使用する」にチェックを入れ「保存」を押します。
すべてが正しく整っていると、「完了しました」というメッセージが表示され、カスタムドメインで静的ウェブサイトが参照できるようになります。
以上でひとまず Cloudflare と Azure Storage Web が接続できました。Cloudflare はウェブサイトの高速化にも寄与しますので、いずれは WordPress 環境にも設定をする検証などもやってみたいと思います。
