Azure CDNでSSLとCustom domainを使い、Storage accountから静的Webサイトを公開する

Azure CDNを使って公開するのはとても簡単だった。ほとんどドキュメントを読まなくても大丈夫。唯一手間取ったのが、ReactのためのURL Rewriteの設定。詳しくは以下で。

Azure CDNのセットアップ

まずは、Azure CDNのセットアップを行う。Storage accountの設定ページを開き、左のメニューからAzure CDNを探してクリックする。New endpointフォームを入力してCreateをクリック。Origin hostnameには、デフォルトで入っているStorage accountのアドレスではなく、WebのPrimary endpointを入力するのがポイント。これはStatic websiteページから取得できる。今回の場合はweb.core.windows.netドメインにあった。

以下では、Microsoft CDNを選んだ場合について解説する。

これだけでCDNが準備され、設定したアドレスを使ってWebサイトにアクセスできるようになる。

カスタムドメイン

次に、カスタムドメインの設定を行う。

DNSの管理画面に行き、使いたいアドレスからCDNのEndpointへのCNAMEレコードを設定する。

CDNの設定ページを開き、Custom domainsを選択。追加ボタンを押す。使うカスタムドメインを入力し、しばらく待つと以下の画面になる。以上で終わり。

URL rewrite

これはReact router等を使ってシングルウェブページ上で複数のURLを作った場合の話。その仮想的なアドレスにユーザがアクセスすると、当然そのファイルは存在しないのでCDNは404エラーを返してしまう。そこで、それらの仮想的なアドレスへのアクセスに対して/index.html等のファイルを返してあげる必要がある。

CDNの設定画面から、Rules engineを選択する。Add ruleをクリックする。ルールの条件として、ファイル名にピリオドが含まれないことを指定。アクションとしてはSource pattern "/"からDestination /index.htmlへのURL rewriteとした。Preserve unmatched pathはNoとすること。これをYesとすると、/index.html部分に対して余計なPathが追加されてしまう。

うっかりやりがちなミスが、ファイル名をチェックする条件を指定し忘れること。ファイル名をチェックしないと、*.jsや*.cssへのアクセスもリダイレクトしていまい大惨事になる。

Source patternに対して正規表現を入れれば、わざわざURL file name条件を入れなくても簡単に設定できるんじゃないか、とも思うが、自分が試した限りではうまくいかなかった。ライブラリのドキュメントにはprefix-baseとあるので、対応していないんじゃないかと思う。

File extensionがNot Anyという条件でも同様なことが実現できそうな気がするが、これもうまくいかなかった。理由は不明。