快速入門：使用 Visual Studio Code 在 Azure 中建立 JavaScript 函式

發行項
07/30/2024

使用 Visual Studio Code 建立可回應 HTTP 要求的 JavaScript 函數。在本機測試程式碼，然後部署程式碼至 Azure Functions 的無伺服器環境。

重要

本文的內容會根據您在頁面頂端選取器中選擇的 Node.js 程式設計模型而有所不同。 v4 模型已正式推出，旨在為 JavaScript 和 TypeScript 開發人員提供更靈活且更直覺的體驗。如需深入了解 v3 與 v4 之間的差異，請參閱移轉指南。

完成本快速入門後，您的 Azure 帳戶中會產生幾美分或更少的費用。

本文還有 CLI 型版本。

設定您的環境

開始使用之前，請先確定您具備下列必要項目︰

具有有效訂用帳戶的 Azure 帳戶。免費建立帳戶。
Node.js 14.x 或更高版本。請使用 node --version 命令來檢查您的版本。
其中一個支援平台上的 Visual Studio Code。
適用於 Visual Studio Code 的 Azure Functions 延伸模組。此延伸模組會在您第一次在本機執行函式時，為您安裝 Azure Functions Core Tools。

具有有效訂用帳戶的 Azure 帳戶。免費建立帳戶。
Node.js 18.x 或更高版本。請使用 node --version 命令來檢查您的版本。
其中一個支援平台上的 Visual Studio Code。
適用於 Visual Studio Code 的 Azure Functions 延伸模組 v1.10.4 或更高版本。此延伸模組會在您第一次在本機執行函式時，為您安裝 Azure Functions Core Tools。 Node.js v4 需要 4.0.5382 版或更新版本的 Core Tools。

安裝或更新 Core Tools

適用於 Visual Studio Code 的 Azure Functions 延伸模組會整合 Azure Functions Core Tools，讓您可以使用 Azure Functions 執行階段，在 Visual Studio Code 本機執行和偵錯函式。開始之前，最好在本機安裝 Core Tools，或更新現有的安裝以使用最新版本。

在 Visual Studio Code 中，選取 F1 以開啟命令選擇區，然後搜尋並執行命令 Azure Functions：安裝或更新 Core Tools。

此命令會嘗試啟動最新版 Core Tools 的套件型安裝，或更新現有的套件型安裝。如果您沒有在本機電腦上安裝 npm 或 Homebrew，您必須改為手動安裝或更新 Core Tools。

建立本機專案

在本節中，您會使用 Visual Studio Code 在 JavaScript 中建立本機 Azure Functions 專案。稍後在本文中，您會將函式程式碼發佈至 Azure。

在 Visual Studio Code 中，按 F1 以開啟命令選擇區，然後搜尋並執行命令 Azure Functions: Create New Project...。
選擇您專案工作區的目錄位置，然後選擇 [選取]。您應建立新資料夾，或為專案工作區選擇空白資料夾。請勿選擇已屬於工作區一部分的專案資料夾。

提示中會提供下列資訊：

提示	選取項目
為您的函式專案選取語言	選擇 `JavaScript`。
選取 JavaScript 程式設計模型	選擇 `Model V3`
為專案的第一個函式選取範本	選擇 `HTTP trigger`。
提供函式名稱	輸入 `HttpExample`。
授權等級	選擇 `Anonymous`，讓任何人都能呼叫您的函式端點。如需詳細資訊，請參閱授權層級。
選取您希望專案的開啟方式	選擇 `Open in current window`。

使用此資訊，Visual Studio Code 會產生具有 HTTP 觸發程序的 Azure Functions 專案。您可以在 Explorer 中檢視本機專案檔。若要深入了解所建立的檔案，請參閱產生的專案檔。

提示中會提供下列資訊：

提示	選取項目
為您的函式專案選取語言	選擇 `JavaScript`。
選取 JavaScript 程式設計模型	選擇 `Model V4`
為專案的第一個函式選取範本	選擇 `HTTP trigger`。
提供函式名稱	輸入 `HttpExample`。
選取您開啟專案的方式	選擇 `Open in current window`

使用此資訊，Visual Studio Code 會產生具有 HTTP 觸發程序的 Azure Functions 專案。您可以在 Explorer 中檢視本機專案檔。若要深入了解建立的檔案，請參閱 Azure Functions JavaScript 開發人員指南。

在本機執行函式

