felixmosh / bull-board

🎯 Queue background jobs inspector
MIT License
2.31k stars 363 forks source link

[QUESTION] NestJS + Typescript + BullMQ + Bull Board Production Deployment with Nginx as Reverse Proxy #788

Open tirth0 opened 3 months ago

tirth0 commented 3 months ago

Greetings, I have deployed bullboard with bullmq and nestjs with the following configuration: There is a local redis instance on the remote server. This is in the imports section in app.module.ts:

    BullModule.forRoot({
      connection: {
        host: 'localhost',
        port: <PORT>,
      },
    }),
    //register the bull-board module forRoot in your app.module
    BullBoardModule.forRoot({
      route: "/queues",
      adapter: ExpressAdapter
    }),

This works absolutely fine in local setup, but once deployed on production it gets stuck on a loading page: Screenshot 2024-07-26 at 7 18 20 PM

In Nginx, my app is served under a subpath app making the URL : https://my-app.com/app/queues

I want to know what configuration changes is required for me to set up bullboard UI properly with my configuration. Any help is appreciated!

felixmosh commented 3 months ago

It stuck in loading since all app files are not downloaded (your server returns 404 for .css, .js) files. Looks like an nginx misconfig, can you share your nginx config?

tirth0 commented 3 months ago

My configuration for the location block in nginx is as follows:

    location /app/ {
      proxy_set_header X-Real-IP $remote_addr;
      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
      proxy_set_header X-NginX-Proxy true;
      proxy_ssl_session_reuse off;
      proxy_set_header Host $http_host;
      proxy_cache_bypass $http_upgrade;
      proxy_redirect off;
      client_max_body_size 100M;
      proxy_read_timeout 600;
      proxy_connect_timeout 600;
      proxy_send_timeout 600;
      proxy_headers_hash_max_size 512;
      proxy_headers_hash_bucket_size 128;
      proxy_set_header Upgrade $http_upgrade;
      proxy_set_header Connection "upgrade";
      proxy_http_version 1.1;
      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
      proxy_set_header Host $host;
      proxy_pass http://port
    }

In the dist folder for the nest app, there is only a main.js file after the build step. Where should I be looking for the static files?

felixmosh commented 3 months ago

Do you ave any block that configures static files?

tirth0 commented 3 months ago

No I do not. Is there any documentation regarding how to set it up with nest? I was unable to locate it.

AnandPatel404 commented 2 months ago

same issue here i have block that configures static files so how i allies it to bull static files

AnandPatel404 commented 2 months ago

NOTE : THIS IS NOT SOLUTION TELL ME IS THIS VALID OR NOT 😅 i just copy whole file from \node_modules\@bull-board\ui\dist\static and past in public/admin/queue/

it work for me

felixmosh commented 2 months ago

The lib should handle it's static files... it works properly with all other adapters. So probably there is some issue with "handling" the routes from Nest.js to the lib...

AnandPatel404 commented 2 months ago

` root /home/project_whatsapp/public/;

    location ~* \.(css|js|gif|jpe?g|png|webp|woff|woff2|ttf|svg|ico|json)$ {
            expires 365d;
            access_log off;
            add_header Cache-Control "public";
    }

    location /contact_us {
            limit_req zone=contact_us;
            proxy_pass http://localhost:9000/contact_us;
    }

    location / {
             try_files $uri $uri/ @backend;
    }

    location @backend {
            proxy_pass http://localhost:9000;
            proxy_http_version 1.1;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection 'upgrade';
            proxy_set_header Host $host;
            proxy_cache_bypass $http_upgrade;
    }

    location /auth {
            limit_req zone=auth_zone;
            proxy_pass http://localhost:9000/auth;
            proxy_set_header X-Forwarded-For $remote_addr;
    }

`

here is my configuration that not work in my case

fifa334 commented 2 months ago

NOTE : THIS IS NOT SOLUTION TELL ME IS THIS VALID OR NOT 😅 i just copy whole file from \node_modules@bull-board\ui\dist\static and past in public/admin/queue/

it work for me

Could you show me your example? Thanks bro. Because I pass in pulic folder, it does't work. This is my code. `const serverAdapter = new ExpressAdapter(); serverAdapter.setBasePath('/bullmq-dashboard');

app.use('/bullmq-dashboard', express.static(path.join(__dirname, 'public/admin/queue/')));

app.use('/bullmq-dashboard', serverAdapter.getRouter());`

AnandPatel404 commented 2 months ago

step 1 :- got to /node_modules/@bull-board/ui/dist/static and copy whole static folder step 2 :- create a folder in your public directory and name it as your bull board route name in my case my bull board route is /admin/queue so i create a folder name /admin/queue step 3 :- pest static folder in it and done

fifa334 commented 2 months ago

`const serverAdapter = new ExpressAdapter(); serverAdapter.setBasePath('/bullmq-dashboard');

app.use('/bullmq-dashboard', express.static(path.join(__dirname, 'public/admin/queue/')));

app.use('/bullmq-dashboard', serverAdapter.getRouter());`

Hi bro,not need put this code in main.js ? `const serverAdapter = new ExpressAdapter(); serverAdapter.setBasePath('/bullmq-dashboard');

app.use('/bullmq-dashboard', express.static(path.join(__dirname, 'public/admin/queue/')));

app.use('/bullmq-dashboard', serverAdapter.getRouter());`