將 Nuxt 部署到 Zerops

Nodejs 預設: SERVER_PRESET: zerops靜態預設: SERVER_PRESET: zerops-static

在 Zerops 中閱讀更多資訊。

Nuxt x Zerops 快速執行 ✨
想要在不安裝或設定任何東西的情況下測試在 Zerops 上執行 Nuxt 嗎？使用儲存庫 Zerops x Nuxt - Static 或 Zerops x Nuxt - SSR on Node.js，您只需單擊一下即可部署 Nuxt 範例應用程式。

Zerops 支援使用專案根目錄中的簡單設定檔來部署靜態和伺服器端渲染的應用程式。

靜態

專案和服務可以透過專案新增精靈新增，或使用 YAML 結構匯入

建立專案

zerops-project-import.yml

project:
  name: recipe-nuxt

services:
  - hostname: app
    type: static

這將建立一個名為 recipe-nuxt 的專案，其中包含一個名為 app 的 Zerops 靜態服務。

設定 Zerops YAML

若要告訴 Zerops 如何建置和執行您的應用程式，請將 zerops.yml 新增至您的根目錄

zerops.yml

zerops:
  - setup: app
    build:
      base: nodejs@20
      buildCommands:
        - yarn
        - yarn nuxi generate
      deployFiles:
        - .output/public/~
    run:
      base: static

現在您可以使用 Zerops CLI 建置和部署管道，或透過從服務詳細資訊中將應用程式服務連接到您的 GitHub / GitLab 儲存庫來觸發。

SSR Node.js

專案和服務可以透過專案新增精靈新增，或使用 YAML 結構匯入

zerops-project-import.yml

project:
  name: recipe-nuxt

services:
  - hostname: app
    type: nodejs@20

這將建立一個名為 recipe-nuxt 的專案，其中包含一個名為 app 的 Zerops Node.js 服務。

設定 Zerops YAML

若要告訴 Zerops 如何建置和執行您的應用程式，請將 zerops.yml 新增至您的根目錄

zerops.yml

zerops:
  - setup: nuxt
    build:
      base: nodejs@20
      buildCommands:
        - yarn
        - yarn build
      deployFiles:
        - .output/~
    run:
      base: nodejs@20
      ports:
        - port: 3000
          httpSupport: true
      start: node server/index.mjs

現在您可以使用 Zerops CLI 建置和部署管道，或透過從服務詳細資訊中將應用程式服務連接到您的 GitHub / GitLab 儲存庫來觸發。

建置和部署您的應用程式

安裝 Zerops CLI。

npm i -g @zerops/zcli

在 Zerops 應用程式中開啟設定 > 存取權杖管理並產生新的存取權杖。
使用以下命令，使用您的存取權杖登入

zcli login <token>

導航到您的應用程式的根目錄（zerops.yml 所在的位置），並執行以下命令以觸發部署

zcli push

透過將服務連接到您的 GitHub / GitLab 儲存庫，您的程式碼可以在每次提交或新標籤時自動部署。此連線可以在服務詳細資訊中設定。

在 Zerops 文件中閱讀更多資訊。

Zeabur

將您的 Nuxt 應用程式部署到 Zeabur。