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

  • 發行項

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

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

必要條件

建立存放庫

本文使用 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 選取 [安裝]。

建立靜態 Web 應用程式

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

    Azure 標誌

    注意

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

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

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

  4. 選取 [Azure 靜態 Web 應用程式：建立靜態 Web 應用程式...]。

  5. 選取 Azure 訂閱。

  6. 輸入 my-first-static-web-app 以取得應用程式名稱。

  7. 選取最靠近您的區域。

  8. 輸入符合您架構選擇的設定值。

    設定 值
    架構 選取 [自訂]
    應用程式程式代碼的位置 輸入 /src
    建置位置 輸入 /src

  9. 建立應用程式之後，Visual Studio Code 中就會顯示確認通知。

    已建立確認

    如果 GitHub 提供此存放庫上標示 為 [啟用動作] 的按鈕，請選取按鈕以允許在存放庫上執行建置動作。

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

    等候部署

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

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

    瀏覽網站

清除資源

如果您不打算繼續使用此應用程式，您可以透過擴充功能刪除 Azure Static Web Apps 實例。

在 Visual Studio Code Azure 視窗中，返回 [資源] 區段，然後在 [靜態 Web 應用程式] 下，以滑鼠右鍵按兩下 my-first-static-web-app，然後選取 [刪除]。

下一步

新增 API