Azure Blob Storageで静的Webページをホストする方法とメリット

本記事はFIXERが提供する「cloud.config Tech Blog」に掲載された「Azure Blob Storageで静的ページをホストする」を再編集したものです。

この記事はFIXER Advent Calendar 201918日目の記事です。 昨日の前田さんの記事はこちらです。読んだ感想としては、 普段バックエンドを余程 C# で書いている私にとってはすごく新鮮で興味の湧く内容でした。同じ言語でバックからフロントまで統一できるのは良いですね。開発もスムーズに進みそうです。

あまり TypeScript や JavaScript を書かない人にこそ読んでほしい記事です。

本日は Azure Blob Storage による Web アプリケーションのホスティングが結構良かったので、それを記事にしました。

Azure Blob Storage で静的ページをホストするメリット

（以下、Azure Blob Storage を Blob Storage と省略します。）
Blob Storage を使う主なメリットは4つあります。

・料金がかなり安い
・SPAの際にルーティング設定が不要
・リクエスト処理が高速
・デプロイが簡単

App Service プランを利用しないので料金も安く、簡単にデプロイできるので個人でサクッと作ったモノなどをホストするのには非常に向いていると思います。ということで実際にホストしていきます。

ストレージアカウントの作成

まずはAzure Portalからストレージアカウントを作成します。このときに気を付けることはストレージアカウントを作成する際にアカウントの種類を StorageV2（汎用 v2）にすることです。でないとホスト出来ません。

静的なwebサイトの有効化と手動でのデプロイ

さて、ストレージアカウントの作成が完了したら作成したリソースに移動します。するとストレージアカウントの設定に「静的な Web サイト」という項目があるので、有効にしてインデックス ドキュメント名を設定します。

保存を押すと、プライマリエンドポイントが生成されているので、予めコピーしておきます。