在本教學課程中，您將瞭解如何將
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 網站。
瀏覽至
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 以開啟應用程式，您應該會在慣用的瀏覽器中看到下列網站開啟。 選取要叫用伺服器和 API 路由的按鈕。
部署 Nuxt 3 網站
下列步驟示範如何建立Azure Static Web Apps資源，並將其設定為從 GitHub 部署您的應用程式。
建立Azure Static Web Apps資源
瀏覽至 Azure 入口網站。
選取 [建立資源]。
搜尋 Static Web Apps。
選取 [Static Web Apps]。
選取 [建立]。
在 [基本] 索引標籤中，輸入下列值。
如果網站未立即載入，則背景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 部署預設檔。
設定自訂網域
