練習 - 建立 Azure Functions 專案

6 分鐘

您的購物清單 Web 應用程式需要一個 API。在此練習中，您會使用 Azure Functions 專案來建置並執行您的 API。從那裡，您可以透過 Visual Studio Code 的 Azure Functions 擴充功能，新增新的函式來擴充 API。

在本練習中，您會完成下列步驟：

當準備變更 Web 應用程式時，請建立一個分支。
探索 Azure 函式專案。
建立 HTTP GET 函式。
使用取得產品的邏輯來取代函式起始程式碼。
設定 Web 應用程式通過 Proxy 處理 API 的 HTTP 要求。
執行 API 和 Web 應用程式。

取得 Function 應用程式

現在，新增 API 並將其連線到前端應用程式。資料夾 api-starter 包含不完整的 Azure Functions 專案。那麼，讓我們現在就來完成它。

建立 API 分支

對應用程式進行變更之前，最好先為變更建立新的分支。您即將完成應用程式的 API，因此現在是建立分支的好時機。

在 Visual Studio Code 中，按 F1 開啟命令選擇區。
輸入並選取 [Git:簽出至...]。
選取 [建立新分支]。
輸入新分支名稱的 API，然後按 Enter。

您剛建立 API git 分支。

完成 Azure Functions API

若要完成 API，請先將入門 API 程式代碼移至名為 api的資料夾。當您建立靜態 Web Apps 實例時，輸入 api_location 的這個資料夾名稱。

在 Visual Studio Code 中，按 F1 開啟命令選擇區。
輸入並選取 [終端機：建立新的終端機] （在 [使用中工作區] 中）。
請確定您位於專案的根資料夾中。
執行下列 git 命令，將 api-starter 資料夾重新命名為 api。
```
git mv api-starter api
```
按 F1 開啟命令選擇區。
輸入並選取 [Git:全部認可]。
輸入認可訊息 API ，然後按 Enter。

現在，您會在 Visual Studio Code 總管中看到 API 資料夾。 api 資料夾包含您的 Azure Functions 專案，以及三個函式。

資料夾和檔案	方法	路線
api/products-post	郵件	`products`
api/products-put	PUT	`products/:id`
api/products-delete	刪除	`products/:id`

建立 HTTP GET 函式

您的 API 具有可用來操作購物清單產品的路由，但缺少取得產品的路由。現在讓我們來新增它。

安裝適用於 Visual Studio Code 的 Azure Functions 擴充功能

您可以使用適用於 Visual Studio Code 的 Azure Functions 擴充功能來建立和管理 Azure Functions 應用程式。

移至 Visual Studio Marketplace，然後安裝適用於 Visual Studio Code 的 Azure Functions 擴充功能。
當延伸模組索引標籤在 Visual Studio Code 中載入時，選取 [安裝]。
安裝完成之後，請選取 [重新載入]。

備註

請務必安裝 Azure Functions Core Tools，這可讓您在本機執行 Azure Functions。

建立函式

現在，您可以使用可取得您的產品的函式來擴充您的 Azure Function 應用程式。

在 Visual Studio Code 中，按 F1 開啟命令選擇區。
輸入並選取 [Azure Functions：建立函式]。
當系統提示您建立函式時，請選取 [HTTP 觸發程式]。
輸入 products-get 作為函式的名稱。
選取 [匿名 ] 作為驗證層級。

備註

Functions 應用程式位於 api 資料夾中，它會將其與個別 Web 應用程式專案分開。所有使用前端架構的 Web 應用程式都會呼叫相同的 API。您可以決定應用程式的結構，但在此範例中，分開查看會比較清楚。

設定 HTTP 方法和路由端點

請注意 ，資料夾 api/products-get 包含 檔案function.json。此檔案包含您函式的配置。

依照慣例，路由端點會與包含此函式的資料夾同名。由於函式是在 products-get 資料夾中建立，因此路由端點預設會以 products-get 的形式產生。不過，您希望將端點設為產品。

設定您的函式：

開啟 檔案 api/products-get/function.json。
請注意，方法允許 GET 和 POST。
將方法陣列變更為只允許 GET 要求。
在方法陣列之後新增一個"route": "products"條目。

現在，您的函式會在對 GET 的 HTTP 要求上觸發。您的 function.json 看起來應該像下列程式代碼：

{
  "bindings": [
    {
      "authLevel": "anonymous",
      "type": "httpTrigger",
      "direction": "in",
      "name": "req",
      "methods": ["get"],
      "route": "products"
    },
    {
      "type": "http",
      "direction": "out",
      "name": "res"
    }
  ]
}

