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

發行項
01/28/2023

在本教學課程中，您將瞭解如何將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應用程式。

必要條件

具有有效訂用帳戶的 Azure 帳戶。免費建立帳戶。
GitHub 帳戶。免費建立帳戶。
Node.js 安裝 16 或更新版本。

設定 Nuxt 3 應用程式

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

透過範本存放庫，在您的 GitHub 帳戶下建立新的存放庫。
移至 http://github.com/staticwebdev/nuxt-3-starter/generate
將存放庫命名 為 nuxt-3-starter。
然後，將新的存放庫複製到您的機器。請務必以您的帳戶名稱取代 < YOUR_GITHUB_ACCOUNT_NAME > 。
```
git clone http://github.com/<YOUR_GITHUB_ACCOUNT_NAME>/nuxt-3-starter
```
移至新複製Nuxt.js應用程式：
```
cd nuxt-3-starter
```
安裝相依性：
```
npm install
```
在開發環境中啟動 Nuxt.js 應用程式：
```
npm run dev -- -o
```

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

啟動 Nuxt.js 應用程式

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

詳細資料頁面

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

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

使用 nuxt generate 命令，將 package.json 的建置指令碼更新為僅產生靜態網站：
```
"scripts": {
  "dev": "nuxt dev",
  "build": "nuxt generate"
},
```
現在已就緒此命令，Static Web Apps每次推送認可時執行 build 腳本。
建立靜態網站：
```
npm run build
```
Nuxt.js會產生靜態網站，並將其複製到工作目錄根目錄的 dist 資料夾中。

注意

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

部署您的靜態網站

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

建立Azure Static Web Apps資源

移至 Azure 入口網站。
選取 [建立資源]。
搜尋 Static Web Apps。
選取 [Static Web Apps]。
選取 [建立]。

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

屬性	值
訂用帳戶	您的 Azure 訂用帳戶名稱。
資源群組	my-nuxtjs-group
名稱	my-nuxt3-app
方案類型	免費
Azure Functions API 和預備環境的區域	選取最接近您的區域。
來源	GitHub

選取 [使用 GitHub 登入 ]，並使用 GitHub 進行驗證。
輸入下列 GitHub 值。

屬性值

組織選取您想要的 GitHub 組織。

存放庫選取您稍早建立的存放庫。

分支選取 [主要]。
在 [建置詳細資料]區段中，從 [建置預設] 下拉式清單中選取[自訂]，並保留預設值。
在 [應用程式位置] 方塊中輸入 / 。
在 Api 位置中，于方塊中輸入 .output/server 。
在 [ 輸出位置] 方塊中輸入 .output/public 。

屬性	值
組織	選取您想要的 GitHub 組織。
存放庫	選取您稍早建立的存放庫。
分支	選取 [主要]。

檢閱並建立

選取 [檢閱 + 建立 ] 以確認詳細資料全都正確。
選取[建立] 以開始建立App Service靜態 Web 應用程式，並布建部署GitHub Actions。
部署完成後，選取 [移至資源]。
在 [ 概觀 ] 視窗中，選取 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。您必須明確提供動態路由的可能路徑。

從動態路由產生靜態頁面

更新 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 部署預設檔。

設定自訂網域