快速入門:使用 Azure Static Web Apps 建置您的第一個靜態網站

Azure Static Web Apps從程式碼存放庫建置應用程式來發佈網站。 在本快速入門中,您會使用 Visual Studio Code 擴充功能將應用程式部署至 Azure Static Web 應用程式。

如果您沒有 Azure 訂用帳戶,請建立免費試用帳戶

Prerequisites

建立存放庫

本文使用 GitHub 範本存放庫,讓您可以輕鬆地開始使用。 範本提供要部署至Azure Static Web Apps的入門應用程式。

  1. 瀏覽至下列位置以建立新的存放庫:
    1. https://github.com/staticwebdev/vanilla-basic/generate
  2. 將您的存放庫命名為 my-first-static-web-app

注意

Azure Static Web Apps 需要至少一個 HTML 檔案,才能建立 Web 應用程式。 您在這個步驟中建立的存放庫包含單一 index.html 檔案。

選取 [從範本建立存放庫]。

從範本建立存放庫

複製儲存機制

您的 GitHub 帳戶中建立了存放庫之後,請使用下列命令將專案複製到您的本機電腦。

git clone https://github.com/<YOUR_GITHUB_ACCOUNT_NAME>/my-first-static-web-app.git

請務必將 <YOUR_GITHUB_ACCOUNT_NAME> 取代為您的 GitHub 使用者名稱。

接下來,開啟Visual Studio Code,然後移至 [檔案 > 開啟資料夾] 以在編輯器中開啟複製的存放庫。

安裝Azure Static Web Apps擴充功能

如果您還沒有Visual Studio Code 延伸模組的Azure Static Web Apps擴充功能,您可以在 Visual Studio Code 中安裝它。

  1. 選取[檢視>延伸模組]。
  2. Marketplace 中的 [搜尋延伸模組] 中,輸入Azure Static Web Apps
  3. 針對Azure Static Web Apps選取[安裝]。
  4. 擴充功能會安裝到 Visual Studio Code。

建立靜態 Web 應用程式

  1. 在 Visual Studio Code 內,選取活動列中的 [Azure] 標誌,以開啟 [Azure 擴充功能] 視窗。

    Azure 標誌

    注意

    您必須在 Visual Studio Code 中登入 Azure 和 GitHub,才能繼續。 如果您尚未驗證,擴充功能會在建立程式期間提示您登入這兩項服務。

  2. 選取 F1 以開啟 Visual Studio Code 命令選擇區。

  3. 在命令方塊中輸入 [建立靜態 Web 應用程式 ]。

  4. 選取[Azure Static Web Apps:建立靜態 Web 應用程式...],然後選取Enter

    設定
    名稱 輸入 my-first-static-web-app
    區域 選取最靠近您的區域。
    建置預設 選取 [自訂]。
  5. 輸入符合您架構預設選擇的設定值。

    設定
    應用程式程式碼的位置 輸入 /src
    建置位置 輸入 /src
  6. 建立應用程式之後,Visual Studio Code 中就會顯示確認通知。

    已建立確認

    當部署正在進行時,Visual Studio Code 延伸模組會向您報告建置狀態。

    等候部署

    部署完成後,您即可直接瀏覽至網站。

  7. 若要在瀏覽器中檢視該網站,請以滑鼠右鍵按一下 Static Web Apps 延伸模組中的專案,然後選取 [瀏覽網站]。

    流覽網站

清除資源

如果您不打算繼續使用此應用程式,您可以透過擴充功能刪除 Azure Static Web Apps 執行個體。

在 [Visual Studio Code總管] 視窗中,返回 [資源] 區段,然後在[Static Web Apps] 底下,以滑鼠右鍵按一下my-first-static-web-app,然後選取 [刪除]。

後續步驟