Azure App Service 也可以架設純靜態網站

Edward Kuo
Jun 28 · 5 min read
Image for post
Image for post

之前在[讓Azure Blob作為靜態網站的Web Host]這篇介紹讓靜態網頁也可以在Azure Blob內架設一個靜態的網站。透過,本身Blob儲存功能與價格優勢外,是一個不錯選擇,但是,現在Azure App Service也推出可以架設純靜態網頁的網站,因為,現在還在預覽階段,所以,還不是很清楚未來的價格訂閱會是如何

而這項服務與原本Azure App Service一個最大不同是,你的Web檔案來源必須來自於Github

Image for post
Image for post

以目前看來是還不支援其他的地方,既然是所謂靜態網站,勢必也只能放像是CSS、JS、HTML...等這類型的網站,而API則可以放在傳統的Azure Web App或是Azure Function,前後端是完全分離的。

建立Static Web Apps

要建立一個Static Web Apps,在Azure Marketplace地方要搜尋Static Web Apps

Image for post
Image for post

點擊進入後,就可以看到設定畫面,在這邊就會看到需要跟你的GitHub帳號連結,此外,也會發現這裡並沒有像一般Azure Web App一樣可以自訂自己的HostName.

Image for post
Image for post

如果這邊想說我不要連結GitHub帳號,又或是說想等下再做設定,就會出現下面這個畫面。是無法讓你建立服務的

與GitHub連結好之後,就會要求與GitHub的Repos結合以及Repos的分支。

Image for post
Image for post

到這階段設定完成後,基本上只需要不斷按下一步,就可以開始建立一個靜態的Web App。

關於Static Web Apps

網站建立好之後,在主要資源畫面也可以看到CI/CD是透過GitHub Action執行,主要在於上面與GitHub設定好之後,Azure Static Web App 就被授予可以控制你在GitHub的權利,當然也包含幫你設定好CI/CD的GitHub Action

Image for post
Image for post

所以,在你的GitHub則可以看到Azure替你建立好相關的Workflow,並在你所選擇的Repos下建立好一個.github/workflows資料夾並在裡面設置好一個預設的一個CI/CD的YAML檔案

Image for post
Image for post

我的GitHub該Repos內都是靜態檔案

Image for post
Image for post

而YAML最主要就是把這些檔案上傳到Azure Static Web App,當然如果中間需要加入其他流程,也是可以自行去修改的

Image for post
Image for post

在整體介面上,比一般Azure Web App可以設定的東西少了很多,此外,關於不能自訂Host Name部分,這邊必須透過自訂網域來作解決,不然,服務會自動預設幫你建立好一組不容易理解的HostName。

Image for post
Image for post

這個服務推薦搭配API方式是透過Azure Function,所以,在此會整合Azure Function一些功能來使用。並可以透過介面去管理。不過,基本上是否要搭配Azure Function也不一定

以目前這服務特性來看,個人認為Azure推出這樣服務主要因該是要主打原本在GitHub的GitHub Pages功能,並結合本身Azure優勢與整合Azure內部的優勢,讓Azure Static Web App 不只是單存只有GitHub Pages,包含了網站路由、角色管理...等功能,但是,GitHub Pages本身是免費的,未來Azure這項服務是要收費還是能免費使用,可能會影響到使用者的抉擇

參考資料

https://docs.microsoft.com/zh-tw/azure/static-web-apps/add-api

EK.Technology Learn

Design,Thinking,Coding & have fun every thing

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store