将 Nuxt 部署到 Zerops

Nodejs 预设: SERVER_PRESET: zerops静态预设: SERVER_PRESET: zerops-static

在 Zerops 中了解更多信息。

Nuxt x Zerops 快速运行 ✨
想要在不安装或设置任何东西的情况下测试在 Zerops 上运行 Nuxt 吗？使用仓库 Zerops x Nuxt - 静态或 Zerops x Nuxt - Node.js 上的 SSR，您可以一键部署示例 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。