Azure BLOBで静的Webサイトをホスティングする
元ネタはServerless Meetup Fukuoka #1 - connpassにてセッションした
「月額10円から作るServerless Website〜Azure編〜/serverlessfukuoka-20170825 - Speaker Deck」を実際に作ってみるというものです。
Webサイトをホスティング
AzureでWebサイトをホスティングするなら、Webサイトホスティングに特化しているPaaSのWeb Appsを使う方法が機能豊富でオススメです。
構築手順は下記の同僚の記事が参考になります( ˘ω˘)
静的Webサイトをホスティング
※2018/12/18
Azure Storage BLOBのみで静的Webサイトをホスティングする機能がリリースがGAしました。これで下記のAzure CDNを組み合わせてindex.htmlをゴニョゴニョする必要はなくなりました。
Azure Storage で静的 Web サイトの一般提供を開始 – Cloud and Server Product Japan Blog
Azure BLOB
Azureで静的ファイル配信を行うとしたらAzure BLOBを利用します。BLOBはオブジェクトストレージのサービスです。
- リソースグループ作成
- Azure Storage Account作成
- ストレージキー取得
- Azure BLOBコンテナ作成
$ az group create --name <resource-group> --location japaneast $ az storage account create --resource-group <resource-group> --name <account-name> --sku Standard_LRS $ az storage account keys list --resource-group <resource-group> --account-name <account-name> | jq .[0] { "keyName": "key1", "permissions": "Full", "value": "<account-key>" } $ az storage container create --name '$root' --account-name <account-name> --account-key <account-key> --public-access blob
出来上がったBLOBに適当に作ったindex.htmlをアップロードします。ちなみに、Azure Storage管理には謹製のAzure Storage Explorer – クラウド ストレージ管理 | Microsoft Azureもいいですよ。
$ az storage blob upload --account-name <account-name> -c '$root' -f index.html -n index.html --content-type text/html
それでは、https://<account-name>.blob.core.windows.net/
へアクセスしてみましょう。
・
・
・
はい、Status 400ですね。BLOBはIndexFileに対応していません。index.htmlのパスも含めてhttps://<account-name>.blob.core.windows.net/index.html
へアクセスしてみましょう。
BLOBから配信はできていますが、今回はWebサイトホスティングを目指してるのでこのままでは・・・
Azure CDN
Azure CDNを使えば解決できそうです。 stackoverflow.com
要はアクセスが来たらAzure CDNを使ってindex.htmlにRewriteしてあげればいいとのこと。
CDNを入れると配信も速くなるので一石二鳥ですね。
- Azure CDNプロファイル作成
$ az cdn profile create --name <cdn-profile> --resource-group <resource-group> --location japaneast --sku Premium_Verizon
Premium_Verizon
の場合はCDN管理にAzureポータルを利用します。
- 作成したAzure CDNプロファイルを開く
- BLOBを配信元としてエンドポイントを追加
作成したエンドポイントにRewriteのカスタムルールを設定します。
- 作成したエンドポイントを開く
- エンドポイントの高度な機能を開く
- ルール作成画面へ
- Rewriteルールを追加
- IF 常に
- URL Rewrite source
((?:[^\?]*/)?)($|\?.*)
destination$1index.html$2
- URL Rewrite source
((?:[^\?]*/)?[^\?/.]+)($|\?.*)
destination$1.html$2
CDNへの反映されるまで待ちます。反映後 https://<cdn-endpoint>.azureedge.net/
へアクセスすると、
表示できました。
次回
Azure BLOBを配信元とした静的Webサイトのホスティング環境ができました。次回はお問い合わせページへの対応を行います。
- 作者: 久森達郎、真壁徹、大田昌幸、藤本浩介、佐藤直生、安納順一、松崎剛、高添修,日本マイクロソフト株式会社
- 出版社/メーカー: 日経BP社
- 発売日: 2017/11/17
- メディア: 単行本
- この商品を含むブログ (1件) を見る