Nuxt 3 SSR deploy on vercel via self hosted gitlab CI

Viewed 46

Im trying to deploy nuxt 3 in SSR mode to vercel via self hosted gitlab CI without luck. I follow official vercel example (https://github.com/vercel/examples/tree/main/ci-cd/gitlab-cicd). So in general deploy run these commands:

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

After everything was set I tried to actually run it and most of process seems ok

$ 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

So it seems that build itself and authentification is ok but the problem is:

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

On first sight it seems like vercel expect generated site and not SSR. I tried to google little bit and I have found vercel-builder which seems to solve this problem (at least for nuxt https://github.com/nuxt/vercel-builder) but i got errors with type script which actually lead me to https://github.com/nuxt/vercel-builder/issues/245 where is info that it should not be used for nuxt 3. To be more specific:

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

and link to

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

But from official nuxt 3 for vercel provider:

  • Support for serverless build
  • Auto-detected when deploying
  • No configuration required

It seems that it should somehow works out of the box. Weirdest thing is that if I use same commands that i use in gitlab CI from local terminal deploy is successful and everything is fine.

I would be glad for any advice. Im trying to solve this for hours.

1 Answers

override the build command in the project settings in vercel to use nuxt generate.

Related