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

Azure Static Web Apps 會透過從 Azure DevOps 或 GitHub 存放庫建置應用程式，將網站發佈至生產環境。 在本快速入門中，您會使用 Azure 入口網站，將 Web 應用程式部署至 Azure Static Web 應用程式。

必要條件

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

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

建立存放庫

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

Angular

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

Blazor

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

React

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

Vue

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

選取 [建立存放庫]。

建立存放庫

本文使用 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/vanilla-basic.git

   Angular

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

   Blazor

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

   React

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

   Vue

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

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

建立靜態 Web 應用程式

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

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

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

設定	值
訂用帳戶	選取 Azure 訂閱。
資源群組	選取 [ 建立新 連結]，然後在文本框中輸入 static-web-apps-test 。
名稱	在文本框中輸入 my-first-static-web-app 。
方案類型	選取 [免費]。
Azure Functions 和暫存詳細資料	選取最接近您的區域。
來源	選取 [GitHub]。

選取 [使用 GitHub 登入]，並使用 GitHub 進行驗證。

使用 GitHub 登入之後，請輸入存放庫資訊。

設定	值
Organization	選取您的組織。
存放庫	選取 my-first-web-static-app。
分行	選取 [branch_name>]。<

注意

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

• 您可能需要在 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 。
方案類型	選取 [免費]。
Azure Functions 和暫存詳細資料	選取最接近您的區域。
來源	選取 [DevOps]。
Organization	選取您的組織。
Project	選取您的專案。
存放庫	選取 my-first-web-static-app。
分行	選取 [branch_name>]。<

注意

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

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

無架構

1. 從 [建置預設] 下拉式清單中選取 [自定義]。
2. 在 [應用程式位置] 方塊中輸入 ./src。
3. 將 Api 位置方塊保留空白。
4. 輸入 ./src應用程式成品位置 方塊。

Angular

1. 從 [建置預設] 下拉式清單中選取 Angular。
2. 將預設值保留在 [應用程式位置] 方塊中。
3. 將 Api 位置方塊保留空白。
4. 在 [應用程式成品位置] 方塊中輸入 dist/angular-basic。

Blazor

1. 從 [建置預設] 下拉式清單中選取 [Blazor]。
2. 在 [應用程式位置] 方塊中保留 [用戶端] 的預設值。
3. 將 Api 位置方塊保留空白。
4. 將 wwwroot 的預設值保留在 [應用程式成品位置] 方塊中。

React

1. 從 [建置預設] 下拉式清單中選取 [React]。
2. 將預設值保留在 [應用程式位置] 方塊中。
3. 將 Api 位置方塊保留空白。
4. 在 [應用程式成品位置] 方塊中輸入組建。

Vue

1. 從 [建置預設] 下拉式清單中選取 Vue.js。
2. 將預設值保留在 [應用程式位置] 方塊中。
3. 將 Api 位置方塊保留空白。
4. 將預設值保留在 [應用程式成品位置] 方塊中。

選取 [檢閱 + 建立]。

注意

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

選取建立。

選取 [前往資源] 。

檢視網站

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

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

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

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. 選取 [ 是 ] 以確認刪除動作（此動作可能需要幾分鐘的時間才能完成）。

下一步

新增 API