Azure Static Web Apps と LINE ( LIFF ） で作る手書きメッセージカードアプリ

先日のMicrosoft Build 2020にて 、Azure App Service のアップデートで 静的サイトのホスティング を実現する Azure Static Web Apps が発表になりました。（現時点Preview版）最近 LIFF にハマっているので組み合わせてみました。

Azure Static Web Appsとは

フルスタックのWebアプリを自動的にビルドし、GitHubリポジトリからAzureにデプロイするサービスです。Azure Static Web Appsは、Azure Functionsで動作するバックエンドAPIと統合されています。
https://docs.microsoft.com/en-us/azure/static-web-apps/overview

構成図は下記のようになります。

できたLIFF アプリはこちら

こちらを参考に手書きメッセージカードアプリを作成しました。

さいごに

Azure Static Web Apps を使うと、Azure Functionsが統合されるので、CORS の設定等を気にすることなく、バックエンドを構築できます。実際に使ってみてLIFFアプリの開発にも活用できると思いました。また他にも色々試してまたブログにしていきますね。
（このアプリで妹に誕生日メッセージカードを送信したら喜んでもらえました^^父の日にもいかがですか？）

参考資料
https://docs.microsoft.com/ja-jp/azure/static-web-apps/getting-started?tabs=vanilla-javascript
https://docs.microsoft.com/ja-jp/azure/storage/blobs/storage-quickstart-blobs-nodejs
https://github.com/line/line-liff-v2-starter
https://docs.microsoft.com/ja-jp/learn/modules/publish-app-service-static-web-app-api/
https://docs.microsoft.com/ja-jp/learn/modules/create-deploy-static-webapp-gatsby-app-service/