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

發行項
06/23/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 網站。

瀏覽至 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.js 應用程式

部署 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 。

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

檢閱並建立

選取 [檢閱 + 建立 ] 以確認詳細資料全都正確。
選取[建立] 以開始建立靜態 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 部署預設檔。

設定自訂網域

共用方式為