決定版 静的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のサイトホスティング専用の場所へアップロードすることができる。 詳細なドキュメントはこちら ちょっとアップしたいだけなのに大げさではあるが、著者としては普段から使っているツールなので凄く楽なんです。 さて、本編であるが詳しい手順はそれぞれのドキュメントがしっかり描かれているので、そちらを参照してほしい ポイントとしては、Server Configurationは残念ながらAzureが無いので、Manual Uploadを選ぶこと。 Sync…