雑記
 

Azureで静的Webサイトをホスティングする

2020/5/9

この記事が対象とする製品・バージョン

  Azure 対象です。
  AWS × 対象外です。
  GCP × 対象外です。

目次

1.概要

1-1.この記事のゴール

Azureでは主にhtmlファイルから構成される静的なWebサイトもホスティングできます。独自ドメインも利用できます。

静的なWebサイトをホスティングするだけならすごく簡単です。独自ドメインを利用するのは少し面倒です。

この記事では両方を順を追って説明します。独自ドメインが不要な方は途中まで読めばOKです。

 

1-2.構成

静的なWebサイトをホスティングするだけの場合の構成。

ストレージアカウントにURLを割り当てて直接アクセスできるように設定します。

 

独自ドメインで静的なWebサイトを使えるようにする場合はこのような構成になります。

ストレージアカウントを配信元とするCDNを作成して、DNSのCNAMEで独自ドメインとCDNを関連付けます。SSLの証明書はCDNの機能で無料で作れます。

この絵を見てもよくわからないかもしれませんが、手順を実施するうえで混乱してきたり行き詰ったときは参考にしてください。

※この構成は https で独自ドメインを使えるようになることを目指したものであり、http ならばもっと簡易的な構成も可能なようです。しかし、2020年現在、https が使えないというのはいろいろ問題があるのでこの記事では扱いません。

 

1-3.料金

料金はかかります。独自ドメイン不要ならば安いです。事前にご確認をお願いします。

https://azure.microsoft.com/ja-jp/pricing/calculator/

 

参考までに私の感覚は次の通りです。

・ストレージアカウントの料金    10GB程度ならば月200円くらい。

 

これに加えて、独自ドメインでアクセスできるようにするにはさらに下記料金がかかります。

・独自ドメインの新規取得・維持    年1000円~3000円    (この料金はAzureではなくレジストラに支払います。この記事では お名前.com を利用しました。)

・CDNの料金 月3000円くらい? (一月に10万アクセスあり、1回当たり1MBの転送が発生すると仮定した金額 ※1)

・DNSの料金 月100円くらい (一月に100万クエリを仮定した金額)

全部トータルで月になおすと、3600円くらいでしょうか。

 

以上は、ゆるい個人のWebサイトくらいを想定して言っているので、頻繁にアクセスされる商用サイトなどではもっと料金がかかると思います。

ここで書いた以外にもこまごまかかるのですがおそらく微々たる物だと思うので割愛します。

※1 この仮定の上でも転送が発生する場所によって料金が異なるため予測は難しいです。https://azure.microsoft.com/ja-jp/pricing/details/cdn/

 

なお、Azureの他にもメジャーなクラウドであるAWSやGCPも同じように安価に静的Webサイトをホスティングできるようです。

 

2.静的サイトのホスティング

2-1.静的なWebサイトの有効化

まず専用のストレージアカウントを作成しましょう。

独自ドメインを利用しない場合ストレージアカウント名はURLの一部になります。

 

ストレージアカウントを作成したら、「静的なWebサイト」から静的なWebサイトオプションを有効にします。

 

有効にするときに、インデックスドキュメント名とエラーパスを聞かれますが、入力しなくても良いです。

保存するとさっそくURLが割り当てられ、プライマリエンドポイント、セカンダリエンドポイント欄で確認できます。

 

自動的に $web という名前のコンテナーが作成されます。

このコンテナーに格納したファイルが割り当てられたURLで世界中からアクセスできるようになります。

たとえば、プライマリエンドポイントが https://xxxxxx.z99.web.core.windows.net/ の場合、$webコンテナーにtestフォルダーを作成し、その中にsample.htmを配置すると、https://xxxxxx.z99.web.core.windows.net/test/sample.htm で世界中から見えるようになります。

 

2-2.ファイルのアップロード

ブラウザーから利用するAzureポータルではフォルダー作成やファイルのアップロードが不便なので、コンテンツの管理にはAzure Storage Explorer というマイクロソフトが提供するツールを利用します。

残念ながらFTPツールでの接続はできないようですが、このツールは使いやすく、FTPツールに似ているので、FTPツールに慣れている人ならばすぐに使えると思います。

このツールはWindows、Linux、macOSで使用できます。

下記のサイトからインストーラーがダウンロードできるのでインストールして使用します。

