上一個

下一個

練習 - 建立 Azure Functions 專案

已完成

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

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

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

取得 Function 應用程式

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

建立 API 分支

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

1. 在 Visual Studio Code 中，按 F1 開啟命令選擇區。

2. 輸入並選取 [Git: 簽出至...]。

3. 選取 [建立新的分支]。

4. 針對新的分支名稱輸入 api，然後按 Enter。

您剛剛建立了 api git 分支。

完成 Azure Functions API

若要完成此 API，首先將起始 API 程式碼移至名為 api 的資料夾中。 在建立 Static Web Apps 執行個體時，您已針對 api_location 輸入了此資料夾名稱。

1. 在 Visual Studio Code 中，按 F1 開啟命令選擇區。

2. 輸入並選取 [終端: 建立新終端 (在使用中的工作區中)]。

3. 確定您位於專案的根資料夾中。

4. 執行下列 git 命令，將 api-starter 資料夾重新命名為 api。

   git mv api-starter api
   

5. 按 F1 開啟命令選擇區。

6. 進入並選取 [Git: 全部認可]。

7. 輸入認可訊息 api，然後按 Enter。

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

資料夾和檔案	方法	路由
api/products-post	POST	products
api/products-put	PUT	products/:id
api/products-delete	DELETE	products/:id

建立 HTTP GET 函式

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

安裝適用於 Visual Studio Code 的 Azure Functions 延伸模組

您可以透過使用適用於 Visual Studio Code 的 Azure Functions 延伸模組來建立及管理 Azure Functions 應用程式。

1. 前往 Visual Studio Marketplace \(英文\)，然後安裝適用於 Visual Studio Code 的 Azure Functions 延伸模組。

2. 當延伸模組索引標籤在 Visual Studio Code 中載入時，選取 [安裝]。

3. 安裝完成之後，請選取 [重新載入]。

注意

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

建立函式

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

1. 在 Visual Studio Code 中，按 F1 開啟命令選擇區。

2. 輸入並選取 [Azure Functions: 建立函式]。

3. 當系統提示建立函式時，選取 [HTTP 觸發程序]。

4. 輸入 products-get 作為函式名稱。

5. 選取 [匿名] 作為驗證層級。

注意

此函數應用程式位於 [api] 資料夾中，這可將其與個別的 Web 應用程式專案區隔開來。 所有使用前端架構的 Web 應用程式都會呼叫相同的 API。 您可以決定應用程式的結構，但在此範例中，其有助於分別進行查看。

設定 HTTP 方法和路由端點

請注意，api/products-get 資料夾包含 function.json 檔案。 此檔案包含適用於您函式的設定。

依照慣例，路由端點會與包含此函式的資料夾同名。 由於此函式建立於 products-get 資料夾中，因此，產生的路由端點會預設為 products-get。 不過，您想讓該端點變成 products。

設定您的函式：

1. 開啟 api/products-get/function.json 檔案。

2. 請注意，方法同時允許 GET 和 POST。

3. 將方法陣列變更為只允許 GET 要求。

4. 在方法陣列後面加上 "route": "products" 項目。

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

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

更新函式邏輯

api/products-get 資料夾中的 index.js 檔案包含對路由提出 HTTP 要求時所執行的邏輯。

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

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

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

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

   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 的狀態碼來傳回它們。

在本機設定跨原始來源資源共用 (CORS)

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

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

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

2. 將下列內容新增到檔案：

   {
     "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。 這是因為您可以將祕密儲存於此檔案中，但您不想在 GitHub 中這麼做。 這就是為什麼當您從範本建立存放庫時，必須建立該檔案的原因。

執行 API

現在可以一起監看您的 Web 應用程式和 Azure Functions 專案運作。 一開始請依照下列步驟，在本機執行您的 Azure Functions 專案：

注意

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

1. 開啟 Git 終端機，然後移至 api 資料夾：

   cd api
   

2. 在本機執行 Azure Functions 應用程式：

   npm install
   

   npm start
   

執行 Web 應用程式

您的 API 正在執行。 現在您需要設定前端應用程式，以對您的 API 提出其 HTTP 要求。 前端應用程式會在某個連接埠上執行，而 API 會在不同連接埠 (7071) 上執行。 您可以設定每個前端架構，通過 Proxy 安全地將 HTTP 要求處理到連接埠。

設定 Proxy 連接埠

依照下列步驟，為您的前端應用程式設定 Proxy：

1. 開啟 angular-app/proxy.conf.json 檔案。

2. 找出 target: 'http://localhost:7071' 設定。

3. 請注意，目標的連接埠會指向 7071。

1. 開啟 react-app/package.json 檔案。

2. 找出 "proxy": "http://localhost:7071/", 設定。

3. 請注意，Proxy 的連接埠會指向 7071。

1. 開啟 svelte-app/rollup.config.js 檔案。

2. 找出 const api = 'http://localhost:7071/api'; 程式碼行。

3. 請注意，該 API 的連接埠會指向 7071。

1. 開啟 vue-app/vue.config.js 檔案。

2. 找出 target: 'http://localhost:7071', 設定。

3. 請注意，目標的連接埠會指向 7071。

執行您的前端 Web 應用程式

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

1. 開啟第二個 Git 終端機執行個體。

2. 接下來，輸入此命令以移至您慣用的前端架構的資料夾：

   cd angular-app
   

   cd react-app
   

   cd svelte-app
   

   cd vue-app
   

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

   npm start
   

   npm start
   

   npm run dev
   

   npm run serve
   

瀏覽到您的應用程式

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

1. 瀏覽至 http://localhost:4200。

1. 瀏覽至 http://localhost:3000。

1. 瀏覽至 http://localhost:5000。

1. 瀏覽至 http://localhost:8080。

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

下一步

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

繼續