SPA を Azure Functions Proxy を使って公開する

Angular 4 + Material Design で、SPA を作成した。これを Blob にアップロードして見た。

• SPA を Blob Storage にあげて、Azure Functions をバックエンドにしてみる。

折角なので、Azure Function の Proxy を使って、URL を blob の URL じゃないようにしたいと考えた。そしたら、次のような記事があった。

• Azure Functions SPA
• Work with Azure Functions Proxies (preview)
• Azure Function Proxies samples

簡単にできそうだ。

Azure Functions を設定しても動かなかった理由

自分で同じようにやって見たが、なぜか全く動かない。ルーティングしない。とても悩んだが理由は簡単だった。Azure Functions 2.0 (Preview)では現在のところ、思ったように動かない雰囲気。少なくともやりたかったことは動かない様子。解決策は簡単で、Azure Functions 1.0 (GAのもの) を使えば、上記の記事の通りの設定でうまくいった。

設定の詳細

実際にルーティングしたいサイトは、

http://xxxx.blob.core.windows.net/web/index.html
http://xxxx.blob.core.windows.net/web/asset/xxx.png
http://xxxx.blob.core.windows.net/web/dashboard

みたいな感じだったりする。 このような設定にしたい場合は、下記のようにすると良い。

ポイントは、変数になる箇所に、例えば、{*url} みたいなのを書いて、バックエンドの方にも、それを引き継いだ {url} みたいなのを書くとそこがワイルドカードになる。

TODO

今日は、Azure Functions 2.0 では、　Proxyがうまく動かないのが、わからなかったので、時間を使ってしまった。次にしたいところは次のこと。

• ユーザー認証
• カスタムドメイン
• Continuous Delivery
• index.html を単なる / にしたい

など！