###### tags: `Workshop` `App Service` # Deploy a website to Azure with Azure App Service ## I 在 Azure App Service 部屬網頁應用程式 **以下步驟參考此份教學文章並使用範例程式碼 [Host a web application with Azure App Service](https://docs.microsoft.com/en-us/learn/modules/host-a-web-app-with-azure-app-service/)** ### #1 在 Azure 上建立 App Service 資源 - 開啟 [Azure Portal](https://ms.portal.azure.com/) - 找到 Wep App 並點選 ![](https://i.imgur.com/K6CccU0.png) - 填寫相關資料並建立 - 選擇 Python 3.8 或其他 - Python default 僅能選擇 linux (無法直接啟用 Application Insight) - sku 至少選擇 Standard ![](https://i.imgur.com/SJuwdsU.png) ### #2 建立 Python 網頁應用程式 - 使用 Azure Cloud Shell，點選最上排 ![](https://i.imgur.com/zq3TfW7.png) 圖示 - 建立新資料夾並進入 ``` mkdir python-flask-web-app cd python-flask-web-app ``` - 建立虛擬環境 ``` virtualenv .env ``` - 啟用虛擬環境 ``` source .env/bin/activate ``` 若成功啟用會顯示 `(.env) huier@Azure:~/python-flask-web-app$` - 安裝套件 ``` pip install flask ``` - 開啟編輯器 ``` code . ``` - 將下列程式碼貼入，並按 ctrl+s 儲存成 app.py ``` from flask import Flask app = Flask(__name__) @app.route("/") def hello(): return "<html><body><h1>Hello My First Web on Azure!</h1></body></html>\n" ``` ![](https://i.imgur.com/K8DW5oq.png) ### #3 部署到 Azure Web App - 將套件輸出成 requirements.txt ``` pip freeze > requirements.txt ``` <!-- - 將程式碼加入版控 ``` git init git add . git commit -m "first commit" ``` --> - 使用 `az webapp up` 進行打包部署 ``` az webapp up --name <app-service-name> --resource-group <resource-group-name> --plan <app-service-plan-name> --sku <selected_sku> --location "<app-service-location>" ``` > az webapp up: webapp up is a feature of the az command-line interface that packages your app and deploys it. Unlike other deployment methods, az webapp up can create a new App Service web app for you if you haven't already created one. > From : [Deploy code to App Service - Manual deployment](https://docs.microsoft.com/en-us/learn/modules/host-a-web-app-with-azure-app-service/6-deploying-code-to-app-service) ## II 實作 Deployment Slot 功能 **以下步驟參考此份教學文章並使用範例程式碼 [Stage a web app deployment for testing and rollback by using App Service deployment slots](https://docs.microsoft.com/en-us/learn/modules/stage-deploy-app-service-deployment-slots/)** ### #1 新增 dev 環境 - 選擇先前建立的 Web App > Deploment Slots > Add a slot ![](https://i.imgur.com/RbmwANQ.png) - 連結到 https://<app-service-name>-**dev**.azurewebsites.net/ ### #2 透過 swap 進行版本置換 - Deployment Slots > Swap ![](https://i.imgur.com/4vPQUAm.png) - 分別連結到 https://<app-service-name>-**dev**.azurewebsites.net/ 和 https://<app-service-name>.azurewebsites.net/ 確認版本已做交換 ## III Scale Up 及 Scale Out 練習 **參考此份教學文章並使用範例程式碼 [Host a web application with Azure App Service](https://docs.microsoft.com/en-us/learn/modules/app-service-scale-up-scale-out/)**