更新函式邏輯

資料夾中api/products-get 包含當您對路由提出 HTTP 要求時執行的邏輯。

您需要更新邏輯才能取得您的產品。 JavaScript 模組 /shared/product-data.js中有數據存取邏輯。模組 product-data 會公開函式 getProducts 以取得用於購物清單的產品。

現在，變更函式端點以傳回產品：

開啟 檔案 api/products-get/index.js。

以下列程式碼取代其內容：

const data = require('../shared/product-data');

module.exports = async function (context, req) {
  try {
    const products = data.getProducts();
    context.res.status(200).json(products);
  } catch (error) {
    context.res.status(500).send(error);
  }
};

您的函式會取得產品，並在成功時傳回狀態代碼為 200 的產品。

當您發佈至 Azure Static Web Apps 時，不需要擔心 CORS。 Azure 靜態 Web 應用程式會自動設定您的應用程式，使其可在 Azure 上利用反向 Proxy 來與您的 API 進行通訊。但在本機執行時，您需要設定 CORS，以允許您的 Web 應用程式和 API 進行通訊。

現在，請告訴 Azure Functions 允許 Web 應用程式在電腦上對 API 提出 HTTP 要求。

建立名為 api/local.settings.json 的檔案。

將下列內容新增到檔案：

{
  "Host": {
    "CORS": "http://localhost:4200"
  }
}

{
  "Host": {
    "CORS": "http://localhost:3000"
  }
}

{
  "Host": {
    "CORS": "http://localhost:5000"
  }
}

{
  "Host": {
    "CORS": "http://localhost:8080"
  }
}

備註

local.settings.json 檔案會列於 .gitignore 檔案中，這導致無法將此檔案推送到 GitHub。檔案會列在.gitignore中，因為您可能將不想上傳到 GitHub 的機密資訊儲存在其中。此清單是您從範本建立存放庫時必須建立檔案的原因。

執行 API

現在是時候監看 Web 應用程式和 Azure Functions 專案一起運作了。請遵循下列步驟，從在本機執行 Azure Functions 項目開始：

備註

請務必安裝 Azure Functions Core Tools，這可讓您在本機執行 Azure Functions。

開啟 Git 終端機並移至 api 資料夾：
```
cd api
```
在本機執行 Azure Functions 應用程式：
```
npm install
```
```
npm start
```

執行 Web 應用程式

您的 API 正在執行。現在，您必須設定前端應用程式，以對其 API 提出 HTTP 要求。前端應用程式會在一個埠上執行，API 在不同的埠上執行（7071）。每個前端框架都可以配置，以安全地將 HTTP 請求代理到埠。

設定代理伺服器端口

使用下列步驟設定前端應用程式的 Proxy：

開啟 angular-app/proxy.conf.json檔案。
找出 target: 'http://localhost:7071' 設定。
請注意，目標的端口指向 7071。

開啟 react-app/package.json檔案。
找出 "proxy": "http://localhost:7071/", 設定。
請注意，Proxy 的埠指向 7071。

開啟 svelte-app/rollup.config.js檔案。
找出 const api = 'http://localhost:7071/api'; 程式碼行。
請注意，API 的埠指向 7071。

開啟 檔案 vue-app/vue.config.js。
找出 target: 'http://localhost:7071', 設定。
請注意，目標的端口指向 7071。

執行您的前端 Web 應用程式

您的 API 已在埠 7071 上執行。現在，當您執行 Web 應用程式時，它會向 API 提出其 HTTP 要求。依照下列步驟執行 Web 應用程式：

開啟第二個 Git 終端機實例。
接下來，輸入此命令以移至您慣用前端架構的資料夾：
```
cd angular-app
```
```
cd react-app
```
```
cd svelte-app
```
```
cd vue-app
```

執行前端用戶端應用程式：

npm start

npm start

npm run dev

npm run serve

瀏覽到您的應用程式

現在可看到應用程式會在本機上針對 Azure Functions API 執行。

瀏覽至 http://localhost:4200。

瀏覽至 http://localhost:3000。

瀏覽至 http://localhost:5000。

瀏覽至 http://localhost:8080。

您建置的應用程式現正在本機執行，並對 API 提出 HTTP GET 要求。現在，在終端機中按 Ctrl-C 以停止執行中的應用程式和 API。

後續步驟

您的應用程式可在本機運作，而下一個步驟是使用 API 發佈應用程式。

意見反應

此頁面對您有幫助嗎？