fea: Add HTTPS support

Dockerfile

@@ -1,6 +1,7 @@
 FROM sonicorg/sonic-client-web-base:v1.0.0
 
 COPY nginx.conf /etc/nginx/nginx.conf
+COPY nginx-https.conf /etc/nginx/nginx-https.conf
 COPY dist/  /usr/share/nginx/html/
 COPY replace.sh /
 RUN chmod 777 /replace.sh

nginx-https.conf

@@ -0,0 +1,58 @@
+worker_processes  1;
+
+events {
+	worker_connections  1024;
+}
+
+http {
+	default_type  application/octet-stream;
+	include       /etc/nginx/mime.types;
+	client_max_body_size 10G;
+	sendfile        on;
+	client_header_timeout 3600;
+	client_body_timeout 3600;
+	keepalive_timeout  3600;
+	proxy_send_timeout  3600;
+	proxy_read_timeout  3600;
+	proxy_connect_timeout 3600;
+
+	server {
+		listen 80;
+		server_name localhost;
+		return 301 https://$host$request_uri;
+	}
+
+	server {
+		listen 443 ssl;
+		server_name  localhost;
+
+		ssl_certificate /etc/nginx/certs/cert.crt;
+		ssl_certificate_key /etc/nginx/certs/cert.key;
+		ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
+		ssl_ciphers HIGH:!aNULL:!MD5;
+
+		location / {
+			root /usr/share/nginx/html;
+			index  index.html index.htm;
+			try_files $uri $uri/ /index.html;
+		}
+
+		location /server/ {
+			proxy_pass http://sonic-server-gateway:3000/;
+			proxy_http_version 1.1;
+			proxy_set_header Upgrade $http_upgrade;
+			proxy_set_header Connection "upgrade";
+		}
+		location /server/v3/api-docs/swagger-config {
+			#WORKAROUND fixed knife4j doc base path
+			return 200 '{"configUrl":"/server/v3/api-docs/swagger-config","oauth2RedirectUrl":"","operationsSorter":"alpha","tagsSorter":"alpha","urls":[{"name":"sonic-server-controller","serviceName":"sonic-server-controller","url":"/server/api/controller/v3/api-docs?group=default","contextPath":"/server/api/controller","order":1},{"name":"sonic-server-folder","serviceName":"sonic-server-folder","url":"/server/api/folder/v3/api-docs?group=default","contextPath":"/server/api/folder","order":2}],"validatorUrl":""}';
+		}
+
+		location /chrome/ {
+			proxy_pass http://localhost:9222/;
+			proxy_http_version 1.1;
+			proxy_set_header Upgrade $http_upgrade;
+			proxy_set_header Connection "upgrade";
+		}
+	}
+}

replace.sh

