Reverse-Proxy Example

In this example, you will configure the visualization to run behind a path-prefixed reverse proxy. When using the visualization as a cloud service, it is a common way to use a reverse proxy with different path prefixes for different services hosted at the same domain name. We use Traefik as a reverse proxy in this example and configure the path prefix /cloud/visu/.

Note

To use voraus 3D Visu behind a reverse proxy, the reverse proxy must strip the path prefix and store it in the X-Forwarded-Prefix header, which is done by the Traefik stripprefix middleware automatically. This ensures that the voraus 3D Visu handles both: external requests via path prefix and internal requests without path prefixes.

Check the Docker Compose File and the Traefik Configuration File for more information.

Open the Example in VS Code

Open the folder /examples/reverse-proxy/ in VS Code, press Ctrl + Shift + P and select Dev Containers: Rebuild and Reopen in Container as shown in the figure below. It takes a moment for the dev container to be started.

In VS Code, press Ctrl + Shift + P and search for Simple Browser: Show, enter localhost:8077/cloud/visu/ and press Enter to display the 3D visualization as shown in Fig. 64.

Empty 3D visualization in the web browser

Fig. 64 Empty 3D visualization hosted at localhost:8077/cloud/visu/

Load a Model of the Box

The Python file reverse_proxy.py loads the 3D model of a box into the 3D visualization.

"""Example for using a reverse proxy."""

from pathlib import Path

from voraus_3d_visu import Visu

visu = Visu("http://voraus-3d-visu/", clear_all=True)
model = Path(__file__).parent / "box.glb"


if __name__ == "__main__":
    with visu.connection():
        box = visu.add_model(model, position=[0, 0, 0])

Open a terminal in VS Code and start the reverse_proxy.py Python script with the following command:

python reverse_proxy.py

The box will appear in the 3D visualization in the web browser as shown in Fig. 65.

Loaded box in the 3D visualization in the web browser

Fig. 65 Loaded box in the 3D visualization hosted at localhost:8077/cloud/visu/

Rotate and Move the Box

After the box has been loaded, the Python script reverse_proxy.py waits until you press Enter.

        input("Press enter to move and rotate the box.")
        visu.update(
            box.position.x(0.3),
            box.rotation.z(1.57),
        )

After you have pressed Enter, the box is moved in the x-direction and rotated around the z-axis, Fig. 66.

Translated and rotated box in the 3D visualization as result of this example

Fig. 66 Translated and rotated box in the 3D visualization hosted at localhost:8077/cloud/visu/

Docker Compose File

Four services (Docker containers) are defined in the docker-compose.yml file. The CodeMeter service is required for licensing the software. The voraus 3D Visu service starts the web-based 3D visualization backend. The dev container service is intended for development with VS Code. The reverse-proxy service is the main entry point and handles the routing. The complete Docker Compose file is shown below.

docker-compose.yml

 1services:
 2  codemeter:
 3    hostname: codemeter
 4    image: docker.io/wibusystems/codemeter:9.10
 5    environment:
 6      CM_REMOTE_SERVER: host.docker.internal
 7    extra_hosts:
 8      - host.docker.internal:host-gateway
 9    networks:
10      - codemeter
11
12  voraus-3d-visu:
13    image: voraus.jfrog.io/docker/voraus-3d-visu:3.1.2 # x-release-please-version
14    hostname: voraus-3d-visu
15    labels:
16      - "traefik.enable=true"
17      - "traefik.docker.network=traefik"
18      - "traefik.http.services.visu.loadBalancer.server.port=80"
19      - "traefik.http.routers.visu.service=visu"
20      - "traefik.http.routers.visu.rule=PathPrefix(`/cloud/visu`)"
21      - "traefik.http.middlewares.visu-redirect.redirectregex.regex=^(.*)/cloud/visu$$"
22      - "traefik.http.middlewares.visu-redirect.redirectregex.replacement=$${1}/cloud/visu/"
23      - "traefik.http.middlewares.visu-stripprefix.stripprefix.prefixes=/cloud/visu"
24      - "traefik.http.routers.visu.middlewares=visu-redirect,visu-stripprefix"
25    environment:
26      CODEMETER_HOST: codemeter
27    depends_on:
28      codemeter:
29        condition: service_healthy
30    networks:
31      - codemeter
32      - traefik
33      - internal
34
35  devcontainer:
36    image: voraus.jfrog.io/docker/voraus-3d-visu-dev-container:3.1.2 # x-release-please-version
37    volumes:
38      - .:/home/localuser/workspace:cached
39    command: /bin/sh -c "while sleep 1000; do :; done"
40    environment:
41      CODEMETER_HOST: codemeter
42    depends_on:
43      codemeter:
44        condition: service_healthy
45    networks:
46      - codemeter
47      - internal
48
49  reverse-proxy:
50    image: traefik:v3.0.0
51    restart: always
52    volumes:
53      - /var/run/docker.sock:/var/run/docker.sock:ro
54      - ./traefik.yml:/etc/traefik/traefik.yml
55    ports:
56      - "8077:80"
57    networks:
58      - traefik
59
60networks:
61  traefik:
62    name: traefik
63  codemeter:
64  internal:

Traefik Configuration File

traefik.yml

 1global:
 2  checkNewVersion: false
 3  sendAnonymousUsage: false
 4
 5ping: {}
 6
 7entryPoints:
 8  web:
 9    address: ":80"
10
11log:
12  level: INFO
13
14accesslog:
15  addInternals: true
16
17providers:
18  file:
19    directory: /etc/traefik
20    watch: true
21  docker:
22    exposedByDefault: false