部署一個 React 應用程式到 Azure 靜態網頁應用服务

在本文中，你將學習如何使用 Azure 入口網站部署 React 應用程式到 Azure Static Web Apps。

先決條件

Resource Notes
Azure 訂用帳戶 如果你沒有 Azure 訂閱，可以 建立一個免費試用帳號。
GitHub 帳號 如果你沒有GitHub帳號，可以免費建立一個。
Resource Notes
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. 在 「建立新專案 」視窗中，展開 進階 選單並選擇以下項目：

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

  4. 選取 ，創建。

  5. 選取 儲存庫 選單項目。

  6. 選取功能表中的檔案項目。

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

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

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

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

建立靜態 Web 應用程式

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

  1. 前往 Azure 入口網站。
  2. 選取 [建立資源]。
  3. 搜尋 靜態網頁應用程式。
  4. 選取 [靜態 Web 應用程式]。
  5. 選取 ，創建。

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

Azure 入口網站中 [基本] 區段的螢幕擷取畫面。

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

登入 GitHub 後，輸入儲存庫資訊。

Setting Value
組織 選取您的組織。
存儲庫 選取 my-first-web-static-app。
Branch 選取 [主要]。

Azure 入口網站中存放庫詳細資料的螢幕擷取畫面。

Note

如果您沒有看到任何存放庫：

  • 您可能需要在 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 存放庫。

Setting Value
Subscription 選取您的 Azure 訂用帳戶。
資源群組 選取 [建立新的] 連結，然後在文字方塊中輸入 static-web-apps-test。
名稱 在文字方塊中輸入 my-first-static-web-app。
計劃類型 選取 [免費]。
來源 選擇 DevOps。
組織 選取您的組織。
項目 選擇你的專案。
存儲庫 選取 my-first-web-static-app。
Branch 選取 [主要]。

Note

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

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

  1. 從「建構預設」下拉選單選擇 React。

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

  3. 將 [API 位置] 方塊保留為空白。

  4. 在 App artifact location 欄位輸入 build。

選擇 評論 + 創建。

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

Note

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

選取 ，創建。

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

選取 [移至資源。

「前往資源」按鈕的截圖。

檢視網站

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

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

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

Azure Static Web Apps [概觀] 視窗的螢幕擷取畫面。

  1. 選取概觀中的 GitHub Actions 執行，將帶您到對存放庫執行的 GitHub Actions。 在繼續之前，請確認部署動作已完成。

  2. GitHub Actions流程完成後，您可以選擇URL連結，在新分頁開啟網站。

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

清理資源

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

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

下一步

為你的應用程式新增 API

  • Last updated on