こんにちわ。
コンサルティング＆テクノロジー部の Azure チームの開發です。
5 月の Microsoft Build で Azure Blob Storage での静的 Web サイトのサポートが発表されました。
今までも Azure Blob Storage で静的 Web サイト作れたよ？って思う方もいるかもしれませんが、これまでの課題を解決するような機能が追加されているんです。
この記事では、Microsoft Build で発表された方法とこれまでの方法の違いを整理し、今回発表された方法で実際に構築をした手順を記載します。
また併せて、Microsoft Build で発表された Azure Microsoft CDN を利用した HTTPS カスタムドメインの静的 Web サイトを構築する手順にしてみました。
Blob Storage での静的 Web サイトがサポート
まず、以下の内容が出来るようになりました。
■Azure Storage のみでできる機能
・デフォルトページの指定
http://xxxx.xxxx/index.html ⇒ http://xxxx.xxxx/ でOK
・カスタムエラーページ
404エラー時に自動でカスタムエラーページにリダイレクトします。
■Azure Storage + Azure CDN(MicrosoftCDN or VerizonCDN)
・HTTPSカスタムドメインも可能（CDN利用）
https://xxxx.xxxx/
※ Azure MicrosoftCDN や Azure VerizonCDN だと SSL 証明書を無料で利用できるます。
なお、現在運用中の Storage Blob がそのままサポートされる訳ではありません。
Storage Account の設定および、指定された Blob コンテナ内で構成する必要があります。
例)指定した URL にページがなかった場合
BlobStorage を使用した各手法の静的Webサイトの機能の違い
Blob Storage を利用した静的 Web サイトを構築した場合について、これまでの構築方法と今回構築した方法での機能差について表にまとめました。
| ①通常 | ②今まで静的Webサイト作成で 推奨された方法 |
③今回新たにサポート 発表された方法 |
|
| コンテナ | 任意(ex. hoge) | $root | $web |
| 設定 | 静的Webサイトを有効化 | ||
| URL | Ex.)https://xxxx.blob.core. windows.net/hoge/index.html |
Ex.)https://xxxx.blob.core. windows.net/index.html |
Ex.)https://xxxx.zz.web.core. windows.net/ |
| 仮想 ディレクトリ |
Ex.) https://xxxx.blob.core.windows. net/xxx/hoge/hoge.css |
作成不可 必要時は別途コンテナを作成する |
Ex.) https://xxxx.z3.web.core. windows.net/xxx/hoge.css |
| HTTPS | ○ | ○ | ○ |
| カスタム ドメイン |
Ex.)http://xxx.xxx/hoge/index.html | Ex.)http://xxx.xxx/index.html | Ex.)http://xxx.xxx/ |
| デフォルト サイト |
× | × | ○ |
| カスタムエラー | × | × | ○ |
| CDN | ○ | ○ | ○ |
| HTTPS カスタム ドメイン （CDN利用) |
Ex.) https://xxx.xxx/hoge/index.html |
Ex.) https://xxx.xxx/index.html |
Ex.) https://xxx.xxx/ |
比較してみると、今まで課題になっていた部分が解決されているのが分かります。
HTTPS カスタムドメインの静的 Web サイトを構築
では、Blob Storage + Microsoft CDN で HTTPS カスタムドメインを利用した静的 Web サイトを作ってみましょう。
1.静的 Web サイトのサポートを有効にする
現時点では「静的な Web サイト」はプレビュー中です。
下記の URL から Azure Portal にログインすることで、「静的な Web サイト」を利用できるようになります。
http://aka.ms/staticwebsites
2.Blob Storageの作成
Azure Portal のメニューのブレードから、[ストレージアカウント] > [+追加] を選択しストレージアカウントを作成します。
デプロイモデル：Resource Manager
アカウントの種類：StorageV2(汎用 v2)
3.静的 Web サイトの有効化
作成した Storage アカウント のブレードから [静的なWebサイト]項目を選択します。
静的なWebサイト：有効
インデックス ドキュメント名：任意
(デフォルトページを指定。後から設定でもOK)
エラードキュメントのパス：任意(後から設定もOK)
保存すると、静的な Web サイトをホストする Storage コンテナー($web)が自動で作成されます。
また、画面にプライマリエンドポイントが表示されます。後で利用するのでメモを取っておいてください。
プライマリエンドポイント：
https://{ストレージアカウント名}.{英数字}.web.core.windows.net/
4.ファイルの配置
$web コンテナ内に、デフォルトページとエラーページを置きます。
ポータルから配置する方法は以下になります。
作成した Storage アカウント のブレードから[BLOB SERVICE ] > [コンテナー]項目を選択し、デフォルトページ(index.html)とエラーページ(error.html)をアップロードします。
エラーページは 今回のテストではerror/error.html に配置するので、アップロード先フォルダーに「error」フォルダを指定しておきます。
設定後、プライマリエンドポイント(https://{ストレージアカウント名}.{英数字}.web.core.windows.net/)にアクセスすると
デフォルトサイト(index.html)が表示します。
また、存在しないページにアクセスすると、カスタムエラーページ(error/error.html)が表示されます。
カスタムドメインを使用するが HTTP のみでのアクセスで CDN が必要ない場合は、DNS プロバイダーの Web サイトからCNAME レコードにプライマリエンドポイントの{ストレージアカウント名}.{英数字}.web.core.windows.net を設定します。
HTTPS でのアクセスやStorage(オリジン)への負荷を軽減させる場合は、以下の手順の5以降のCDNの設定をする必要があります。
5.CDN を使用してカスタムドメインで HTTPS でアクセス
5-1.CDN の設定
Azure Portal の左メニューの[すべてのサービス] から[CDNのプロファイル]を開き、[+追加]から作成します。
ただ、Storageアカウントのブレードの[Azure CDN]項目からの作成は配信ホスト名が”xxxx.blob.core.windows.net”で固定されているので、[CDNプロファイル]から作成します。
価格レベル：標準 Microsoft
今すぐ新しいエンドポイントを作成する：チェック
CDNエンドポイント名:任意の名前。DNS設定時に使用します。
配信元の種類：カスタムの配信元
配信元のホスト名：静的Webサイトのプライマリエンドポイント
{ストレージアカウント名}.{英数字}.web.core.windows.net
5-2.DNS設定
DNS プロバイダーの Webサイトから、新しい CNAME レコードを作成し、CDN エンドポイント(xxxx.azureedge.net) で設定します。
5-3.CDN のカスタムドメイン設定
5-1でエンドポイントを作成後、作成済みのエンドポイントが表示されるのでクリックします。
エンドポイントのブレードが表示されるので、[概要] > カスタムドメインの追加 から 6-2で設定したカスタムホスト名を入力します。
これでカスタムドメインを使用して、HTTP で Blob にアクセス出来るようになりました。
次は HTTPS でアクセス出来るようにします。
5-4.HTTPSアクセス設定
エンドポイントのブレードの[概要]から先程追加したカスタムドメインを選択し、以下のようにカスタムドメイン HTTPS を有効にします。
カスタムドメインHTTPS：オン
証明書の管理の種類：CDNマネージド
保存すると、ドメイン検証および証明書のプロビジョニングが開始されます。
6.確認
5が完了後、カスタムドメインで HTTPSアクセスしてみます。
正常に表示されました。
最後に
今回紹介した、Azure Blob Storage で静的な Web サイトを構築する事により、ホスティングコストを最小限に抑える事が出来ます。
また、CDN を組み合わせる事により、HTTPS カスタムドメインサイトを作成する事も出来ます。
特に一時的な静的サイト(たとえば、キャンペーンサイトなど)を構築する際は、可用性や負荷分散の面でも大いに役立つかと思います。
Web サイトを構築する際には、是非、検討の一案とし利用してみてください。
補足：今回取り上げたAzure Blob Storageの静的Webサイトサポートや、Azure Microsoft CDNは 現時点(6/22)でまだプレビュー段階です。
■Azure関連記事
Microsoft de:code 2018 MRPP出展レポート
【de:code2018レポート】HoloLens×AI×IoTセッションに登壇しました！
Azure SQLDabase にプライベートなネットワークからアクセスしてみよう
Custom Vision Serviceを使ってお花判定カメラアプリを作る
...Azure関連記事一覧へ
