Introduction
Although HOOPS Communicator SC server can be configured with HTTPS server like this article: HOOPS Communicator server with HTTPS (SSL) , there is a non-standard port: 11182 that is open to the internet, posing a security risk. We’ll need to close it by restricting the non-standard port to the private environment. It’s important the user minimizes exposure to the public zone.
This article explains another way to configure SC server with HTTPS server using reverse proxy of nginx.
If you haven’t created HTTPS server, please refer this article: How to setup HTTPS server with AWS
SDK / OS / server in use (version)
- HOOPS Communicator (2024.4.0)
- AWS Ubuntu Server (24.04 LTS)
- NGINX (1.24.0)
Instruction
HOOPS Communicator server installation
Place the folders and files required for the HC server from the SDK.
Here is an illustration of how to configure the server:
+ var
+ www
+ html
+ demo-app
+ hoops-web-viewer.mjs
+ engine.esm.js
+ engine.esm.wasm
+ sample.html
+ server
+ 3rd_party
+ sc_models
- Transfer the
tar.gzfile of HOOPS Communicator for Linux to the/tmpfolder of the virtual server via SCP - Extract the
tar.gzfile
cd /tmp
tar -zxvf HOOPS_Communicator_202x.x.x_Linux.tar.gz
- Allocate the necessary folders in a root folder of nginx
cd HOOPS_Communicator_202x.x.x/
sudo cp -r 3rd_party/ server/ /var/www/
sudo cp -r quick_start/converted_models/standard/sc_models/ /var/www/
cd web_viewer/
sudo cp -r demo-app hoops-web-viewer.mjs engine.esm.js engine.esm.wasm /var/www/html/
HOOPS Communicator server setup
- Open
Config.jsfor HOOPS Communicator Stream Cache Server
sudo vi /var/www/server/node/Config.js
- Set model search directory
modelDirs: [
"./sc_models",
],
- Save and quit:
:wq
Note that it is not necessary to set SSL settings of Config.js if reverse proxy is used. WSS requests are routed through and handled as WS requests by reverse proxy of nginx before it reaches the SC server.
Edit inbound rules
- Edit the inbound rules of the virtual server so that HTTP (80), HTTPS (443) and SSH (22) ports are opened to the internet (Delete 11182 port)
Setting reverse proxy
- Open the nginx setting file
sudo vi /etc/nginx/sites-enabled/default
- Add the following location under existing location / {…}
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 and quit:
:wq
Add mjs extension to MIME types of nginx
Adding mjs extension to MIME types since there’s no entry for the mjs extension in nginx’s default file type.
- Open the MIME types setting file
sudo vi /etc/nginx/mime.types
- Add
mjsextension to the js line
- Save and quit:
:wq
Note that if hoops-web-viewer.mjs is loaded without adding the mjs file type, the following error occurs:
Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "application/octet-stream".
Reload nginx
- Reload nginx to apply the changed settings
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 /var/www/html/sample.html
sudo vi /var/www/html/sample.html
- Implement the following HTML
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8"/>
<title>Simple</title>
<style>
#container {
width:600px;
height:480px;
position:relative;
border: thin solid #000000;
}
</style>
<script type="importmap">
{
"imports": {
"@hoops/web-viewer": "/hoops-web-viewer.mjs"
}
}
</script>
<script type="module">
import {WebViewer} from "@hoops/web-viewer";
WebViewer.defaultEnginePath = "./";
</script>
<script type="module">
import { WebViewer } from "@hoops/web-viewer";
window.onload = function () {
const endpoint = "wss://" + window.location.hostname + "/wsproxy/11182";
const viewer = new WebViewer({
containerId: "container",
model: "microengine",
endpointUri: endpoint,
enginePath: "./"
});
viewer.start();
};
</script>
</head>
<body>
<div id="container"></div>
</body>
</html>
Note that 11180 port is specified with /wsproxy/ location. This /wsproxy/ location will be rewritten as ws://YOUR_DOMAIN_NAME:11182 by reverse proxy of nginx.
- Save and quit:
:wq - Start the HOOPS Communicator server
sudo sh /var/www/server/node/start_server.sh
- Open
https://YOUR_DOMAIN_NAME/sample.htmlusing your web browser to verify you have configured the proxy connections correctly
Edit sample viewer
If you want to use demo-app/index.html with reverse proxy, it is necessary to edit Router.js
- Open Router.js
sudo vi /var/www/html/demo-app/web-viewer-demo/src/app/Router.js
- Edit
:to/wsproxy/of thewsUriRootfunction
- Save and quit:
:wq - Start the HOOPS Communicator server
sudo sh /var/www/server/node/start_server.sh
- Open
https://YOUR_DOMAIN_NAME/demo-app/index.html?viewer=csr&model=arboleda&wsPort=11182using your web browser
