将 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。