在 Azure Static Web Apps 上部署具有通用轉譯的 Nuxt 3 網站

在本教學課程中,您將瞭解如何將Nuxt 3應用程式部署至Azure Static Web Apps。 Nuxt 3 支援 通用 (用戶端和伺服器端) 轉譯,包括伺服器和 API 路由。 如果沒有額外的設定,您可以部署具有通用轉譯的 Nuxt 3 應用程式,以Azure Static Web Apps。 當應用程式建置在 Static Web Apps GitHub Action 或 Azure Pipelines 工作中時,Nuxt 3 會自動將其轉換成靜態資產,以及與Azure Static Web Apps相容的Azure Functions應用程式。

必要條件

設定 Nuxt 3 應用程式

您可以使用 來設定新的 Nuxt 專案 npx nuxi init nuxt-app 。 本教學課程不會使用新的專案,而是使用設定的現有存放庫來示範如何在 Azure Static Web Apps上部署具有通用轉譯的 Nuxt 3 網站。

  1. 透過範本存放庫,在您的 GitHub 帳戶下建立新的存放庫。

  2. 移至 http://github.com/staticwebdev/nuxt-3-starter/generate

  3. 將存放庫命名 為 nuxt-3-starter

  4. 然後,將新的存放庫複製到您的機器。 請務必以您的帳戶名稱取代 < YOUR_GITHUB_ACCOUNT_NAME > 。

    git clone http://github.com/<YOUR_GITHUB_ACCOUNT_NAME>/nuxt-3-starter
    
  5. 移至新複製Nuxt.js應用程式:

    cd nuxt-3-starter
    
  6. 安裝相依性:

    npm install
    
  7. 在開發環境中啟動 Nuxt.js 應用程式:

    npm run dev -- -o
    

移至 http://localhost:3000 以開啟應用程式,您應該會在慣用的瀏覽器中看到下列網站開啟:

啟動 Nuxt.js 應用程式

當您選取架構/程式庫時,應該會看到所選項目的詳細資料頁面:

詳細資料頁面

從 Nuxt.js 組建產生靜態網站

當您使用 npm run build 建置 Nuxt.js 網站時,應用程式會建置為傳統 Web 應用程式,而不是靜態網站。 若要產生靜態網站,請使用下列應用程式組態。

  1. 使用 nuxt generate 命令,將 package.json 的建置指令碼更新為僅產生靜態網站:

    "scripts": {
      "dev": "nuxt dev",
      "build": "nuxt generate"
    },
    

    現在已就緒此命令,Static Web Apps每次推送認可時執行 build 腳本。

  2. 建立靜態網站:

    npm run build
    

    Nuxt.js會產生靜態網站,並將其複製到工作目錄根目錄的 dist 資料夾中。

    注意

    此資料夾會列在 .gitignore 檔案中,因為當您進行部署時,應會由 CI/CD 加以產生。

部署您的靜態網站

下列步驟說明如何將您剛剛推送至 GitHub 的應用程式連結至 Azure 靜態 Web Apps。 在 Azure 中,您可以將應用程式部署至生產環境。

建立Azure Static Web Apps資源

  1. 移至 Azure 入口網站

  2. 選取 [建立資源]。

  3. 搜尋 Static Web Apps

  4. 選取 [Static Web Apps]。

  5. 選取 [建立]。

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

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

  8. 輸入下列 GitHub 值。

    屬性
    組織 選取您想要的 GitHub 組織。
    存放庫 選取您稍早建立的存放庫。
    分支 選取 [主要]。
  9. 在 [建置詳細資料]區段中,從 [建置預設] 下拉式清單中選取[自訂],並保留預設值。

  10. [應用程式位置] 方塊中輸入 /

  11. Api 位置中,于方塊中輸入 .output/server

  12. 在 [ 輸出位置] 方塊中輸入 .output/public

檢閱並建立

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

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

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

  4. 在 [ 概觀 ] 視窗中,選取 URL 連結以開啟已部署的應用程式。

如果網站未立即載入,表示背景 GitHub 動作工作流程仍在執行中。 工作流程完成後,您可以選取 [重新整理瀏覽器] 以檢視您的 Web 應用程式。

您可以瀏覽至存放庫的 [動作],以查看動作工作流程的狀態:

https://github.com/<YOUR_GITHUB_USERNAME>/nuxt-3-starter/actions

同步處理變更

當您建立應用程式時,Azure 靜態 Web Apps 會在您的存放庫中建立 GitHub 動作工作流程檔案。 返回終端機,然後執行下列命令 git pull origin main 來提取包含新檔案的認可。

設定動態路由

移至新部署的網站,然後選取其中一個架構或程式庫標誌。 您會收到 404 錯誤頁面,而不是取得詳細資料頁面。

動態路由上的 404

其原因在於,Nuxt.js 雖然產生了靜態網站,但僅限於首頁的部分。 Nuxt.js 可為每個 .vue 分頁檔產生對等的靜態 .html 檔案,但有例外狀況。

如果頁面是動態頁面 (例如 _id.vue),則沒有足夠的資訊可從這類動態頁面產生靜態 HTML。 您必須明確提供動態路由的可能路徑。

從動態路由產生靜態頁面

  1. 更新 nuxt.config.js 檔案,讓 Nuxt.js 使用所有可用資料的清單來產生每個架構/程式庫的靜態頁面:

      import { projects } from "./utils/projectsData";
    
      export default {
        mode: "universal",
    
        //...truncated
    
        generate: {
          async routes() {
            const paths = [];
    
            projects.forEach(project => {
              paths.push(`/project/${project.slug}`);
            });
    
            return paths;
          }
        }
      };
    

    注意

    routes 是非同步函式,因此您可以在此函式中對 API 提出要求,並使用傳回的清單產生路徑。

藉由更新程式碼並將其推送至 GitHub,對應用程式進行變更。 GitHub Actions會自動建置和部署應用程式。

如需詳細資訊,請參閱 Azure Static Web Apps Nuxt 3 部署預設