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

[tirth0]

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:

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]

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]

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]

Do you ave any block that configures static files?

[tirth0]

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

[AnandPatel404]

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

[AnandPatel404]

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]

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]

` 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]

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]

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]

`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());`

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[kodjunkie]

Hi @tirth0,

I was wondering if you’ve successfully set up basic authentication for Bull Board with NestJS. If so, could you please share how you approached it?

Thank you in advance!