# Azure Web App - ACR docker 部屬

## 前言
之前有介紹過什麼是[Azure Container Registry(ACR)](https://hackmd.io/@emmmmmma/BJAFaVVp2)也有介紹過如何用[Azure Web App部署過靜態網頁](https://hackmd.io/7eKbl9zhQDyOSbIiHTwRkA)，忘記的可以先回去複習一下～

話說回來一般的網頁都不是靜態的，會有資料庫、有api、有後台系統、有使用者介面，這時候就不會只有一個檔案，所以本篇要教大家動態網頁的情況下，如何透過image將前後端的檔案都部署上雲端！

## 實作
前面幾篇都有講過相關的概念，所以本篇就直接開始實作啦

1. 進入Azure選擇App Services並且建立Web App（如果有SQL之類的資料庫就選則第三個Web App+ Database)

2. 輸入名稱，publish選擇Docker Container，並選擇對應的方案，然後點擊下一步

3. Image Source選擇Azure Container Registry，並在下方選擇對應的Registry和image，最後按下建立

:::info
這樣不也是只有執行一隻程式碼嗎:question:
沒錯，所以你可以選擇前後端各開一個Service
當然也可以在Options改成從Single Container 改成 Docker Compose(Preview)，並且在下方的Config裡面輸入yaml檔案去執行多個image

P.S.如果想知道更多關於yaml的文章可以看下方參考文件的官方寫法

:::

4. 等待Server建立好就完成啦!

## 總結
是不是比想像中的簡單很多啊，放到雲端好處多多，app service中還有很多的功能，例如可以監測流量同時安全性上也有一定的保障，此外如果想要知道如何讓ACR部署的網頁也可以達到自動化部屬的話，請參考下一篇[Azure Devops - pipeline 自動化部屬](https://hackmd.io/@emmmmmma/Hkb2ry_eT)

## 參考
- [使用 Docker Compose 設定建立多容器 (預覽) 應用程式](https://learn.microsoft.com/zh-tw/azure/app-service/quickstart-multi-container)
- [教學課程：在適用於容器的 Web 應用程式中建立多容器 (預覽) 應用程式](https://learn.microsoft.com/zh-tw/azure/app-service/tutorial-multi-container-app)