Azure Static Web App 是什麼?

在今年 5 月 Azure 推出了 Azure Static Web App 的服務，如果要一句話來說，建立此服務時，可以一併設定與 Github or Azure DevOps 連結，在每次 Commit 的時候，就能直接將前端應用程式佈署到Azure，大大的增加開發體驗。除了靜態的 HTML、CSS、JavaScript，支援主流框架 React/Angular/Vue.js，也支援用 C# 撰寫 SPA 的框架 Blazor，支援的前端框架可以到此連結，後端可搭配 Azure 的 Serverless 服務 (Azure Function) 來實現 Api 的串接，透過 Reverse-Proxy 也省去的 CORS 的設定

Azure Static Web App 的價格

在免費的方案，即提供 SSL 的 Hosting，及 2 個自訂網域，可於 DNS Server 設定 cname，也可佈署你的後端程式於 Azure Function 搭配前後端串接，享有 100 萬個 Request 的免費額度

發佈 LINE Liff App 到 Azure Static Web App

LIFF 全名是 LINE Front-end Framework，一個可以在 LINE App 內運作的網頁程式，可以將一些不適合對話式的情境，結合於 Line App 裡面，達成一致的體驗，也因為是 Liff App 是全前端實現，所以很適合發佈到 Azure Static Web App，以下用官方的 Liff Starter 來做一個部屬示範 https://github.com/line/line-liff-v2-starter

Fork Liff Starter Repo

於 Azure 建立 Azure Static Web App

登入 Github 完成驗證

選擇 Repo 與 Branch

選擇 Frameworks

選擇不同的Framework 會影響 Github Action 設定的 build command，此例為單純的 JavaScript，故選擇Custom，Root 設定為 /public

建立後 Github Action 會同步完成 CI 設定並開始發佈

瀏覽完成後的部署

出現此畫面代表正常，因為我們還未指定 LIFF ID

建立 Liff App 到 https://developers.line.biz/ 後台，於 Provider 底下建立一個 Line Login 服務 (記得 Bot 跟 Line Login 要在同一個 Provider 底下)

將 LIFF ID 複製起來，LIFF URL 就是待會我們要觸發的網址

修改程式並 Commit

LIFF Starter 這個 Repo 我們要改兩個地方，一個是將 userNodeJS 改為 false (因為我們是跑 static 站台)，defaultLiffId 改為剛剛複製的 LIFF ID

Commit 後可以看到 CI 也同時觸發

瀏覽結果

小結

用 Azure Static Web App 我覺得有三大好處 📌 免費的 Hosting, SSL 📌 從Repo出發自動建立好 Github Action CI/CD，專注在寫code就好 📌 方便整合 Azure Serverless (Azure Function) 服務也能開發後端 Api (每月有 100 萬 Request 免費)

參考連結