Nuxt 3 SSR 通过自托管 gitlab CI 部署在 vercel 上

问题描述 投票:0回答:2

我尝试通过自托管的 gitlab CI 在 SSR 模式下将 nuxt 3 部署到 vercel,但运气不佳。我遵循官方 vercel 示例(https://github.com/vercel/examples/tree/main/ci-cd/gitlab-cicd)。所以一般情况下部署运行这些命令:

npm install --global vercel
vercel pull --yes --environment=preview --token=$VERCEL_TOKEN
vercel build --token=$VERCEL_TOKEN
vercel deploy --prebuilt  --token=$VERCEL_TOKEN

一切设置完毕后,我尝试实际运行它,大部分过程似乎都正常

$ npm install --global vercel
added 214 packages, and audited 215 packages in 43s
26 packages are looking for funding
  run `npm fund` for details
4 moderate severity vulnerabilities
To address all issues (including breaking changes), run:
  npm audit fix --force
Run `npm audit` for details.
$ vercel pull --yes --environment=preview --token=$VERCEL_TOKEN
Vercel CLI 28.2.5
Retrieving project…
> Downloading `preview` Environment Variables for Project XXX
Downloading
Created .vercel/.env.preview.local file [564ms]
> Downloading project settings
Downloaded project settings to .vercel/project.json [0ms]
$ vercel build --token=$VERCEL_TOKEN
Vercel CLI 28.2.5
Installing dependencies...
> postinstall
> nuxt prepare
[log] Nuxi 3.0.0-rc.10
[info] [nuxt:tailwindcss] Using default Tailwind CSS file from runtime/tailwind.css
[success] Types generated in .nuxt
added 761 packages in 41s
105 packages are looking for funding
  run `npm fund` for details
> build
> nuxt build
[log] Nuxi 3.0.0-rc.10
[log] Nuxt 3.0.0-rc.10 with Nitro 0.5.3
[info] [nuxt:tailwindcss] Using default Tailwind CSS file from runtime/tailwind.css
[warn]
[warn] warn - No utility classes were detected in your source files. If this is unexpected, double-check the `content` option in your Tailwind CSS configuration.
[warn] warn - https://tailwindcss.com/docs/content-configuration
[info] Client built in 5509ms
[info] Building server...
[success] Server built in 2822ms
[success] [nitro] Generated public .output/public
[info] [nitro] Building Nitro Server (preset: `node-server`)
[success] [nitro] Nitro server built
  ├─ .output/server/package.json (650 B) (287 B gzip)
  ├─ .output/server/index.mjs (458 B) (257 B gzip)
  ├─ .output/server/chunks/nitro/node-server.mjs.map (62.8 kB) (4.78 kB gzip)
  ├─ .output/server/chunks/nitro/node-server.mjs (18.6 kB) (5.87 kB gzip)
  ├─ .output/server/chunks/handlers/renderer.mjs.map (19.6 kB) (3.39 kB gzip)
  ├─ .output/server/chunks/handlers/renderer.mjs (15.5 kB) (4.75 kB gzip)
  ├─ .output/server/chunks/error-500.mjs.map (1.05 kB) (379 B gzip)
  ├─ .output/server/chunks/error-500.mjs (4.26 kB) (1.83 kB gzip)
  ├─ .output/server/chunks/app/styles.mjs.map (538 B) (279 B gzip)
  ├─ .output/server/chunks/app/styles.mjs (5.54 kB) (1.57 kB gzip)
  ├─ .output/server/chunks/app/server.mjs.map (55.4 kB) (8.16 kB gzip)
  ├─ .output/server/chunks/app/server.mjs (43.7 kB) (11.2 kB gzip)
  ├─ .output/server/chunks/app/client.manifest.mjs.map (2.38 kB) (495 B gzip)
  ├─ .output/server/chunks/app/client.manifest.mjs (3.21 kB) (589 B gzip)
  ├─ .output/server/chunks/app/_nuxt/index.fcab534d.mjs.map (756 B) (367 B gzip)
  ├─ .output/server/chunks/app/_nuxt/index.fcab534d.mjs (1.12 kB) (532 B gzip)
  ├─ .output/server/chunks/app/_nuxt/error-component.5ae4281e.mjs.map (2.34 kB) (801 B gzip)
  ├─ .output/server/chunks/app/_nuxt/error-component.5ae4281e.mjs (2.01 kB) (894 B gzip)
  ├─ .output/server/chunks/app/_nuxt/error-500.1731c24b.mjs.map (1.69 kB) (612 B gzip)
  ├─ .output/server/chunks/app/_nuxt/error-500.1731c24b.mjs (3.17 kB) (1.41 kB gzip)
  ├─ .output/server/chunks/app/_nuxt/error-500-styles.ad145178.mjs.map (350 B) (222 B gzip)
  ├─ .output/server/chunks/app/_nuxt/error-500-styles.ad145178.mjs (2.22 kB) (864 B gzip)
  ├─ .output/server/chunks/app/_nuxt/error-404.2013b5e2.mjs.map (2.35 kB) (798 B gzip)
  ├─ .output/server/chunks/app/_nuxt/error-404.2013b5e2.mjs (4.03 kB) (1.7 kB gzip)
  ├─ .output/server/chunks/app/_nuxt/error-404-styles.3db9fdd2.mjs.map (350 B) (223 B gzip)
  ├─ .output/server/chunks/app/_nuxt/error-404-styles.3db9fdd2.mjs (3.92 kB) (1.25 kB gzip)
  ├─ .output/server/chunks/app/_nuxt/default.a6850ccd.mjs.map (929 B) (424 B gzip)
  └─ .output/server/chunks/app/_nuxt/default.a6850ccd.mjs (1.31 kB) (612 B gzip)
Σ Total size: 3.05 MB (705 kB gzip)
[success] [nitro] You can preview this build using `node .output/server/index.mjs`
Error: No Output Directory named "dist" found after the Build completed. You can configure the Output Directory in your Project Settings.
Learn More: https://vercel.link/missing-public-directory

所以看起来构建本身和身份验证是可以的,但问题是:

Error: No Output Directory named "dist" found after the Build completed. You can configure the Output Directory in your Project Settings.

乍一看,这似乎是 vercel 期望生成的站点,而不是 SSR。我尝试用谷歌搜索一下,发现 vercel-builder 似乎可以解决这个问题(至少对于 nuxt https://github.com/nuxt/vercel-builder),但我在类型脚本中遇到了错误,这实际上导致了我到 https://github.com/nuxt/vercel-builder/issues/245 哪里有信息表明它不应该用于 nuxt 3。更具体地说:

Don't use this with Nuxt 3 - there is a much better, built-in solution for deploying to Vercel!

并链接到

https://v3.nuxtjs.org/guide/deploy/providers/vercel

但是来自 vercel 提供商的官方 nuxt 3:

  • 支持无服务器构建
  • 部署时自动检测
  • 无需配置

看起来它应该可以开箱即用。最奇怪的是,如果我使用与本地终端中的 gitlab CI 相同的命令,部署就会成功,一切都很好。

我很乐意提供任何建议。我花了几个小时试图解决这个问题。

deployment gitlab-ci server-side-rendering vercel nuxtjs3
2个回答
0
投票

覆盖 vercel 中项目设置中的构建命令以使用 nuxtgenerate。


0
投票

@marysmech 我们能解决这个问题吗?

© www.soinside.com 2019 - 2024. All rights reserved.