練習 - 開始使用

7 分鐘

在此練習中，您將建立 Azure Static Web Apps 執行個體，其中包括能自動建置並發佈應用程式的 GitHub 動作。

此課程模組使用 Azure 沙箱為您提供免費的暫時 Azure 訂用帳戶，讓您用來完成練習。繼續之前，請先確定您已在此頁面最上方啟動該沙箱。

提示

如果您遇到節點相依性的問題，請確定您已安裝節點版本管理員，而且可以切換至舊版。

建立存放庫

接下來，使用 GitHub 範本存放庫建立新的存放庫。有一系列的範本可供使用，每個範本皆包含以一個不同前端架構建置的入門應用程式。

移至範本存放庫的 [從範本建立] 頁面。
- 如果出現「404 找不到頁面」錯誤，請登入 GitHub，然後再試一次。
如果系統提示選擇擁有者，請選擇您的其中一個 GitHub 帳戶。
將存放庫命名為 my-static-web-app-authn。
選取 [從範本建立存放庫]。

在本機複製您的應用程式

您剛剛在 GitHub 帳戶中建立了名為 my-static-web-app-authn 的 GitHub 存放庫。接下來，您將複製該存放庫，並在本機電腦上執行程式碼。

在電腦上開啟終端機。

首先，將 GitHub 存放庫複製到您的電腦。

git clone https://github.com/<YOUR_GITHUB_USERNAME>/my-static-web-app-authn

移至原始程式碼的資料夾。
```
cd my-static-web-app-authn
```

在本機設定 CORS

當發佈到 Azure Static Web Apps 時，您不需要擔心跨原始來源資源共用 (CORS)。 Azure 靜態 Web 應用程式會自動設定您的應用程式，使其可在 Azure 上利用反向 Proxy 來與您的 API 進行通訊。但在本機執行時，您需要設定 CORS，以允許您的 Web 應用程式和 API 進行通訊。

現在，指示 Azure Functions 允許 Web 應用程式在電腦上對 API 提出 HTTP 要求。

建立名為 api/local.settings.json 的檔案。

將下列內容新增到檔案：

{
  "Host": {
    "CORS": "http://localhost:4200"
  }
}

{
  "Host": {
    "CORS": "http://localhost:3000"
  }
}

{
  "Host": {
    "CORS": "http://localhost:5000"
  }
}

{
  "Host": {
    "CORS": "http://localhost:8080"
  }
}

注意

local.settings.json 檔案會列於 .gitignore 檔案中，這導致無法將此檔案推送到 GitHub。這是因為您可以將祕密儲存於此檔案中，但您不想在 GitHub 中這麼做。這就是為什麼當您從範本建立存放庫時，必須建立該檔案的原因。

執行 API

api 資料夾包含 Azure Functions 專案，其中包含 Web 應用程式的 HTTP 端點。請先遵循下列步驟，在本機上執行 API：

注意

請務必安裝 Azure Functions Core Tools，如此才能在本機執行 Azure Functions。

在 Visual Studio Code 中，按 F1 開啟命令選擇區。
進入並選取 [終端機: 建立新的整合式終端機]。
移至 api 資料夾：
```
cd api
```
在本機執行 Azure Functions 應用程式：
```
func start
```

執行 Web 應用程式

接下來，移至所慣用前端架構的資料夾，如下所示：
```
cd angular-app
```
```
cd react-app
```
```
cd svelte-app
```
```
cd vue-app
```
現在，安裝應用程式相依性。
```
npm install
```

最後，執行前端用戶端應用程式。

npm start

npm start

npm run dev

npm run serve

瀏覽到您的應用程式

現在可以看到您的應用程式正在本機執行。每個前端應用程式都會在不同連接埠上執行。

選取連結以瀏覽至應用程式。

瀏覽至 http://localhost:4200。

瀏覽至 http://localhost:3000。

瀏覽至 http://localhost:5000。

瀏覽至 http://localhost:8080。

您的應用程式應該會顯示產品清單。

現在，在終端中按 Ctrl-C，以停止執行中的應用程式。

您已建置應用程式，而該應用程式目前正在您的瀏覽器中本機執行。

接下來，您要將應用程式發佈到 Azure Static Web Apps。

建立靜態 Web 應用程式

您已建立 GitHub 存放庫，現在可以使用適用於 Visual Studio Code 的 Azure Static Web Apps 延伸模組來建立 Static Web Apps 執行個體。

安裝適用於 Visual Studio Code 的 Azure Static Web Apps 延伸模組

