練習 - 建立 Azure 靜態 Web 應用程式

  • 5 分鐘

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

建立靜態 Web 應用程式

既然您已建立 GitHub 存放庫，您可以從 Azure 入口網站建立靜態 Web 應用程式執行個體。

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

  1. 前往 Visual Studio Marketplace，然後安裝適用於 Visual Studio Code 的 Azure Static Web Apps 延伸模組。

  2. 當延伸模組索引標籤在 Visual Studio Code 中載入時，請選取 [安裝] 按鈕。

  3. 安裝完成後若有提示，請選取 [重新啟動以更新]。

在 Visual Studio Code 中登入 Azure

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

  2. 遵循提示複製及貼上網頁瀏覽器提供的程式碼，以驗證您的 Visual Studio Code 工作階段。

選取您的訂用帳戶

  1. 開啟 Visual Studio Code，然後選取 [檔案] > [開啟]，並在編輯器中開啟已複製到電腦的存放庫。

  2. 開啟命令選項板並輸入 Azure: Select Subscriptions，然後按 Enter，確認您已登入慣用的 Azure 訂用帳戶。

  3. 選取您的訂閱 （旁邊應該會出現核取記號），然後按一下 [確定]。

建立靜態 Web 應用程式

  1. 開啟 Visual Studio Code，然後選取 [檔案] > [開啟]，在編輯器中開啟已複製到電腦的存放庫。

  2. 在 Visual Studio Code 內，選取活動列中的 [Azure] 標誌，以開啟 [Azure 擴充功能] 視窗。

    VS Code 中 Azure 標誌的螢幕擷取畫面。

    備註

    需要登入 Azure 和 GitHub。 如果您尚未從 Visual Studio Code 登入 Azure 和 GitHub，此擴充功能會在建立過程中提示您登入。

  3. 將滑鼠放在 Static Web Apps 標題上方、按一下滑鼠右鍵，然後選取 [建立靜態 Web 應用程式]。

    顯示要去何處建立 Web 應用程式的螢幕擷取畫面。

  4. 輸入 my-first-static-web-app，然後按 Enter。

    顯示如何建立靜態 Web 應用程式的螢幕擷取畫面。

  5. 選取您的 [位置]，然後按 Enter。

    顯示如何選取訂用帳戶的螢幕擷取畫面。

  1. 選取 [角度] 選項，然後按 Enter 鍵。

    顯示已選取 Angular 選項的螢幕擷取畫面。

  2. 輸入 [angular-app] 作為應用程式程式碼的位置，然後按 Enter。

    螢幕擷取畫面顯示輸入為 Angular 應用程式的程式碼位置。

  3. 輸入 dist/angular-app 作為建置輸出位置 (其為在應用程式中建置用於實際執行之檔案的位置)，然後按 Enter。

    顯示如何為 Angular 輸入建置輸出位置的螢幕擷取畫面。

  1. 選取 React 選項，然後按 Enter。

    顯示已選取 React 選項的螢幕擷取畫面。

  2. 輸入 [react-app] 作為應用程式程式碼的位置，然後按 Enter。

    螢幕擷取畫面顯示輸入為 React 應用程式的程式碼位置。

  3. 輸入 build 作為建置輸出位置 (其為在應用程式中建置用於實際執行之檔案的位置)，然後按 Enter。

    顯示如何為 React 輸入建置輸出位置的螢幕擷取畫面。

  1. 選擇 Svelte 選項，然後按 Enter。

    顯示已選取 Svelte 選項的螢幕擷取畫面。

  2. 輸入 [svelte-app] 作為應用程式程式碼的位置，然後按 Enter。

    螢幕擷取畫面顯示輸入為 Svelte 應用程式的程式碼位置。

  3. 輸入 public 作為組建輸出位置，以在您的應用程式中為生產環境建置檔案，然後按 Enter 鍵。

    顯示如何為 Svelte 輸入建置輸出位置的螢幕擷取畫面。

  1. 選擇 Vue 選項，然後按 Enter鍵。

    顯示已選取 Vue 選項的螢幕擷取畫面。

  2. 輸入 [vue-app] 作為應用程式程式碼的位置，然後按 Enter。

    螢幕擷取畫面顯示輸入為 Vue 應用程式的程式碼位置。

  3. 輸入 dist 作為建置輸出位置 (其為在應用程式中建置用於實際執行之檔案的位置)，然後按 Enter。

    顯示如何為 Vue 輸入建置輸出位置的螢幕擷取畫面

備註

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

  1. 建立應用程式之後，Visual Studio Code 中就會顯示確認通知。

    確認程式碼的螢幕擷取畫面，該程式碼要求使用者在 GitHub 或 [檢視/編輯設定] 中開啟動作。

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

    顯示如何透過 GitHub Actions 檢查進度的螢幕擷取畫面。

    部署完成後，您即可直接瀏覽至網站。

  3. 若要在瀏覽器中檢視網站，請以滑鼠右鍵按一下 Static Web Apps 延伸模組中的專案，然後選取 [瀏覽網站]。

    顯示如何瀏覽至靜態 Web 應用程式網站的螢幕擷取畫面。

恭喜！ 您已將第一個應用程式部署到 Azure 靜態 Web 應用程式！

備註

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