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

發行項
04/04/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 的套件型安裝。

建立本機專案

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

選擇 [活動] 列中的 Azure 圖示。然後，在 [工作區] (本地) 區域中，選取 + 按鈕，然後選擇下拉式清單中的 [建立函式]。收到提示時，選擇 [建立新專案]。
選擇您專案工作區的目錄位置，然後選擇 [選取]。您應建立新資料夾，或為專案工作區選擇空白資料夾。請勿選擇已屬於工作區一部分的專案資料夾。

提示中會提供下列資訊：

提示	選取項目
為您的函式專案選取語言	選擇 `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 帳戶...]。學生可以選擇 [建立 Azure 學生版帳戶...]。
當在瀏覽器中收到提示時，請使用您的 Azure 帳戶認證選擇 Azure 帳戶並登入。如果您建立新的帳戶，可以在帳戶建立之後登入。
成功登入之後，即可關閉新的瀏覽器視窗。屬於您 Azure 帳戶的訂用帳戶會顯示在提要欄位中。

在 Azure 中建立函式應用程式

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

選擇 [活動] 列中的 Azure 圖示。然後在 [資源] 區域中，選取 + 圖示並選擇 [在 Azure 中建立函數應用程式] 選項。

提示中會提供下列資訊：

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

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

建立 Azure 資源的記錄

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

提示

根據預設，系統會依照您提供的函數應用程式名稱建立函數應用程式所需的 Azure 資源，並且預設會建立在與函數應用程式相同的新資源群組中。如果您想自訂這些資源的名稱或重複使用現有的資源，必須改為使用進階建立選項發佈專案。

將專案部署至 Azure

重要

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

在 Azure 活動的 [資源] 區域中，找出您剛才建立的函數應用程式資源，以滑鼠右鍵按一下該資源，然後選取 [部署至函數應用程式...]。
當系統提示您覆寫先前的部署時，請選取 [部署]，將函式程式碼部署至新的函數應用程式資源。
部署完成時，選取 [檢視輸出] 即可檢視建立和部署結果，包括您所建立的 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 函式

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

設定您的環境

安裝或更新 Core Tools

建立本機專案

在本機執行函式

登入 Azure

在 Azure 中建立函式應用程式

將專案部署至 Azure

在 Azure 中執行函數

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

疑難排解

清除資源

下一步

其他資源