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

これは大した苦労なくできたが、自分向けへのメモ

Angular 4 で作成した、SPA をプロダクションでビルドする。ポイントは、コンテナ名がもし、web だったら次のようにしてビルドする。ローカルPCでテストする時は、base href は、/ になるはずだ。しかし、例えばblob とかにアップロードすると、URL が https://xxxx.blob.core.windows.net/web/index.html とかになるだろう。そのため、本番環境では、もしそうなら、--base-href フラグをつけて、base href を指定しておく。

プロジェクトのビルド

 ng b -prod --base-href /web/

するとdist ディレクトリ配下にファイルが生成される。

$ ng b -prod --base-href /web/
Date: 2017-10-18T15:40:25.216Z                                                t Hash: 8d4581caef41aa5fde78
Time: 16687ms
chunk {0} polyfills.d8d3d78a4deb2ab66856.bundle.js (polyfills) 66.1 kB {4} [initial] [rendered]
chunk {1} main.5c27cd4d6d08e4aeef7c.bundle.js (main) 54.9 kB {3} [initial] [rendered]
chunk {2} styles.0363122755f82fabd526.bundle.css (styles) 52.4 kB {4} [initial] [rendered]
chunk {3} vendor.0a6d7c376a3409d9df1d.bundle.js (vendor) 788 kB [initial] [rendered]
chunk {4} inline.4f1fb8581b76445ec606.bundle.js (inline) 1.45 kB [entry] [rendered]

blob へのアップロード

これらのファイルを blob にアップロードする。私はコンテナ名を、web にして、permission は、blob にしている。（リードオンリー）

私は、Azure Storage Explorer を使っている。

CORS の設定

Azure Functions 側で、CORS の設定が必要。Azure Functions の Function App から、API > CORS を選んで、blob の URL を設定してあげると、SPA から、それらのURLをコールできるようになる。

成果

まだ公開できないが、SPA + Azure Functions + Logic App + Cosmos DB によるデモサイトを公開できた。

残課題

アップロードは特に難しくなく、すんなり動いたが、いくつか残件があるが、夜遅いのでまた明日。

TODO

• https://xxxx.blob.core.windows.net/web/index.html ではなく、https://xxxx.blob.core.windows.net/web でアクセスしたい
• Azure Functions Proxy 経由で使いたい
• minify 化されているが、javascript のコードが読めるので、バックエンドのURLはバレてしまう。

明日はよく知っている人に上記のことを聞いてみよう。