MQTTX and NGINX

[Mimmi511]

Hi everyone,

has anyone recommendation for running MQTTX as a docker image behind NGINX?

I'm having specifically issues with loading all the image resources.
The way I got around so far was by configuring the entry in the nginx.conf this way:

location /mqttx/ {
proxy_set_header Host $http_host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";

            proxy_pass http://localhost:5566/;

            # Enable sub_filter to rewrite URLs in the response body
            sub_filter 'src="/' 'src="/mqttx/';
            sub_filter 'href="/' 'href="/mqttx/';
            sub_filter 'url("/' 'url("/mqttx/';
            sub_filter 'content="/' 'content="/mqttx/';
            sub_filter 'action="/' 'action="/mqttx/';
            sub_filter 'link rel="stylesheet" href="/' 'link rel="stylesheet" href="/mqttx/';
            sub_filter 'img src="/' 'img src="/mqttx/';
            sub_filter 'script src="/' 'script src="/mqttx/';
            sub_filter 'link href="/' 'link href="/mqttx/';
            sub_filter 'srcset="/' 'srcset="/mqttx/';
            sub_filter 'data-src="/' 'data-src="/mqttx/';
            sub_filter 'font src="/' 'font src="/mqttx/';
            sub_filter 'base href="/' 'base href="/mqttx/';
            sub_filter 'manifest="/' 'manifest="/mqttx/';
            sub_filter_once off;
    }

But it is still not loading all of the images.

Appreciate any help!

[ysfscream]

1. You can try setting the build configuration in web/.env.docker:

BASE_URL=/mqttx
VUE_APP_OUTPUT_DIR=dist

2. Or alternatively in web/.env:

BASE_URL=/mqttx
VUE_APP_OUTPUT_DIR=dist

3. Then rebuild the Docker image:

# Build for Docker environment
yarn install
yarn run build:docker

# Build Docker image
docker build -t mqttx-web .

# Run container
docker run -p 5566:80 mqttx-web

4. And use this simplified NGINX config:

location /mqttx/ {
    proxy_pass http://localhost:5566/;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    
    # WebSocket support
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
}

Refrenece: https://mqttx.app/docs/web/development