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

元ネタはServerless Meetup Fukuoka #1 - connpassにてセッションした

月額10円から作るServerless Website〜Azure編〜/serverlessfukuoka-20170825 // Speaker Deck」を実際に作ってみるというものです。

Webサイトをホスティング

AzureでWebサイトをホスティングするなら、Webサイトホスティングに特化しているPaaSのWeb Appsを使う方法が機能豊富でオススメです。

構築手順は下記の同僚の記事が参考になります( ˘ω˘)

zuvuyalink.net

静的Webサイトをホスティング

Azure BLOB

Azureで静的ファイル配信を行うとしたらAzure BLOBを利用します。BLOBはオブジェクトストレージのサービスです。

  1. リソースグループ作成
  2. Azure Storage Account作成
  3. ストレージキー取得
  4. 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/ へアクセスしてみましょう。

f:id:hawa9:20180130235000p:plain




はい、Status 400ですね。BLOBはIndexFileに対応していません。index.htmlのパスも含めてhttps://<account-name>.blob.core.windows.net/index.htmlへアクセスしてみましょう。

f:id:hawa9:20180130235048p:plain

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ポータルを利用します。

  1. 作成したAzure CDNプロファイルを開く f:id:hawa9:20180130235109p:plain
  2. BLOBを配信元としてエンドポイントを追加 f:id:hawa9:20180130235121p:plain

作成したエンドポイントにRewriteのカスタムルールを設定します。

  1. 作成したエンドポイントを開く f:id:hawa9:20180130235131p:plain
  2. エンドポイントの高度な機能を開く f:id:hawa9:20180130235140p:plain
  3. ルール作成画面へ f:id:hawa9:20180130235152p:plain
  4. Rewriteルールを追加 f:id:hawa9:20180130235210p:plain

CDNへの反映されるまで待ちます。反映後 https://<cdn-endpoint>.azureedge.net/ へアクセスすると、

f:id:hawa9:20180130235225p:plain

表示できました。

次回

Azure BLOBを配信元とした静的Webサイトのホスティング環境ができました。次回はお問い合わせページへの対応を行います。

Azureテクノロジ入門 2018

Azureテクノロジ入門 2018