# Azure Web App - 靜態網頁 自動化部屬

## 前言
本篇是Azure最基礎的入門應用之一，把靜態網頁部署到雲端，Web appr靜態網頁的部署方式有好幾種可以直接把code上傳，也可以連到自己的github。本篇教大家如何把github的專案部署到Azure上！

## 靜態網頁 vs 動態網頁
- 靜態網頁，簡單還說就是「沒有後台」或是沒有「呼叫ＡＰＩ」的網頁，網頁單純是用HTML、CSS和JavaScript這些檔案所構成或是用一些前端框架React, Vue3, Anglur寫的也都可以是靜態網頁。適用於不常更動或是網頁內容較少的網站。

- 動態網頁當然就是有後台有API的網頁，相對起來較為複雜，不過可塑性也比較高，更新快速，舉凡線上論壇、電商網站、會員功能、購物車等等，都屬於動態網頁喔！

## CI/CD 自動化部署
這又是一個大坑，但本篇不會詳細介紹內容，先帶大家了解概念和簡單的應用為主。

### CI（Continuous Integration）持續整合
持續整合（Continuous Integration，CI）顧名思義，就是當開發人員完成一個階段性的程式碼後就經由自動化工具測試、驗證，協助偵測程式碼問題，並建置出即將部署的版本（Build）。

### CD（Continuous Deployment）持續部署
持續部署（Continuous Deployment）可以說是CI的下一階段，經過CI測試後所構建的程式碼可以透過CD工具部署至伺服器，減少人工部署的時間。


### 從測試、建置到部署一勞永逸
我們把code放在github的repository裡面，在透過Azure部署，那如果我修改了程式碼呢？是不是還要再重新部署一次？答案是不用，因為Azure在部署的過程會自動在你的程式碼加入一個.yml檔案，有了這個檔案，下此只要修改程式碼，push到github上，系統就會自動幫你測試並且為你部署到雲端了！

## 教學
1. 先將專案上傳github
2. 登入Azure並在上方搜尋web app，選擇「靜態web應用程式」

3. 自訂群組及專案名稱
4. 來源選擇github，儲存機制選擇你要部署的repo，並且設定對應的語法（組建預設），就可以建立了！

:::info
:writing_hand: 如果沒有看到任何存放庫：
需要在 GitHub 中授權Azure Static Web Apps。
進入 GitHub repo，然後移至 [設定 > 應用程式 > 授權的 OAuth 應用程式]、選取[Azure Static Web Apps]，然後選取 [授與]。
:::

5. 等待部署後就會看到成功畫面，代表伺服器部署完成！

6. 接著進入github專案點擊Action看有沒有成功部署上去！

7. 回到程式碼會發現多了一個workflows的資料夾，點開裡面就會是自動化部署的yml檔案！

8. 後續修改程式碼時，因為azure增加了.yml檔案，所以記得要先pull下新的版本，再繼續修改和commit喔。
9. 完成後push上github就會看到action自動幫你進行CI/CD測試，只要過程中有任何錯誤他都報錯，避免推上伺服器後出現大麻煩！

## 總結
雲端的出現其實讓部署的門檻降低很多，希望大家都可以搭配自動化部署建立自己的第一個雲端網站！
如果想要在雲端上部署動態網站，可以將前後端的檔案利用docker的方式建立image並放在Azure Container Registry中，再透過Azure Web app部署，詳細教學請參考[Azure Container Registry(ACR)](https://hackmd.io/@emmmmmma/BJAFaVVp2)和[Azure Web App - ACR docker 部屬](https://hackmd.io/@emmmmmma/Hyk0TNNah)

## 參考資料
[快速入門：建置您的第一個靜態 Web 應用程式](https://learn.microsoft.com/zh-tw/azure/static-web-apps/get-started-portal?tabs=vanilla-javascript&pivots=github)

[【靜態網頁】與【動態網頁】是什麼？靜態與動態的差異｜天矽科技網頁設計](https://www.tsg.com.tw/blog-detail4-270-1-dynamic-static-web.htm)