上一個

下一個

練習 - 開始使用

已完成

Azure 靜態 Web 應用程式藉由從 GitHub 存放庫建置應用程式，來將網站發佈到實際執行環境。 在此練習中，您將使用 GitHub 存放庫中慣用的前端架構來建置 Web 應用程式。

建立存放庫

此課程模組可讓您輕鬆地使用 GitHub 範本存放庫來建立新的存放庫。 有一系列的範本可供使用，每個範本皆包含以一個不同前端架構建置的入門應用程式。

1. 瀏覽到範本存放庫的 [從範本建立] 頁面。 如果出現「404 找不到頁面」的錯誤，請登入 GitHub，然後再試一次。

2. 在 [擁有者] 下拉式清單中選擇其中一個 GitHub 帳戶。

3. 將存放庫命名為 my-static-web-app。

4. 選取 [從範本建立存放庫] 按鈕。

執行您的應用程式

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

1. 在電腦上開啟終端機。

2. 首先，將 GitHub 存放庫複製到電腦上的所要目錄中。

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

3. 移至原始程式碼的資料夾。

   cd my-static-web-app
   

4. 接下來，移至所慣用前端架構的資料夾，如下所示。

   cd angular-app
   

   cd react-app
   

   cd svelte-app
   

   cd vue-app
   

5. 現在，安裝應用程式相依性。

   npm install
   

   注意

   如果您收到「找不到路徑」的錯誤，請確定您已從 https://nodejs.org 中安裝 Node.js。您可能需要執行 [自訂安裝]，其中包含安裝 [新增至路徑] 選項。

   

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

   npm start
   

   npm start
   

   npm run dev
   

   npm run serve
   

瀏覽到您的應用程式

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

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

瀏覽至 http://localhost:4200。

瀏覽至 http://localhost:3000。

瀏覽至 http://localhost:5000。

瀏覽至 http://localhost:8080。

注意

在本課程模組的練習中，您將在不使用 API 的情況下部署應用程式。 如需下一個課程模組的相關資訊，請參閱在本課程模組結尾中的「後續步驟」一節，您將在其中部署 API 與您的應用程式。

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

下一步

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

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

繼續