在边缘部署 Nuxt

该 NuxtHub 管理员 是为了简化您使用 NuxtHub 的体验而设计的，使您能够轻松管理团队和项目，以及在您的 Cloudflare 帐户上无配置地部署 NuxtHub 应用程序。

部署部署细节

生产与预览部署

NuxtHub 支持两种类型的部署：生产和预览。

生产部署

• 在设置您的项目时，您可以指定一个生产分支（默认值为 main）
• 对生产分支的成功部署将
  • 通过您的主域名访问
  • 也可用在 <commit>.<project>.pages.dev

预览部署

• 任何来自非生产分支（包括拉取请求）的部署都被视为预览
• 成功的预览部署可通过以下方式访问：
  • <commit>.<project>.pages.dev
  • <branch>.<project>.pages.dev

NuxtHub CLI

使用单个命令部署您的本地项目

npx nuxthub deploy

该命令将

1. 确保您已登录 admin.hub.nuxt.com
2. 确保您已链接您的 Cloudflare 帐户
3. 将您的本地项目与 NuxtHub 项目关联或帮助您创建一个新项目
4. 使用正确的预设构建您的 Nuxt 项目
5. 将其部署到您的 Cloudflare 帐户，以及所有必要的资源（D1、KV、R2 等）
6. 为您提供一个 URL，使用免费的 <my-app>.nuxt.dev 域名访问您的项目

GitHub 操作

要使用 GitHub 操作部署您的项目，您可以使用以下工作流程

name: Deploy with NuxtHub CLI
on: push
jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v4
      - uses: pnpm/action-setup@v4
        name: Install pnpm
        with:
          run_install: false
      - name: Install Node.js
        uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: 'pnpm'
      - name: Get pnpm store directory
        shell: bash
        run: |
          echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
      - uses: actions/cache@v4
        name: Setup pnpm cache
        with:
          path: ${{ env.STORE_PATH }}
          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
          restore-keys: |
            ${{ runner.os }}-pnpm-store-
      - name: Install dependencies
        run: pnpm install

      - name:  Deploy with nuxthub
        run: npx nuxthub deploy
        env:
          NUXT_HUB_PROJECT_KEY: ${{ secrets.NUXT_HUB_PROJECT_KEY}}
          NUXT_HUB_USER_TOKEN: ${{ secrets.NUXT_HUB_USER_TOKEN }}

您需要将以下密钥添加到您的 GitHub 存储库

• NUXT_HUB_PROJECT_KEY：您的项目密钥（在 NuxtHub 管理员的项目设置中或如果您运行了 npx nuxthub link 则在您的 .env 文件中可用）
• NUXT_HUB_USER_TOKEN：您的用户令牌，可在 NuxtHub 管理员中的**用户设置** → **令牌**中找到

Cloudflare Pages CI

可以使用 Cloudflare Pages CI 通过连接您的 GitHub 或 GitLab 帐户来部署您的项目。连接您的存储库后，每次提交都会触发新的部署。

1. 打开 NuxtHub 管理员
2. 点击 新建项目 然后 导入 GitHub 存储库
3. 选择您的 Github 存储库
4. 点击 导入存储库

自托管

您可以在自己的 Cloudflare 帐户上部署您的项目，而无需使用 NuxtHub 管理员。

为此，您需要在您的 Cloudflare 帐户中创建必要的资源，并配置您的项目以使用它们（D1、KV、R2 等）。

然后，创建一个 Cloudflare Pages 项目，并将您的 GitHub 或 Gitlab 存储库链接起来，并在构建设置中选择 Nuxt 框架预设。

创建项目后，打开 设置 选项卡，然后设置

• 运行时 > 兼容性标志
  • 添加 nodejs_compat 标志
• 绑定
  • KV 命名空间：KV 并选择您创建的 KV 命名空间
  • KV 命名空间：CACHE 并选择您创建的用于缓存的 KV 命名空间
  • R2 存储桶：BLOB 并选择您创建的 R2 存储桶
  • D1 数据库：DB 并选择您创建的 D1 数据库
  • AI：AI
  • 浏览器：BROWSER
  • 向量化：VECTORIZE_<index name in upper case> 并选择您创建的向量化索引
    

    # Create the Vectorize index manually using
    npx wrangler vectorize create <index-name> --dimensions=<dimensions> --metric=<metric>
    

返回 部署 选项卡，然后点击 ... 然后 重试部署，重新尝试最后一次部署。