Deploying nuxt 3 on multiple load balanced servers

Server provisioning and management
#1

In case someone runs into this issue down the road.

When building the same nuxt app on multiple servers after a git commit, the resulting builds have different filenames due to the way vite calculates the hash.

For example, the entry.js file is named entry.{hash}.js. That {hash} will be different on every server because vite calculates the hash based on path + contents of file. Not exactly sure why they do it that way but they do.

Because cleavr is using milliseconds as part of the directory name (eg /home/cleavr/yoursitehere.com/releases/20230604072518615) vite will produce a different hash on different servers because of a few milliseconds time difference, even though its technically the exact same file.

It would be cool if cleavr was using the git commit hash as the directory name, but in lieu of that, this is what I’m using to get around the problem. First, I add the following to my nuxt.config.ts:

  vite: {
    build: {
      rollupOptions: {
        output: {
          entryFileNames: `_nuxt/[name].${process.env.GIT_HEAD}.js`,
          chunkFileNames: `_nuxt/[name].${process.env.GIT_HEAD}.js`,
          assetFileNames: `_nuxt/[name].${process.env.GIT_HEAD}.[ext]`,
        },
      },
    },
  },

And then I’ve changed the build command in the cleavr settings to:

GIT_HEAD=$(git rev-parse --short HEAD) NITRO_PRESET=cleavr npm run build --production

HTH!

3 Likes