在 Azure Static Web Apps 上部署 React 應用程式

在本文中，您將瞭解如何使用 Azure 入口網站 將 React 應用程式部署至 Azure Static Web Apps。

必要條件

資源	備註
Azure 訂用帳戶	如果您沒有 Azure 訂用帳戶，請建立免費試用帳戶。
GitHub 帳戶	如果您沒有 GitHub 帳戶，可以免費建立一個 (英文)。

資源	備註
Azure 訂用帳戶	如果您沒有 Azure 訂用帳戶，請建立免費試用帳戶。
Azure DevOps 帳戶	如果您沒有 GitHub 帳戶，您可以 建立一個帳戶。

建立存放庫

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

1. 瀏覽至下列位置以建立新的存放庫：

   https://github.com/staticwebdev/react-basic/generate

2. 將您的存放庫 命名為 my-first-static-web-app。

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

   

本文使用 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 ] 方塊中。

   https://github.com/staticwebdev/react-basic.git

9. 選取 [ 匯 入] 並等候匯入程式完成。

建立靜態 Web 應用程式

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

1. 前往 Azure 入口網站。
2. 選取 [建立資源]。
3. 搜尋 靜態 Web 應用程式。
4. 選取 [靜態 Web 應用程式]。
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 Apps]，選取 [Azure 靜態 Web 應用程式]，然後選取 [授與]。
• 您可能需要在 Azure DevOps 組織中授權 Azure Static Web Apps。 您必須是組織的擁有者，才能授與許可權。 透過 OAuth 要求第三方應用程式存取權。 如需詳細資訊，請參閱 使用 OAuth 2.0 授權 REST API 的存取權。

在 [ 基本] 區 段中，從設定新的應用程式並將其連結至 Azure DevOps 存放庫開始。

設定	值
訂用帳戶	選取 Azure 訂閱。
資源群組	選取 [ 建立新 連結]，然後在文本框中輸入 static-web-apps-test 。
名稱	在文本框中輸入 my-first-static-web-app 。
方案類型	選取 [免費]。
來源	選取 [DevOps]。
Organization	選取您的組織。
Project	選取您的專案
存放庫	選取 my-first-web-static-app。
分支	選取 [主要]。

注意

請確定您使用的分支不受保護，而且您有足夠的許可權可以發出 push 命令。 若要確認，請流覽至您的 DevOps 存放庫，然後移至 Repos ->Branch，然後選取 [更多選項]。 接下來，選取您的分支，然後 選取 [分支原則 ]，以確保未啟用必要的原則。

在 [建置詳細數據] 區段中，新增您慣用前端架構特有的組態詳細數據。

1. 從 [建置預設] 下拉式清單中選取 [React]。

2. 將預設值保留在 [應用程式位置] 方塊中。

3. 將 Api 位置方塊保留空白。

4. 在 [應用程式成品位置] 方塊中輸入組建。

選取 [檢閱 + 建立]。

注意

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

選取 建立。

選取 [前往資源] 。

檢視網站

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

您必須先完成執行部署組建，才能移至新的靜態月臺。

[靜態 Web 應用程式 概觀 ] 視窗會顯示一系列連結，可協助您與 Web 應用程式互動。

1. 在 [概觀] 中選取 [GitHub Action] 會帶您前往針對存放庫執行的 GitHub Actions。 在繼續之前，請先確認部署動作已完成。

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

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

清除資源

如果您不打算繼續使用此應用程式，您可以透過下列步驟刪除 Azure Static Web Apps 實例：

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

下一步

將 API 新增至您的應用程式