Visual Studio Code 可與 Azure Functions Core 工具整合，讓您能夠先在本機開發電腦上執行此專案，再發佈至 Azure。

若要在本機啟動函式，請按 F5 或左側 [活動] 列中的 [執行並偵錯] 圖示。 [終端] 面板會顯示核心工具的輸出。您的應用程式會在 [終端] 面板中啟動。您可以查看在本機所執行 HTTP 觸發函式的 URL 端點。

如果在 Windows 上執行時遇到問題，請確定 Visual Studio Code 的預設終端機未設定為 WSL Bash。
當核心工具仍在 [終端] 中執行時，請選擇活動列中的 Azure 圖示。在 [工作區] 區域中，展開 [本機專案] > [函數] 。以滑鼠右鍵按一下 (Windows) 或按住 Ctrl - 並點擊 (macOS) 新函式，然後選擇 [立即執行函式...]。
在 [輸入要求本文] 中，會看到 { "name": "Azure" } 的要求訊息本文值。請按 Enter 鍵，將此要求訊息傳送至您的函式。
當函式在本機執行並傳回回應時，會在 Visual Studio Code 中引發通知。函式的執行資訊會顯示於 [終端機] 面板中。
專注於 [終端] 面板時，請按下 [Ctrl + C] 以停止核心工具並中斷與偵錯工具的連線。

確認函式可在本機電腦上正常執行之後，即可使用 Visual Studio Code 將專案直接發佈至 Azure。

您必須先登入 Azure 後，才能建立 Azure 資源或發佈應用程式。

如果您尚未登入，請在 [活動列] 中選取 Azure 圖示。然後在 [資源] 下，選取 [登入 Azure]。

如果您已登入，而且可以看到現有的訂閱，請移至下一節。如果您尚未擁有 Azure 帳戶，請選取 [建立 Azure 帳戶]。學生可以選取 [建立 Microsoft Azure 學生版帳戶]。
在瀏覽器中出現提示時，選取您的 [Azure 帳戶]，並使用您的 Azure 帳戶認證登入。如果您建立新的帳戶，可以在帳戶建立之後登入。
成功登入之後，您可以關閉新的瀏覽器視窗。屬於您的 Azure 帳戶的訂用帳戶會顯示在側邊欄中。

在 Azure 中建立函數應用程式

在此區段中，您會在 Azure 訂用帳戶中建立函式應用程式和相關的資源。

在 Visual Studio Code 中，選取 F1 以開啟命令選擇區。在提示 (>) 中，輸入然後選取 [Azure Functions：在 Azure 中建立函數應用程式]。

依照提示提供下列資訊：

提示	動作
選取訂用帳戶	選取要使用的 Azure 訂用帳戶。當您只有一個訂用帳戶顯示在 [資源] 底下時，就不會看到此提示。
輸入函數應用程式的全域唯一名稱	輸入在 URL 路徑中有效的名稱。您輸入的名稱會進行驗證，以確定該名稱在 Azure Functions 中是唯一的。
選取執行階段堆疊	選取您目前在本機執行的語言版本。
選取新資源的位置	選取 Azure 區域。若要獲得較佳的效能，請選取您附近的 [區域]。

在 [Azure: 活動記錄] 面板中，Azure 延伸模組會顯示在 Azure 中建立的個別資源狀態。

顯示 Azure 資源建立記錄的螢幕擷取畫面。

建立函式應用程式時，會在您的 Azure 訂用帳戶中建立下列相關資源。資源會根據您為函式應用程式輸入的名稱來命名。
- 資源群組，這是相關資源的邏輯容器。
- 標準 Azure 儲存體帳戶，其可維護專案的狀態和其他資訊。
- 函數應用程式，其提供執行函式程式碼的環境。函數應用程式可讓您將函式以邏輯單位分組，方便您在相同的主控方案中管理、部署及共用資源。
- Azure App Service 方案，其定義函數應用程式的基礎主機。
- 連線至函數應用程式的 Application Insights 執行個體，可追蹤函式在應用程式中的使用情況。
建立函式應用程式並套用部署套件之後，即會顯示通知。

提示

根據預設，會根據您為函式應用程式輸入的名稱來建立函式應用程式所需的 Azure 資源。根據預設，資源會隨著相同的新資源群組中的函式應用程式建立。如果您想要自訂相關聯資源的名稱或重複使用現有的資源，請使用進階建立選項來發佈專案。

將專案部署至 Azure

重要

部署至現有的函數應用程式一律會覆寫該應用程式在 Azure 中的內容。