https://azure.microsoft.com/ja-jp/features/storage-explorer/

 

ただ、私ははじめこのツールの左側の接続ボタンからAzureアカウントに接続する画面で処理が止まってしまい先に進めませんでした。原因はよくわからないのですが、1回ツールを終了して、ブラウザーのAzureポータルから「Explorer で開く」をクリックして、「Azure Storage Explorerで開く」をクリックして、ローカルのAzure Storage Explorerを起動すると、認証されていないというようなエラーにはなったのですが、さきほどとは少し違う画面だったので、改めて左側の接続ボタンをクリックして進めていくと、ユーザー名とパスワードを入力できるようになり無事使用可能になりました。その後の操作は特に困らずフォルダーを作ったりファイルをドラッグ&ドロップでまとめてアップロードしたり快適に操作できています。

 

独自ドメインが不要な場合は、以上で作業完了です。

 

3.独自ドメインの取得

もう独自ドメインをもっている方は、この作業は不要です。この手順は飛ばして、「4.独自ドメインとWebサイトの関連付け」に進んでください。

 

静的Webサイト用の独自ドメインはAzureでは取得できませんので、外部のサービスを利用して取得します。

独自ドメインの取得にはお名前.com や ムームードメイン、スタードメイン などが利用されることが多いようです。

私はこのあたりの事情には詳しくないので自分にあったものを探してください。

今回は お名前.com で操作してみます。

2020年4月26日 時点では .com のドメインを取得すると 年額で1年目は760円、2年目以降は1480円かかるようです。契約は最低1年単位で契約の更新時には費用が1480円かかるようですが、毎年更新する場合、合計で2960円になるという意味なのかよくわからないです。この価格には消費税は含まれておらず、.comの場合、この金額で取得できるドメインは1人1個ということです。詳細はお名前.comのサイトで直接ご確認ください。

https://www.onamae.com/service/d-price/

 

ここで、取得したいドメインが取得可能か調べます。

https://www.onamae.com/service/domain/com/

 

検索の結果はアイコンで表示されます。

メールのアイコンは、取得不可能だけど、取得可能になったらメールで連絡するという意味とのことです。

□は取得可能なのでチェックして先に進めば購入できます。この画像の場合だと .inc や .work は取得可能なようです。(.incは高いですね。)

この P マークは曲者で、取得はできるけどプレミアム料金が必要というものです。「760円~」の「~」という部分に要注意です。この例の場合は.comの取得だけで 703200円 が必要でした。カード番号を入力する前に料金をちゃんと確認したほうが良さそうです。

人気のない名前にするとこのようにがら空きでした。.comにチェックをつけて次に進みます。

とりあえず1年間の登録を購入します。Whois情報公開代行は自動でついているようですね。もし、ついていなければ必ず自分でこのオプションをつけましょう。

Whois情報公開代行がないと私の連絡先がドメイン所有者としてグローバルに公開されてしまいますので重要です。

その他のオプションはオフにしました。

 

名前.comの利用ははじめてだったのでこのあと会員登録をし、消費税込みで 836 円でした。

 

それから、メールアドレスの有効性を確認するためにお名前.comからメールが届くので、そのメールに記載のURLにアクセスします。メール内に記載されているリンクをクリックするだけでOKです。

メールのタイトルは「【重要】[お名前.com] ドメイン 情報認証のお願い」でした。

これを行わないと登録が2週間で失効するということです。

 

4.独自ドメインとWebサイトの関連付け

 

4-1.CDN作成

それでは、お名前.com で購入した独自ドメインをAzure Storageの静的なWebサイトに結び付けていきましょう。

いくつかステップが必要です。

 

まずストレージアカウントで CDN を作成するために、ストレージアカウントのメニューでAzure CDNを選びます。

 

必要項目を入力します。

CDNエンドポイント名はこのCDN経由でアクセスするときのURLになります。

【重要】配信元のホスト名は自動的に入力されていましたが、最初の手順で作成した静的なWebサイトのプライマリエンドポイントのホスト名に置き換えました。

たとえば、プライマリエンドポイントが https://xxxxxx.z99.web.core.windows.net/ の場合、配信元のホスト名は xxxxxx.z99.web.core.windows.net です。

作成をクリックします。

 

作成が完了するまで5分くらいかかりました。

