在 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 網站。
將存放庫命名 為 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 以開啟應用程式，您應該會在慣用的瀏覽器中看到下列網站開啟。 選取要叫用伺服器和 API 路由的按鈕。
部署 Nuxt 3 網站
下列步驟示範如何建立Azure Static Web Apps資源，並將其設定為從 GitHub 部署您的應用程式。
建立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 。
檢閱並建立
選取 [檢閱 + 建立 ] 以確認詳細資料全都正確。
選取[建立] 以開始建立靜態 Web 應用程式，並布建部署GitHub Actions。
部署完成後，選取 [移至資源]。
在 [ 概觀 ] 視窗中，選取 URL 連結以開啟已部署的應用程式。
如果網站未立即載入，則背景GitHub Actions工作流程仍在執行中。 工作流程完成後，您可以重新整理瀏覽器以檢視您的 Web 應用程式。
您可以瀏覽至存放庫的 [動作]，以查看動作工作流程的狀態：
https://github.com/<YOUR_GITHUB_USERNAME>/nuxt-3-starter/actions
同步處理變更
當您建立應用程式時，Azure 靜態 Web Apps 會在您的存放庫中建立 GitHub 動作工作流程檔案。 返回終端機，然後執行下列命令來提取包含新檔案的認可。
git pull
藉由更新程式碼並將其推送至 GitHub，對應用程式進行變更。 GitHub Actions會自動建置和部署應用程式。
如需詳細資訊，請參閱 Azure Static Web Apps Nuxt 3 部署預設檔。