@@ -1,4 +1,14 @@
 nohup google-chrome --remote-debugging-address=0.0.0.0 --remote-debugging-port=9222 --no-sandbox --disable-dev-shm-usage --headless --disable-gpu  >/dev/null 2>&1 &
 sed -i "s/SONIC_SERVER_HOST/${SONIC_SERVER_HOST}/g" /usr/share/nginx/html/assets/*.js
 sed -i "s/SONIC_SERVER_PORT/${SONIC_SERVER_PORT}/g" /usr/share/nginx/html/assets/*.js
-/usr/sbin/nginx -c /etc/nginx/nginx.conf -g 'daemon off;'
+NGINXCONF=/etc/nginx/nginx.conf
+if [ "${SONIC_SERVER_HTTPS}" = "true" ]; then
+    NGINXCONF=/etc/nginx/nginx-https.conf
+    WSORIGINAL="ws:\/\/\${e}:\${t}\/websockets"
+    WSREPLACED="wss:\/\/${SONIC_SERVER_HOST}:${SONIC_SERVER_PORT}\/server\/websockets\/hub\/\${e}\/\${t}"
+    PROTORIGINAL="\`http:\/\/\`"
+    PROTREPLACED="\`https:\/\/\`"
+    sed -i "s/$PROTORIGINAL/$PROTREPLACED/g" /usr/share/nginx/html/assets/*.js
+    sed -i "s/$WSORIGINAL/$WSREPLACED/g" /usr/share/nginx/html/assets/*.js
+fi
+/usr/sbin/nginx -c $NGINXCONF -g 'daemon off;'

src/config/sysdefines.js

@@ -0,0 +1,12 @@
+export default class SysDefines {
+
+    getWebProtocol() {
+        // Replace to return "https://" for HTTPS Support
+        return `http://`;
+    }
+
+    getWebsocketUrl(host, port) {
+        // Replace to return "wss://SONIC_SERVER_HOST:SONIC_SERVER_PORT/server/websockets/hub/${host}/${port}" for HTTPS Support
+        return `ws://${host}:${port}/websockets`;
+    }
+}

src/http/axios.js

@@ -20,7 +20,9 @@ import qs from 'qs';
 import { ElMessage } from 'element-plus';
 import { i18n, $tc } from '@/locales/setupI18n';
 import { router } from '../router/index.js';
+import SysDefines from '@/config/sysdefines';
 
+let sysDef = new SysDefines();
 let baseURL = '';
 if (process.env.NODE_ENV === 'development') {
   baseURL = 'http://localhost:3000/server/api';
@@ -30,9 +32,10 @@ if (process.env.NODE_ENV === 'production') {
 }
 const $http = axios.create();
 baseURL = baseURL.replace(':80/', '/');
+baseURL = baseURL.replace('http://', sysDef.getWebProtocol());
 $http.defaults.baseURL = baseURL;
 // $http.defaults.timeout = 20000;
-$http.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
+// $http.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
 $http.defaults.withCredentials = true;
 $http.defaults.paramsSerializer = (params) =>
   qs.stringify(params, { arrayFormat: 'brackets' });

src/views/RemoteEmulator/AndroidRemote.vue

@@ -72,7 +72,7 @@ import {
 } from '@element-plus/icons';
 
 import { useI18n } from 'vue-i18n';
-
+import SysDefines from '@/config/sysdefines';
 import AudioProcessor from '@/lib/audio-processor';
 import wifiLogo from '@/assets/img/wifi.png';
 import RenderDeviceName from '../../components/RenderDeviceName.vue';
@@ -496,17 +496,20 @@ const setImgData = () => {
   };
   isShowImg.value = true;
 };
+
+const sysDef = new SysDefines();
 const openSocket = (host, port, key, udId) => {
   if ('WebSocket' in window) {
+    baseUrl = sysDef.getWebsocketUrl(host, port);
     //
     websocket = new WebSocket(
-      `ws://${host}:${port}/websockets/android/${key}/${udId}/${localStorage.getItem(
+      `${baseUrl}/android/${key}/${udId}/${localStorage.getItem(
         'SonicToken'
       )}`
     );
     //
     __Scrcpy = new Scrcpy({
-      socketURL: `ws://${host}:${port}/websockets/android/screen/${key}/${udId}/${localStorage.getItem(
+      socketURL: `${baseUrl}/android/screen/${key}/${udId}/${localStorage.getItem(
         'SonicToken'
       )}`,
       node: 'scrcpy-video',
@@ -517,7 +520,7 @@ const openSocket = (host, port, key, udId) => {
     changeScreenMode(screenMode.value, 1);
     //
     terminalWebsocket = new WebSocket(
-      `ws://${host}:${port}/websockets/android/terminal/${key}/${udId}/${localStorage.getItem(
+      `${baseUrl}/android/terminal/${key}/${udId}/${localStorage.getItem(
         'SonicToken'
       )}`
     );
@@ -1650,9 +1653,10 @@ const getDeviceById = (id) => {
 let audioPlayer = null;
 const isConnectAudio = ref(false);
 const initAudioPlayer = () => {
+  baseUrl = sysDef.getWebsocketUrl(agent.value.host, agent.value.port);
   audioPlayer = new AudioProcessor({
     node: 'audio-player',
-    wsUrl: `ws://${agent.value.host}:${agent.value.port}/websockets/audio/${agent.value.secretKey}/${device.value.udId}`,
+    wsUrl: `${baseUrl}/audio/${agent.value.secretKey}/${device.value.udId}`,
     onReady() {
       isConnectAudio.value = true;
     },

src/views/RemoteEmulator/IOSRemote.vue

@@ -69,6 +69,7 @@ import {
   InfoFilled,
 } from '@element-plus/icons';
 import { useI18n } from 'vue-i18n';
+import SysDefines from '@/config/sysdefines';
 import PackageList from '@/components/PackageList.vue';
 import RenderDeviceName from '../../components/RenderDeviceName.vue';
 import PocoPane from '../../components/PocoPane.vue';
@@ -490,20 +491,22 @@ const setImgData = (data) => {
   };
   isShowImg.value = true;
 };
+const sysDef = new SysDefines();
 const openSocket = (host, port, key, udId) => {
   if ('WebSocket' in window) {
+    baseUrl = sysDef.getWebsocketUrl(host, port);
     websocket = new WebSocket(
-      `ws://${host}:${port}/websockets/ios/${key}/${udId}/${localStorage.getItem(
+      `${baseUrl}/ios/${key}/${udId}/${localStorage.getItem(
         'SonicToken'
       )}`
     );
     terminalWebsocket = new WebSocket(
-      `ws://${host}:${port}/websockets/ios/terminal/${key}/${udId}/${localStorage.getItem(
+      `${baseUrl}/ios/terminal/${key}/${udId}/${localStorage.getItem(
         'SonicToken'
       )}`
     );
     screenWebsocket = new WebSocket(
-      `ws://${host}:${port}/websockets/ios/screen/${key}/${udId}/${localStorage.getItem(
+      `${baseUrl}/ios/screen/${key}/${udId}/${localStorage.getItem(
         'SonicToken'
       )}`
     );