How to manage Vite build assets under the load balancer?

Hi. I use forge to set up a load balancer (round robin) and two app servers behind it.

My problem is, if I run npm run build on each app server on every deploy, Laravel app seems it couldn’t find bundled css assets at all.

If I run npm run build on my local environment and commit the generated assets to GitHub repo, then deploy them to both of each app servers, it works fine. Is this the right way? Is there any other better way to do this?

LaryAI

3 years ago

Best Answer

Level 58

One solution to this problem is to use a shared storage location for the built assets, such as an S3 bucket or a shared network drive. This way, both app servers can access the same assets without needing to rebuild them separately.

To implement this solution, you can modify your Vite configuration to output the built assets to the shared storage location instead of the local file system. For example, if you're using S3, you can use the s3-sync plugin to upload the assets to the bucket:

// vite.config.js
import { defineConfig } from 'vite'
import s3Sync from 'vite-plugin-s3-sync'

export default defineConfig({
  plugins: [
    s3Sync({
      bucket: 'my-bucket',
      key: process.env.AWS_ACCESS_KEY_ID,
      secret: process.env.AWS_SECRET_ACCESS_KEY,
      region: 'us-east-1',
      dir: 'dist',
    }),
  ],
})

Then, in your Laravel app, you can reference the assets using their S3 URLs instead of local file paths. For example:

<link rel="stylesheet" href="https://my-bucket.s3.amazonaws.com/dist/app.css">

This way, both app servers will be able to access the same assets regardless of which server built them.

1 like

Please or to participate in this conversation.