在命令選擇區中，輸入而後選取 Azure Functions：部署至函式應用程式。
選取您剛才建立的函數應用程式。當系統提示您覆寫先前的部署時，請選取 [部署]，將函式程式碼部署至新的函數應用程式資源。
部署完成時，選取 [檢視輸出] 即可檢視建立和部署結果，包括您所建立的 Azure 資源。如果您錯過通知，請選取右下角的鈴鐺圖示，以再次查看。

在 Azure 中執行函數

返回提要欄位中的 [資源] 區域，依序展開您的訂閱和新函數應用程式，以及 [函式]。以滑鼠右鍵按一下 (Windows) 或 Ctrl - 點擊 (macOS) HttpExample 函式，並選擇 [立即執行函式...]。
在 [輸入要求本文] 中，會看到 { "name": "Azure" } 的要求訊息本文值。請按 Enter 鍵，將此要求訊息傳送至您的函式。
當函式在 Azure 執行並傳回回應時，會在 Visual Studio Code 中引發通知。

變更程式碼並重新部署至 Azure

在 [總管] 檢視中 Visual Studio Code中，選取 ./HttpExample/index.js 檔案。

以下列程式碼取代檔案，以建構 JSON 物件並將其傳回。

module.exports = async function (context, req) {

    try {
        context.log('JavaScript HTTP trigger function processed a request.');

        // Read incoming data
        const name = (req.query.name || (req.body && req.body.name));
        const sport = (req.query.sport || (req.body && req.body.sport));

        // fail if incoming data is required
        if (!name || !sport) {

            context.res = {
                status: 400
            };
            return;
        }

        // Add or change code here
        const message = `${name} likes ${sport}`;

        // Construct response
        const responseJSON = {
            "name": name,
            "sport": sport,
            "message": message,
            "success": true
        }

        context.res = {
            // status: 200, /* Defaults to 200 */
            body: responseJSON,
            contentType: 'application/json'
        };
    } catch(err) {
        context.res = {
            status: 500
        };
    }
}

在本地重新執行函數應用程式。
在提示輸入要求本文中，將要求訊息本文變更為 { "name": "Tom","sport":"basketball" }。請按 Enter 鍵，將此要求訊息傳送至您的函式。

在通知中檢視回應：

{
  "name": "Tom",
  "sport": "basketball",
  "message": "Tom likes basketball",
  "success": true
}

將函數重新部署到 Azure。

疑難排解

使用下表來解決使用此快速入門時遇到的最常見問題。

問題	解決方案
無法建立本地函數專案嗎？	請確保您已安裝 Azure Functions 延伸模組。
無法在本地執行函數嗎？	請確定您已安裝最新版本的 Azure Functions Core Tools。如果在 Windows 上執行時，請確定 Visual Studio Code 的預設終端殼層未設定為 WSL Bash。
無法將函數部署至 Azure 嗎？	檢閱輸出以取得錯誤資訊。右下角的鈴鐺圖示是檢視輸出的另一種方式。是否已發佈至現有的函式應用程式？該動作會覆寫 Azure 中該應用程式的內容。
無法執行雲端式函數應用程式嗎？	請記得使用查詢字串在參數中傳送。

清除資源

當您繼續進行下一個步驟並將 Azure 儲存體佇列繫結新增至您的函式時，您必須保留所有資源，以您所完成的工作為基礎。

否則，您可以使用下列步驟來刪除函式應用程式及其相關資源，以避免產生任何額外的成本。

在 Visual Studio Code 中，選取 Azure 圖示以開啟 Azure 總管。
在 [資源群組] 區段中，尋找您的資源群組。
以滑鼠右鍵按一下資源群組，然後選取 [刪除]。

若要深入了解 Functions 成本，請參閱估計使用量方案成本。

下一步

您已透過 Visual Studio Code，使用簡單的 HTTP 觸發函式建立函數應用程式。在下一篇文章中，您會連線到 Azure Cosmos DB 或 Azure 儲存體來擴充該函數。若要深入瞭解如何連線到其他 Azure 服務，請參閱將繫結新增至 Azure Functions 中的現有函數。如果您想要深入瞭解安全性，請參閱保護 Azure Functions。

連線至 Azure Cosmos DB

連線至 Azure 佇列儲存體

您已透過 Visual Studio Code，使用簡單的 HTTP 觸發函式建立函數應用程式。

深入了解 JavaScript 函式

共用方式為