How to Set Up a HOOPS Visualize Web Server on AWS with a Reverse Proxy

Toshi-TS3D · April 11, 2022, 4:00am

Introduction

In this article, we’ll describe how to set up a HOOPS Visualize Web Stream Cache Server on an Ubuntu Server 24.04 EC2 instance in AWS, using Nginx as a proxy traffic to the required ports for streaming data to the HOOPS Visualize Web Web Viewer.

Instructions

Create an Ubuntu EC2 instance

Create an Ubuntu Server 24.04 LTS EC2 instance in AWS.
Configure the security group inbound rules to allow TCP connections on HTTP port 80.

image1320×468 34.7 KB
Log in to the EC2 instance using SSH.

Ubuntu environment and Nginx setup

Install and upgrade the required packages.

# Update the package list and upgrade installed packages
sudo apt-get update && sudo apt-get upgrade -y

# Install the required system packages
sudo apt-get install -y \
    linux-headers-generic \
    linux-headers-virtual \
    linux-image-virtual \
    linux-virtual

# Install additional required packages
sudo apt-get install -y \
    linux-source \
    linux-image-extra-virtual \
    build-essential \
    xserver-xorg \
    mesa-utils \
    libgl1 \
    libglu1-mesa \
    unzip \
    xinit

# Install the kernel header package for the current kernel version
sudo apt-get install -y linux-headers-$(uname -r)

Install Nginx
```
sudo apt-get install -y nginx
```
Open the virtual server’s public IP address in your preferred web browser and verify that the default Nginx welcome page appears.

img_041152×387 129 KB

HOOPS Visualize Web Server installation

Copy the folders and files required for the HOOPS Web server from the HOOPS Visualize Web SDK.

The following example illustrates how to configure the server environment.

var/
 └── www/
      ├── html/
      │    ├── demo-app/
      │    ├── hoops-web-viewer.mjs
      │    ├── engine.esm.wasm
      │    └── sample.html
      ├── server/
      ├── 3rd_party/
      └── sc_models/

Transfer the HOOPS Visualize Web for Linux tar.gz package to the /tmp directory on the virtual server using SCP.

Extract the tar.gz package.

cd /tmp
tar -zxvf HOOPS_Visualize_Web_202x.x.x_Linux_x86-64.tar.gz

Copy the required files.

# Move to the extracted SDK directory
cd HOOPS_Visualize_Web_202x.x.x/

# Copy the server and third-party folders
sudo cp -r 3rd_party/ server/ /var/www/

# Copy sample Stream Cache models
sudo cp -r quick_start/converted_models/standard/sc_models/ /var/www/

# Copy the Web Viewer source files
cd web_viewer/
sudo cp -r demo-app hoops-web-viewer.mjs engine.esm.wasm /var/www/html/

HOOPS Visualize Web server setup

Open the Config.js file for the HOOPS Visualize Web Stream Cache Server.
```
sudo vi /var/www/server/node/Config.js
```

Configure the model search directory.

    modelDirs: [
        "./sc_models",
    ],

Save the file and exit the editor.
```
:wq
```

Add the `.mjs` Extension to the Nginx MIME Types

Since the .mjs extension is not included in the default Nginx MIME type configuration, you must add it manually.

Open the MIME types configuration file.
```
sudo vi /etc/nginx/mime.types
```
Add the mjs extension to the JavaScript MIME type entry.

Change:
```
application/javascript  js;
```
To:
```
application/javascript  js mjs;
```
Save the file and exit the editor.
```
:wq
```
Restart Nginx to apply the changes.
```
sudo systemctl restart nginx
```
If the .mjs MIME type is not configured correctly, loading hoops-web-viewer.mjs may result in the following error:
"Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of “application/octet-stream”.

Edit inbound rules

Edit the security group inbound rules for the EC2 instance to allow TCP connections on port 11182.

image1318×568 44.8 KB

Start the HOOPS Visualize Web server

Start the HOOPS Visualize Web server.

cd /var/www/server/node
../../3rd_party/node/bin/node --expose-gc ./lib/Startup.js

Open http://xxx.xxx.xxx.xxx/demo-app/index.html?wsPort=11182&instance=microengine (xxx.xxx.xxx.xxx is virtual server’s public IP address) using a supported browser to verify you have installed and configured HOOPS Visualize Web correctly:

img_071358×742 120 KB

Setting reverse proxy

The HOOPS Visualize Web server is now configured. However, the non-standard port 11182 is still exposed to the internet, which may pose a security risk.

