分享方式:


教學課程:將 VuePress 網站發佈至 Azure 靜態 Web Apps

本文示範如何建立和部署VuePress Web 應用程式以Azure Static Web Apps。 最終會產生新的 Azure 靜態 Web Apps 應用程式 (具有相關聯的 GitHub 動作),讓您能夠控制建置和發佈應用程式的方式。

在本教學課程中,您會了解如何:

  • 建立 VuePress 應用程式
  • 設定 Azure 靜態 Web Apps
  • 將 VuePress 應用程式部署至 Azure

必要條件

建立 VuePress 應用程式

從命令列介面 (CLI) 建立 VuePress 應用程式:

  1. 為 VuePress 應用程式建立新的資料夾。

    mkdir static-site
    
  2. README.md 檔案新增至此資料夾。

    echo '# Hello From VuePress' > README.md
    
  3. 初始化 package.json 檔案。

    npm init -y
    
  4. 新增 VuePress 作為 devDependency

    npm install --save-dev vuepress
    
  5. 在文字編輯器中開啟 package.json 檔案,然後將建置命令新增至 scripts 區段。

    ...
    "scripts": {
        "build": "vuepress build"
    }
    ...
    
  6. 建立 .gitignore 檔案以排除 node_modules 資料夾。

    echo 'node_modules' > .gitignore
    
  7. 初始化 Git 存放庫。

     git init
     git add -A
     git commit -m "initial commit"
    

將您的應用程式推送至 GitHub

您需要 GitHub 上的存放庫,才能連線至 Azure 靜態 Web Apps。 下列步驟說明如何為您的網站建立存放庫。

  1. 從名為 vuepress-static-app 的 https://github.com/new 建立空白的 GitHub 存放庫 (不要建立讀我檔案)。

  2. 將 GitHub 存放庫新增至本機存放庫的遠端。 請務必新增您的 GitHub 使用者名稱,以取代下列命令中的 <YOUR_USER_NAME> 預留位置。

    git remote add origin https://github.com/<YOUR_USER_NAME>/vuepress-static-app
    
  3. 將您的本機存放庫推送至 GitHub。

    git push --set-upstream origin main
    

部署 Web 應用程式

下列步驟說明如何建立新的靜態網站應用程式,並將其部署至生產環境。

建立應用程式

  1. 移至 Azure 入口網站

  2. 選取 [建立資源]

  3. 搜尋靜態 Web 應用程式

  4. 選取Static Web Apps

  5. 選取 [建立]

  6. 在 [基本] 索引標籤中,輸入下列值。

    屬性
    訂用帳戶 您的 Azure 訂用帳戶名稱。
    資源群組 my-vuepress-group
    名稱 vuepress-static-app
    方案類型 免費
    Azure Functions API 和預備環境的區域 選取最接近您的區域。
    來源 GitHub
  7. 選取 [使用 GitHub 登入 ],並使用 GitHub 進行驗證。

  8. 輸入下列 GitHub 值。

    屬性
    組織 選取您想要的 GitHub 組織。
    存放庫 選取 [vuepress-static-app]。
    分支 選取 [主要]。

    注意

    如果您沒有看到任何存放庫,您可能需要在 GitHub 上授權Azure Static Web Apps。 流覽至 GitHub 存放庫,然後移至 [設定 > 應用程式 > 授權的 OAuth 應用程式]、選取[Azure Static Web Apps],然後選取 [與]。 針對組織存放庫,您必須是組織的擁有者,才能授與權限。

  9. 在 [建置詳細資料]區段中,從 [建置預設] 下拉式清單中選取[VuePress],並保留預設值。

檢閱並建立

  1. 選取 [檢閱 + 建立 ] 以確認詳細資料全都正確。

  2. 選取[建立] 以開始建立App Service靜態 Web 應用程式,並布建部署GitHub Actions。

  3. 部署完成後,選取 [移至資源]。

  4. 在資源畫面上,選取 URL 連結以開啟已部署的應用程式。 您可能需要等候一或兩分鐘,GitHub Actions才能完成。

    已部署的應用程式

清除資源

如果您不打算繼續使用此應用程式,您可以透過下列步驟刪除 Azure 靜態 Web 應用程式資源:

  1. 開啟 Azure 入口網站
  2. 在頂端的搜尋列中,依據您先前提供的名稱搜尋您的應用程式
  3. 按一下應用程式
  4. 按一下 [刪除] 按鈕
  5. 按一下 [是] 以確認刪除動作

後續步驟