この画面、ちょっとわかりにくいのですが、作成が完了すると「新しいエンドポイント」の上に、1行作成したホスト名(CDNエンドポイント名で入力した名前を含むもの)が表示されます。

 

そのホスト名をクリックすると、下記のようにエンドポイントの情報が見られます。

(あとでこの画面を見るには「CDNのプロファイル」から入る)

ここで右上に表示されているエンドポイントのホスト名は  https://xxxxxx.azureedge.net のような値です。

xxxxxxの部分には、先ほど入力した CDNエンドポイント名が入ります。

このあと独自ドメイン名と結びつけるときにこのエンドポイントのホスト名を使用することになります。

 

4-2.ネームサーバーの移管

次に、お名前.comで取得した独自ドメインのネームサーバーにAzureのネームサーバーを設定します。

これによりAzureのDNSの設定だけで取得したドメインを完全に制御できるようになります。

(この場合、お名前.comはここで設定した内容を .com の管理データに登録するのが仕事というわけです。登録は自動的に行われます。登録後はお名前.comを経由せず直接Azureにアクセスが来るようになります。)

 

ネームサーバーを移管するために、Azureの DNSゾーンを作成します。

「名前」のところに取得した独自ドメインを入力します。

 

登録すると自動的にNSレコードが作成されます。NSレコードの値に4つのホスト名が自動的に入ります。

これがAzure側でこのドメインを管理するDNSサーバーで「ネームサーバー」と言います。

 

お名前.com側でカスタム名ネームサーバーを設定できるので、この4つのネームサーバーを設定します。

(※デフォルトではお名前.comが管理するネームサーバーが設定されていたと思います。お名前.comはここで設定されたネームサーバーを .com の総本山のDNSに登録してくれます。)

これで世界中から この独自ドメインへのアクセスは AzureのDNSにリクエストが来るようになります。

 

この段階ではまだこの独自ドメインとAzure Storageで構築した静的Webサイトは結びついていないので、このURLにアクセスしても何も表示されません。

 

 

4-3.カスタムドメイン名とCDNの結びつけ

DNSゾーンで、レコードセットを追加します。

名前

入力例 www

使用したいサブドメイン名を記載します。「www」とするケースが多いようです。

これで www.取得したドメイン名 が最終的なURLに決定します。

種類

CNAME

エイリアス

CDNエンドポイントのホスト名を設定します。https://は省きます

入力例 xxxxxx.azureedge.net

 

最後にOKをクリックします。

 

このように登録されるのが正しい登録です。

 

このようになっている場合は間違っています。削除してやり直してください。

 

 

 

4-4.カスタムドメインの追加

CDNエンドポイントの画面でカスタムドメインを追加します。

カスタムホスト名欄には、前の手順(4-3)で決定した最終的なURL(例:www.取得したドメイン名)を入力します。

たとえば、www.tekito.com です。

 

この段階でブラウザーから https://www.tekito.com/ で静的なWebサイトにアクセスできますが、証明書のエラーが表示されます。

※最近(2020/4)はセキュリティがどんどん厳しくなっていっているので、ひょっとしたら将来のブラウザーは証明書のエラーがあるとサイトを表示してくれなくなるかもしれません。

 

4-5.HTTSの有効化

CDNのページで下側のカスタムドメインをクリックします。

 

HTTPSをオンにするスイッチが表示されるのでオンにする。

オンにするとオプションが選択できる。基本はデフォルトのままでよいと思います。最後に保存をクリックします。

この証明書は追加料金は不要ということです。

https://docs.microsoft.com/ja-jp/azure/cdn/cdn-custom-ssl?tabs=option-1-default-enable-https-with-a-cdn-managed-certificate

 

保存をクリックしてから反映されるまで最大で6~8時間かかるということです。

しばらくはこの状態になったあと変化がありませんでした。

一晩寝て次の日確認したら無事に完了していました。

 

この処理では、さきほど4-3登録した CNAMEレコードが使われます。8時間待っても処理が完了しない場合、CNAMEレコードの登録が正しくされているか確認してください。

正しくない場合、正しくないレコードを削除し、CDNを削除してもう1度手順をやり直します。

4-1で【重要】と書いてある項目も確認してください。私は最初このURLを間違えたせいでうまくいきませんでした。(自動で入力されているものがそれっぽいURLだったのでよく確認しないでそのまま使ってしまった)