在前面的篇章，我們用Azure Functions打造了RestFul的API，也用撰寫了簡單的靜態網頁。

在完成多樣實作後，我們接下來要把之前寫好的FUNCTIONS REST API以及靜態網頁佈署上去了!!

中間加入的讀者，可以參考過去的文章，找到之前實作的程式碼

連結請點此：Azure Functions⚡開發REST API-交友任務管理

或是懶惰自己重搭，想直接把我的程式碼載下來佈署的也是可以！　程式碼Github連結

我們在接下來的篇章，會教大家如何：

1. 如何佈署Azure Functions
2. 如何佈署靜態網頁到Azure Web App
3. 如何設置CDN加速網頁存取
4. 如何設置Custom Domain
5. 如何設置TLS加強安全性

接下來就直接帶大家實作囉!

佈署Azure Functions

1.針對專案按右鍵，點選Publish

2.選擇Create New，Publish

3. 設定您要佈署的基本資訊(和之前在Azure Portal上的設定很像)

忘記的話可以參考一下之前Azure Portal的設定

4. 完成後會看到以下畫面

5. 測試Endpoint，會看到已經佈署上去

6. 到Resource去查看，也可以看到CRUD的API都已經佈署成功了

佈署靜態網頁

大家記得我們為了串接Functions，還做了一個前端的靜態網頁嗎？
現在我們要把他佈署到Web App上囉！

1. 修改script.js的baseAddress成你剛才佈署的Azure Functions Endpoint

2. 準備完畢後PUSH到你的Github上（如果你沒自己的，也可以用我的，但是還沒有改endpoint喔!）

Github靜態網頁

3. 　＜點選此圖片連結

或是此連結：https://shell.azure.com/bash

4.在Bash上執行以下指令，建立一個存放程式碼的資料夾

mkdir ToDeploy

cd ToDeploy

5. Clone程式碼資料夾

請把網址改成您自己的Git Repo，或是單純可以測試佈署我的Repo

git clone https://github.com/hatsukiotowa/AzureStaticHtml

6. 進入該資料夾，設定佈署資料（修改佈署的Location及APP名稱)

cd AzureStaticHtml

az webapp up --location eastasia --name {你的app名稱}

7. 佈署完畢後，點選您佈署的網址，可以看到我們的靜態網站已經成功佈署囉！

8. Oh...遇到Errors!

如果你開F12檢查瀏覽器Error，會出現CORS相關的Error
原來是我們忘記在Azure Functions開啟對我們app_url的CORS設定

9. 我們需要前往Function App的Resource設定CORS

10. 在CORS設定中，加上靜態網頁的Endpoint

11. 成功發request到Functions的Endpoint

把原本在LOCAL運作的程式佈署上去是不是很有成就感呢～？
接下來我們要優化網站的存取效率，第一步我們先從網站檔案的CDN做起！

下一篇文章快速連結：為佈署好的Web App設置CDN，加速你的網站存取

參考

1.https://docs.microsoft.com/en-us/azure/app-service/app-service-web-get-started-html
2.https://app.pluralsight.com/player?course=azure-paas-building-global-app