nuxt / nuxt

The Intuitive Vue Framework.
https://nuxt.com
MIT License
52.94k stars 4.86k forks source link

Nuxt 2 standalone build on azure devOps not working #10790

Open nickelnext opened 1 year ago

nickelnext commented 1 year ago

Versions

Reproduction

Here is the package.json extract

 "scripts": {
    "test": "cross-env NODE_ENV=test nodemon server/index.js --watch server",
    "preprod": "cross-env NODE_ENV=preprod nodemon server/index.js --watch server",
    "local": "cross-env NODE_ENV=local nodemon server/index.js --watch server",
    "build": "nuxt build --standalone",
    "start": "nuxt start",
    "generate": "nuxt generate"
  },

Here is the nuxt.config.js extract

module.exports = {
  target: process.env.target || 'server',
  /* server configuration for https: 
  https://stackoverflow.com/questions/56966137/how-to-run-nuxt-npm-run-dev-with-https-in-localhost */
  server: {
    host: process.env.HOST || '0.0.0.0',
  },
...
...
buildModules: [
    '@nuxtjs/fontawesome',
    '@nuxtjs/i18n',
    '@nuxtjs/axios',
    '@nuxtjs/auth-next',  
    "@nuxtjs/redirect-module"
  ],
  /*
  ** Nuxt.js modules
  */
  modules: [

  ],

(as you see i cleared the modules array so everything should be bundled with --standalone, if i got it right)

Here is the index.js extract, where i start the app with nuxt-start as found somewhere on github/stackoverflow (documentation on nuxtjs.org is basically zero on this matter)

const express = require('express')
const consola = require('consola')
const { Nuxt, Builder } = require('nuxt-start')
const app = express()
const https = require('https')
let credentials = null
if(process.env.NODE_ENV !== 'production'){
  const fs = require('fs')
  const privateKey  = fs.readFileSync('server.key', 'utf8')
  const certificate = fs.readFileSync('server.crt', 'utf8')
  credentials = {key: privateKey, cert: certificate}
}

// Import and Set Nuxt.js options
const config = require('../nuxt.config.js')
config.dev = !(process.env.NODE_ENV === 'production')

async function start() {
  // Init Nuxt.js
  const nuxt = new Nuxt(config)

  const { host, port } = nuxt.options.server

  // Build only in dev mode
  if (config.dev) {
    const builder = new Builder(nuxt)
    await builder.build()
  } else {
    await nuxt.ready()
  }

  // Give nuxt middleware to express
  app.use(nuxt.render)

  // Listen the server

  if(process.env.NODE_ENV !== 'production'){
    var httpsServer = https.createServer(credentials, app)
    httpsServer.listen(port, host) 
  }else{
    app.listen(port, host)
  }

  consola.ready({
    message: `Server listening on https://${host}:${port}/home/`,
    badge: true
  })
}

start()

Steps to reproduce

Configure a pipeline on DevOps that does npm install and npm run build, so that the Agent creates a Standalone package. Then copy all the files and zip them to an archive and create the drop

.nuxt/**
static/**
package.json
nuxt.config.js
server.js
server/**
.npmrc

Create a Release pipeline that takes the drop and deploys to a Linux Azure WebApp, which can run npm i nuxt-start and npm run start

the installation of npm install nuxt-start 2.15.8 fails somehow saying that the renaming of some node_modules doesn't work. So i have these folders installed on the WebApp

kudu_ssh_user@xxxxxxxxxx:~/site/wwwroot/node_modules$ ls
accepts        buffer         connect         escape-string-regexp  globby       is-docker                 lodash.template          mimic-fn      parse-git-config  randombytes           server-destroy   strip-final-newline  wrap-ansi
ansi-align     bytes          cookie          etag                  graceful-fs  is-extglob                lodash.templatesettings  ms            parseurl          range-parser          shebang-command  supports-color       yallist
ansi-regex     camelcase      create-require  figures               has-flag     is-fullwidth-code-point   lodash.uniq              mute-stream   path-key          restore-cursor        shebang-regex    to-regex-range
ansi-styles    ci-info        csstype         fill-range            hash-sum     is-glob                   lru-cache                npm-run-path  path-parse        run-async             signal-exit      toidentifier
arg            cli-boxes      destroy         finalhandler          http-errors  is-number                 merge-stream             nuxt-start    path-type         run-parallel          slash            universalify
array-union    cli-cursor     dir-glob        fresh                 ieee754      is-stream                 merge2                   on-finished   picocolors        safe-buffer           statuses         unpipe
at-least-node  color-convert  ee-first        get-stream            ignore       jsonfile                  micromatch               on-headers    pify              safer-buffer          std-env          utils-merge
base64-js      color-name     encodeurl       git-config-path       inherits     launch-editor-middleware  mime-db                  onetime       pretty-bytes      serialize-javascript  string-width     vary
boxen          compressible   escape-html     glob-parent           ini          lodash._reinterpolate     mime-types               os-tmpdir     queue-microtask   serve-static          strip-ansi       widest-line

but when i try to do the npm run start i get "nuxt not found"

What is Expected?

The main goal is to make use of --standalone, since no guide on the internet mention --standalone at all, and what happens is that everyone is doing this:

This is nonsense, because we do npm install twice while the entire bundled package should be ready already. So there's a huge flaw in the process, and i found and followed this kind of approach everywhere until i got a devops pipe that takes 14 minutes, and i can't take it anymore.

Since I know there's the --standalone flag, we should be able to make it work also on Azure.

I tried on my pc to:

It works perfectly and at least nuxt start is lightweight. Of course on my machine i can also install nuxt-start as a -g package which means that i don't need to re-install it every time. But that's not doable on DevOps.

I tried to do the same on DevOps, and it doesn't work. So here's the deal: either i'm doing something completely wrong, or there's a major flaw in the documentation and in the flow itself.

Can you point me to the right direction and make this information finally available to the world? As nobody, literally nobody, has the real solution explained anywhere. And I'm talking about a real project, not a "nuxt-start-app" that has below-zero complexity. I believe i'm not the only one having dozens of nuxt.js apps on Azure and they're still all relying on npm install on the actual machine which is completely nuts.

Best regards

danielroe commented 1 week ago

We are approaching the Nuxt 2 EOL date (June 30, 2024) - see this article for more information. This is advance warning that I'm going to close this issue then, as it's currently marked as a Nuxt 2 related bug.

If it's a critical or security issue, please do comment and let me know, in case it is possible to address it before the EOL date.

If it's a an issue you think is relevant for Nuxt 3, please feel free to open a fresh issue (or just comment here so I can update labels, etc.). 🙏

Thank you for your understanding and for your contribution to Nuxt. ❤️