To improve security, remove the non-standard port 11182 from the security group inbound rules so that it is no longer publicly accessible. Minimizing exposure to the public internet is strongly recommended.

Remove port 11182 from the allowed inbound rules in the security group.

image1317×457 30.1 KB

If you reload the web browser, the following error appears because port 11182 is no longer publicly accessible:
“Unable to load ‘microengine’: WebSocket connection failed.”
Stop the HOOPS Visualize Web Server by pressing the Enter key in the SSH terminal.

Open the Nginx configuration file.

sudo vi /etc/nginx/sites-enabled/default

Add the following location block below the existing location / { ... } block.

        location / {
                # First attempt to serve request as file, then
                # as directory, then fall back to displaying a 404.
                try_files $uri $uri/ =404;
        }
        location /wsproxy/ {
            rewrite /wsproxy/([^/]+) / break;
            proxy_pass http://127.0.0.1:$1;
            proxy_http_version 1.1;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection "upgrade";
        }

Save the file and exit the editor.
```
:wq
```
Reload the Nginx configuration.
```
sudo service nginx reload
```

Minimal sample viewer creation

Configure a proxy connection using a minimal HTML sample.

Create a sample HTML and open

sudo touch /HC/html/sample.html
sudo vi /HC/html/sample.html

Implement the following HTML

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>Simple</title>
         <style>
            #container {
                width:600px;
                height:480px;
                position:relative;
                border: thin solid #000000;
            }
        </style>	
       
        <script type="text/javascript" src="src/js/hoops_web_viewer.js"></script>
        
        <script type="text/javascript">
            let viewer;
            window.onload = function () {
                const endpoint = "ws://" + window.location.hostname + "/wsproxy/11182";
                viewer = new Communicator.WebViewer({
                    containerId: "container",
                    model: "microengine",
                    endpointUri: endpoint,
                });
                viewer.start();
            };
        </script>
    </head>
    <body>
        <div id="container"></div>
    </body>
</html>

Save the file and exit the editor.
```
:wq
```

Start the HOOPS Visualize Web Server

cd /var/www/server/node
../../3rd_party/node/bin/node --expose-gc ./lib/Startup.js

Open http://xxx.xxx.xxx.xxx/sample.html using your web browser to verify you have configured the proxy connections correctly

img_161052×722 86.9 KB

Here is an illustration after applying the proxy connections

Configure the HOOPS Visualize Web Server to Start Automatically

Create a systemd service so that the HOOPS Visualize Web Server starts automatically when the system boots.

Create and open the service definition file.

sudo touch /etc/systemd/system/onboot.service
sudo vi /etc/systemd/system/onboot.service

Add the following service configuration.

[Unit]
Description=auto start commands in /etc/onboot.sh on boot
[Service]
Type=simple
ExecStart=/etc/onboot.sh
RemainAfterExit=yes
[Install]
WantedBy=multi-user.target

Save the file and exit the editor.
```
:wq
```

Create and open the startup shell script.

sudo touch /etc/onboot.sh
sudo chmod 0755 /etc/onboot.sh
sudo vi /etc/onboot.sh

Add the following startup command.

#!/bin/bash
cd /var/www/server/node
../../3rd_party/node/bin/node --expose-gc ./lib/Startup.js

Save the file and exit the editor.
```
:wq
```
Verify that the service has been registered correctly.
```
sudo systemctl list-unit-files --type=service | grep onboot.service
```
img_10795×133 4.84 KB
Enable the service to start automatically at boot time.
```
sudo systemctl enable onboot.service
```
Restart the virtual server and verify that the HOOPS Visualize Web Server starts automatically.
```
sudo systemctl status onboot.service
```
img_111003×486 25.1 KB
Reload the sample HTML page in your web browser to verify that the HOOPS Visualize Web Server starts correctly as a service.

Topic		Replies	Views
HOOPS Visualize Web HTTPS server with reverse proxy HOOPS Visualize Web knowledge-base , faq , how-to	1	931	July 23, 2024
How-To: Set up a reverse proxy with HOOPS Communicator and IIS HOOPS Visualize Web learn , knowledge-base , how-to , server	0	800	October 1, 2021
How to setup HTTPS server with AWS HOOPS Visualize Web knowledge-base , faq , how-to	0	783	March 7, 2023
Reverse Proxies in HOOPS Communicator HOOPS Visualize Web code , learn , knowledge-base	1	1042	June 26, 2023
HOOPS Envision Web HTTPS server using reverse proxy HOOPS Envision Web knowledge-base , faq , how-to	0	706	March 7, 2023