共用方式為


快速入門:建立您的第一個靜態 Web 應用程式

Azure Static Web Apps 會透過從 Azure DevOps 或 GitHub 存放庫建置應用程式,將網站發佈至實際執行環境。 在本快速入門中,您會使用 Azure 入口網站將 Web 應用程式部署到 Azure 靜態 Web 應用程式。

必要條件

建立存放庫

本文使用 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 檔案。

選取 [建立存放庫]

[建立存放庫] 按鈕的螢幕擷取畫面。

建立存放庫

本文使用讓您輕鬆開始使用的 Azure DevOps 存放庫。 此存放庫具有用來以 Azure Static Web Apps 進行部署的入門應用程式。

  1. 登入 Azure DevOps。

  2. 選取 [新增存放庫]

  3. 在 [建立新專案] 視窗中,展開 [進階] 功能表,然後進行下列選取:

    設定
    Project 輸入 [my-first-web-static-app]
    可視性 選取 [私人]
    版本控制 選取 [Git]
    工作項目程序 選取最適合您開發方法的選項。
  4. 選取 建立

  5. 選取 [存放庫] 功能表項目。

  6. 選取 [檔案] 功能表項目。

  7. 在 [匯入存放庫] 卡片底下,選取 [匯入]

  8. 複製所選架構的存放庫 URL,並將其貼到 [複製 URL] 方塊中。

  9. 選取 [匯入] 並等候匯入處理程序完成。

建立靜態 Web 應用程式

現在已建立存放庫,您可以從 Azure 入口網站建立靜態 Web 應用程式。

  1. 前往 Azure 入口網站
  2. 選取 [建立資源]
  3. 搜尋 Static Web Apps
  4. 選取 [Static Web Apps]
  5. 選取 建立

在基本資料區段中,先設定您的新應用程式,並將其連結至 GitHub 存放庫。

設定
訂用帳戶 選取 Azure 訂閱。
資源群組 選取 [建立新的] 連結,然後在文字方塊中輸入 static-web-apps-test
名稱 在文字方塊中輸入 my-first-static-web-app
方案類型 選取 [免費]
來源 選取 [GitHub],並視需要登入 GitHub。

如有必要,請使用 GitHub 登入,並輸入下列存放庫資訊。

設定
組織 選取您的組織。
存放庫 選取 [my-first-web-static-app]
分支 選取 [主要]

存放庫詳細資料

注意

如果您沒有看到存放庫清單:

  • 您可能需要在 GitHub 中授權 Azure Static Web Apps。 瀏覽至您的 GitHub 設定檔,並移至 [設定] > [應用程式] > [授權的 OAuth 應用程式],選取 [Azure Static Web Apps],然後選取 [授與]

  • 您可能需要在 Azure DevOps 組織中授權 Azure Static Web Apps。 您必須是組織的擁有者,才能授與權限。 透過 OAuth 要求第三方應用程式存取。 如需詳細資訊,請參閱使用 OAuth 2.0授權 REST API 的存取

在 [基本資料] 區段中,先設定新應用程式,並將其連結至 Azure DevOps 存放庫。

設定
訂用帳戶 選取 Azure 訂閱。
資源群組 選取 [建立新的] 連結,然後在文字方塊中輸入 static-web-apps-test
名稱 在文字方塊中輸入 my-first-static-web-app
方案類型 選取 [免費]
Azure Functions 和暫存詳細資料 選取最靠近您的區域。
來源 選取 [Azure DevOps]
Organization 選取您的組織。
Project 選取您的專案
存放庫 選取 [my-first-web-static-app]
分支 選取 [主要]

注意

請確定使用的分支不受保護,而且您有足夠的權限,可以發出 push 命令。 若要確認,請瀏覽至 DevOps 存放庫,然後移至 [存放庫] -> [分支],然後選取 [更多選項]。 接著依序選取分支、[分支原則],以確保並未啟用必要的原則。

在組建詳細資料區段中,新增您慣用前端架構的特定設定詳細資料。

  1. 從 [組建預設] 下拉式清單中,選取 [自訂]
  2. 在 [應用程式位置] 方塊中輸入 ./src
  3. 將 [API 位置] 方塊保留為空白。
  4. 在 [輸出位置] 方塊中輸入 ./src

選取 [檢閱 + 建立]。

選取 建立

檢閱並建立您的 Azure Static Web Apps 執行個體。

注意

若要在建立應用程式之後變更這些值,您可以編輯工作流程檔案

選取 建立

建立您的 Azure Static Web Apps 執行個體。

選取 [前往資源] 。

繼續移至新建立的資源。

檢視網站

部署靜態應用程式有兩個層面。 第一個層面會建立構成您應用程式的基礎 Azure 資源。 第二個層面是會建置及發佈您的應用程式的工作流程。

在您可以移至新的靜態網站之前,部署建置必須先完成執行。

Static Web Apps [概觀] 視窗會顯示一系列的連結,協助您與 Web 應用程式互動。

Azure Static Web Apps 概觀視窗。

  1. 選取顯示選取此處以檢查您的 GitHub Actions 執行狀態的橫幅,會帶您前往針對您存放庫執行的 GitHub Actions。 一旦您確認部署作業已完成,您就可以透過產生的 URL 以移至您的網站。

  2. GitHub Actions 工作流程完成之後,您可以選取 URL 連結,在新索引標籤中開啟網站。

該工作流程完成之後,您可以選取 URL 連結,以在新索引標籤中開啟該網站。

清除資源

如果您不打算繼續使用此應用程式,您可以透過下列步驟刪除 Azure Static Web Apps 執行個體:

  1. 開啟 Azure 入口網站
  2. 從頂端的搜尋列搜尋 my-first-web-static-app
  3. 選取該應用程式名稱。
  4. 選取 [刪除]
  5. 選取 [是] 以確認刪除動作 (此動作可能需要幾分鐘的時間才能完成)。

下一步