在本教學課程中，您將瞭解如何將 Nuxt 3 應用程式部署至 Azure 靜態 Web 應用程式。 Nuxt 3 支援 通用（用戶端和伺服器端）渲染，包括伺服器和 API 路由。 無需額外設定，您就可以將具有通用轉譯的 Nuxt 3 應用程式部署至 Azure 靜態 Web 應用程式。 當應用程式建置在靜態 Web 應用程式 GitHub 動作或 Azure Pipelines 工作中時，Nuxt 3 會自動將它轉換成靜態資產，以及與 Azure 靜態 Web Apps 相容的 Azure Functions 應用程式。
先決條件
設定 Nuxt 3 應用程式
您可以使用npx nuxi init nuxt-app 設定新的 Nuxt 專案。 本教學課程不會使用新專案，而是使用現有的存放庫設定來示範如何在 Azure 靜態 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 靜態 Web Apps 資源
流覽至 Azure 入口網站。
選取 [建立資源]。
搜尋 靜態 Web 應用程式。
選取 [靜態 Web 應用程式]。
選取 ，創建。
在 [基本] 索引標籤中，輸入下列值。
房產 價值觀 Subscription 您的 Azure 訂用帳戶名稱。 資源群組 my-nuxtjs-group 名稱 my-nuxt3-app 方案類型 免費 Azure Functions API 和暫存環境的區域 選取最靠近您的區域。 來源 GitHub 選取 [使用 GitHub 登入]，並使用 GitHub 進行驗證。
輸入下列 GitHub 值。
房產 價值觀 組織 選取您想要的 GitHub 組織。 Repository 選取您先前建立的存放庫。 分支 選取 [主要]。 在 [建置詳細數據] 區段中，從 [建置預設] 下拉式清單中選取 [自定義]，並保留預設值。
在 應用程式位置 中，輸入 / 方塊。
在 [Api 位置] 中，在方塊中輸入 .output/server 。
在 [輸出位置] 中，在方塊中輸入 .output/public 。
檢閱並建立
選取 [檢閱 + 建立] 以驗證詳細資料都正確。
選取 [ 建立 ] 以開始建立靜態 Web 應用程式，並佈建 GitHub Actions 以進行部署。
部署完成之後，請選擇 [移至資源。
在 概 觀 視窗中，選取 URL 連結以開啟已部署的應用程式。
如果網站未立即載入，則背景 GitHub Actions 工作流程仍在執行中。 工作流程完成後，您可以刷新瀏覽器以查看您的網路應用程式。
您可以導覽至存放庫的 Actions 分頁，以檢查 Actions 工作流程的狀態。
https://github.com/<YOUR_GITHUB_USERNAME>/nuxt-3-starter/actions
同步處理變更
當您建立應用程式時，Azure Static Web Apps 會在存放庫中建立 GitHub Actions 工作流程檔案。 返回終端機，然後執行下列命令以提取包含新檔案的提交。
git pull
透過更新程式碼並將其推送到 GitHub 來變更應用程式。 GitHub Actions 會自動建置和部署應用程式。
如需詳細資訊，請參閱 Azure 靜態 Web 應用程式 Nuxt 3 部署預設 組檔。