前往 Visual Studio Marketplace，然後安裝適用於 Visual Studio Code 的 Azure Static Web Apps 延伸模組。
當延伸模組索引標籤在 Visual Studio Code 中載入時，選取 [安裝]。
安裝完成之後，請選取 [重新載入]。

在 Visual Studio Code 中，若要登入 Azure，請選取 [檢視]>[命令選擇區]，然後輸入 Azure: 登入。

重要

使用用來建立沙箱的相同帳戶登入 Azure。沙箱會提供指引訂用帳戶的存取。
遵循提示複製及貼上網頁瀏覽器提供的程式碼，以驗證您的 Visual Studio Code 工作階段。

選取您的訂用帳戶

開啟 Visual Studio Code，然後選取 [檔案] > [開啟]，在編輯器中開啟已複製到電腦的存放庫。
開啟命令選擇區 F1、輸入 Azure: Select Subscriptions，然後按 Enter 鍵，以確認您已篩選您的 Azure 訂用帳戶以包含指引訂用帳戶。
選取 [指引訂用帳戶]，然後按 Enter 鍵。

使用 Visual Studio Code 建立靜態 Web 應用程式

開啟 Visual Studio Code，然後選取 [檔案] > [開啟]，在編輯器中開啟已複製到電腦的存放庫。
在 Visual Studio Code 內，選取活動列中的 [Azure] 標誌，以開啟 [Azure 擴充功能] 視窗。

注意

需要登入 Azure 和 GitHub。如果您尚未從 Visual Studio Code 登入 Azure 和 GitHub，此擴充功能會在建立過程中提示您登入。
將滑鼠放在 Static Web Apps 標籤上，然後選取 + (加號)。
當命令選擇區在編輯器頂端開啟時，請選取 [指引訂閱]，然後按 Enter。
輸入 my-static-web-app-authn，然後按 Enter 鍵。
選取最接近您的區域，然後按 Enter 鍵。
選取相對應的架構選項，然後按 Enter 鍵。

選取 [angular-app] 作為應用程式程式碼的位置，然後按 Enter。
輸入 dist/angular-app 做為輸出位置，以在您的應用程式中為生產環境建置檔案，然後按 Enter 鍵。

選取 [react-app] 作為應用程式程式碼的位置，然後按 Enter。
輸入 build 作為建置檔案的輸出位置，以在應用程式中用於生產，然後按 Enter 鍵。

選取 [svelte-app] 作為應用程式程式碼的位置，然後按 Enter。
輸入 public 做為輸出位置，以在您的應用程式中為生產環境建置檔案，然後按 Enter 鍵。

選取 [vue-app] 作為應用程式程式碼的位置，然後按 Enter。
輸入 dist 作為建置檔案的輸出位置，以在應用程式中用於生產，然後按 Enter 鍵。

注意

存放庫與您過去使用的可能有點不同。其在四個不同資料夾中包含了四個不同的應用程式。每個資料夾都包含一個以不同 JavaScript 架構建立的應用程式。一般來說，您在存放庫的根目錄中會有一個應用程式，並為應用程式路徑位置指定 /。這是為什麼 Azure Static Web Apps 會讓您設定位置的絕佳範例：您可以完全控制應用程式的建置方式。

建立應用程式之後，Visual Studio Code 中會出現確認通知。

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

:::image type="content" source="../media/extension-waiting-for-deployment.png" alt-text="Screenshot showing the waiting for deployment button.":::

您可以展開 [Actions] \(動作\) 功能表，使用 GitHub Actions 來檢視部署的進度。

部署完成後，即可直接前往自己的網站。
若要在瀏覽器中檢視該網站，請以滑鼠右鍵按一下 Static Web Apps 延伸模組中的專案，然後選取 [瀏覽網站]。

恭喜！您已將應用程式部署至 Azure Static Web Apps！

注意

如果看到網頁指出應用程式尚未建置和部署，請不要擔心。請在一分鐘之後重新整理瀏覽器。 GitHub Action 會在建立 Azure Static Web Apps 時自動執行。如果看到啟動顯示頁面，表示應用程式仍在部署中。

從 GitHub 提取變更

從 GitHub 提取最新的變更，以關閉 Azure Static Web Apps 所建立的工作流程檔案：

按 F1 開啟命令選擇區。
進入並選取 [Git: 提取]，然後按 Enter 鍵。

下一步

接下來，您將了解如何將使用者驗證整合至應用程式。