決定版 静的CMSによるAzure Storageでのサイト構築
目的
PHP等を使って動的にサイトを配信するのではなく、先にコンテンツを構築しHTMLファイルとして配信する静的サイトを構築する。その後、生成されたファイル群をAzure Storageに配置しWebサイトの公開を行う。
今回はPubliiというCMSを使うことで、これまでの静的サイト構築で必須だった黒い画面を使わない流れを提示したい。静的コンテンツによるサイト構築は非常にテクニカルな趣があったが、今回はここをグッと下げた方法としてご紹介したいと考えている。
これまでの配信パターンのおさらい
Azure StorageでのWebサイト配信では、デフォルトファイルの設定が行えなかったため工夫が必要であった。（つまり、〜/とアクセスされたら〜/index.htmlを返す動き）
パターン１としては「Azure Storage + CDN」という方式になる。
これはCDNの機能を使い、URLのrewriteを行うパターンであるが、設定に少々癖があり慣れが必要という弱点がある。また、使うCDNによって設定が反映される時間がかかったりする。
パターン２としては「Azure Storage + Azure Functions Proxy」という方法。
こちらはサイトの前段でAzure Function Proxyを使いマッピングを行う。このパターンは設定が楽ではあるもののサイトのディレクトリ構造に従ってルールを作成するため手間が掛かる。 また、Functionsの特性からリクエスト毎にProxyが起動し、稼働して、去っていくという挙動をするため、 サイトにアクセスすると独特のもっさり感が漂よう。（これはそういうものだから当たり前の話）
構築方法については当ブログの記事にまとめてあるので詳細はそちらを参照のこと
今回は一番素直なパターンである「Azure Storageの静的サイトホスティング機能（プレビュー）」を使ってみることにした。
どうやってサイトを構築し、アップロードするか
目的で紹介したPubliiというCMSはELECTRONが使われているのでOSを問わず使える。一通り目を通したが、機能的にCMSに求められるものが実装されており、GDPR対応でよく見かけるようになったcookieのアラートも実装されていて、非常に最近の事情を考慮した機能が提供されている。今回はこれを使ってみたい。
次にアップロードである。
公式ドキュメントではAzure CLIを使ってファイルをアップロードすることとなっている。2018年9月26日現在、静的サイトホスティングはプレビューということもあり、このStorageにファイルをアップするところが少々厄介だ。
そこで、今回はVisual Studio Codeの拡張機能であるAzure Storageを使うことにした。
この拡張機能には Deploy to Static Website という機能があり、指定したディレクトリの配下を丸ごとStorageのサイトホスティング専用の場所へアップロードすることができる。
詳細なドキュメントはこちら
ちょっとアップしたいだけなのに大げさではあるが、著者としては普段から使っているツールなので凄く楽なんです。
手順
さて、本編であるが詳しい手順はそれぞれのドキュメントがしっかり描かれているので、そちらを参照してほしい
- ブログの作成はPubliiのこちら
ポイントとしては、Server Configurationは残念ながらAzureが無いので、Manual Uploadを選ぶこと。 Sync your websiteをクリックするとサイトの生成が行われ、outputフォルダにコンテンツが保存される。
- VS Codeでのアップロードはこちら
このドキュメントではVS Codeを用いてJavascriptやHTMLのコーディングを実施した後にAzure Storageの準備を行い、サイトのファイルをアップロードする流れになっている。サイト左にある目次のCreate the applicationの項を飛ばして、それ以外の作業を実施してほしい。Deploy the websiteでデプロイするコンテンツが入っているディレクトリで右クリックからDeploy to Static Websiteというメニューを選んでいるところを、Publiiで生成されるoutputフォルダとして読み替えれば後は全く同じ手順でOKとなる。
簡単に書くとVS Codeに機能拡張Azure Storageをインストールし、アカウントの設定をしてStorageの準備を済ませておくまでが準備。使用するときはPubliiのサイトフォルダをVS Codeで開いて、outputフォルダを右クリックしDeploy to Static Websiteを選んで終わりだ。（初回のみ、どのアカウントにアップするか聞かれる）
長々書いたが、実際やってみると実に楽チンだ。
これらの方法で構築したサイトのリンクを置いておくので、動作を見たい人はこちらをご確認いただきたい。 https://pakuestaticsite.z11.web.core.windows.net/
CDNの利用とカスタムドメインの設定
今回はAzure CDN(Microsoft)とカスタムドメインの設定も実施してみた。
カスタムドメインの設定については大元のDNSをAzure DNSにしている為、ドメインの所有確認なども含めて非常にスムーズに実施された。Azure CDN(Microsoft)ではHTTPSによる通信、つまりTLSプロトコルによる暗号通信に対応しており必要となる証明書を自動的に発行する仕組みも備わっている。こちらを利用する場合、自分で証明書を用意することもできるが今回は自動的に準備される方を選択した。(証明書の準備から維持管理までマルッと無料って。)
ここに少し注意することがある。
カスタムドメイン＋CDN＋Azure Storageとなると、ホスト名が非常に多くなり関係性を整理した上で設定するところに注意が必要だ。
今回のケースでは、カスタムドメイン staticsite.pakue.cloud は CDNのエンドポイントとなる pakuestaticsite.azureedge.net をさす設定となる。この設定はDNSに実施する。次に、pakuestaticsite.azureedge.net はCDNを経由して、 ストレージのエンドポイントである pakuestaticsite.z11.web.core.windows.net をキャッシュする。ストレージには カスタムドメインの設定は行わない。つまり、都合３つのドメインが存在し、どれにアクセスしても同じコンテンツが表示されることになる。
Azure Storageにカスタムドメインを設定した後にCDNの追加とカスタムドメインでのCDNアクセスを設定する場合は、Azure Storageのカスタムドメイン設定を変更することを忘れずに。（空欄にして保存すればOK）
ということで、以上の作業をした結果がこちら
https://staticsite.pakue.cloud/
なお、ドメインの適応についてはドメイン所有の確認が行われる。もし既存のドメインを引き継ぐ場合はダウンタイムをなくすためにドメイン所有確認を注意すること。 Azure Storageに既存のカスタムドメインを設定する場合はダウンタイムを発生させない為にasverify サブドメインを使用したカスタム ドメインの登録を行う。つまり、別のサブドメインを用意してそちらで所有確認を実施しチェックを終えたら、既存サブドメインを設定する。これで、リクエストが遮断されないでサイトの公開が可能となる。同じくCDNでカスタムサブドメインを設定する場合はcdnverify サブドメインを使って所有の確認を行う。
まとめ
シンプルなサイトの構築ではあるが、各種サービスを使いこなすことで、サイト公開のコストを恐ろしく下げることができる。
この手法でサイトを構築すれば、コストはストレージに保存されるデータの費用とCDNから配信されるコンテンツの転送料だけになる。スケーラビリティも前段にCDNがいるのでとても安心。Azure Storageだけでもかなりダウンストリームの速度は早いのでご安心いただきたい。コスト・メンテナンス性・スケーラビリティ・管理の手間とどれを取ってもこんな良い方法はないだろう。個人のサイトレベルなら、月数十円ってところじゃなかろうか。企業のサイトでも十分使えるやり方だ。（費用計算したら、既存の仕組みがアホらしくなるだろう）
そして、Javascriptを使いサイトの機能を実装して、裏側をアプリケーションサーバであったりServerlessな実装にしてとか実は活用範囲は広い手法でもある。是非お試しください。
追記
この方法が良いことがわかったし、そーっと作り直そうかな。
