From 09f69781e3d09c744f591529c74a618ff19e721e Mon Sep 17 00:00:00 2001
From: Gesugao-san <gesugao.san@gmail.com>
Date: Tue, 13 Feb 2024 21:58:58 +0300
Subject: [PATCH] Complete research for HMR fix

---
 .vscode/tasks.json |  8 ++++++--
 Dockerfile         | 27 ++++++++++++++++++++-------
 docker-compose.yml | 17 ++++++++++++++---
 vite.config.js     | 27 ++++++++++++++++++++-------
 4 files changed, 60 insertions(+), 19 deletions(-)

diff --git a/.vscode/tasks.json b/.vscode/tasks.json
index 721b5bd..fa93887 100644
--- a/.vscode/tasks.json
+++ b/.vscode/tasks.json
@@ -44,8 +44,12 @@
         "image": "gesugaosan/proxima.fun",
         "containerName": "proxima.fun",
         "ports": [{
-          "containerPort": 8080,
-          "hostPort": 8080,
+          "containerPort": 80,
+          "hostPort": 80,
+          "protocol": "tcp",
+        },{
+          "containerPort": 443,
+          "hostPort": 443,
           "protocol": "tcp",
         }],
         "env": {
diff --git a/Dockerfile b/Dockerfile
index 05a84b5..5ce44f4 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -34,12 +34,7 @@ ENV NODE_ENV=production
 WORKDIR /usr/src/app
 
 ### Копируем файлы (при наличии).
-COPY [\
-  "package.json", \
-  "package-lock.json*", \
-  "npm-shrinkwrap.json*", \
-  "./"\
-]
+COPY ["package.json", "package-lock.json*", "npm-shrinkwrap.json*", "./"]
 
 ### Устанавливаем зависимости проекта.
 #RUN apt-get update && apt-get install -y nodejs npm && rm -rf /var/lib/apt/lists/*
@@ -54,7 +49,25 @@ RUN npm install --production --silent
 COPY . .
 
 ### Сообщаем Docker'у, что для работы нам нужен порт.
-EXPOSE 8080:8080
+
+### HTTP (1)
+EXPOSE 80:80/tcp
+
+### HTTP (2)
+#EXPOSE 8080:8080/tcp
+
+### WebSocket
+EXPOSE 443:443/tcp
+
+#
+#EXPOSE 3001:3000/tcp
+#EXPOSE 3000:3000/tcp
+
+### Vite ver. 5 default
+#EXPOSE 5173:5173/tcp
+
+### Vite (ver. <5) default
+#EXPOSE 24678:24678/tcp
 
 ### Устанавливаем владельцем node для рабочего каталога рекурсивно.
 RUN chown -R node /usr/src/app
diff --git a/docker-compose.yml b/docker-compose.yml
index 3ed1a18..6e25897 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -8,7 +8,7 @@
 # database or a cache. For examples, see the Awesome Compose repository:
 # https://github.com/docker/awesome-compose
 
-version: '3.4'
+version: '3.8'
 #name: proxima-fun
 
 services:
@@ -23,9 +23,20 @@ services:
       NODE_ENV: production
       WDS_SOCKET_PORT: 443
     ports:
-      - target: 8080
-        published: 8080
+      - target: 80
+        published: 80
+        protocol: tcp
         mode: host
+      - target: 443
+        published: 443
+        protocol: tcp
+        mode: host
+      #- 80:80
+      #- 8080:8080
+      #- 443:443
+      #- 3001:3000
+      #- 5173:5173
+      #- 24678:24678
 
 # The commented out section below is an example of how to define a PostgreSQL
 # database that your application can use. `depends_on` tells Docker Compose to
diff --git a/vite.config.js b/vite.config.js
index 3f52161..b0a6101 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -18,15 +18,28 @@ export default defineConfig({
     }
   },
 
+  clearScreen: false,
   server: {
-    host: true,
-    port: 8080,
-    https: false,
-    strictPort: true,
+    host: '0.0.0.0',  // OK
+    //host: true,  // OK
+    //host: 'localhost',  // NOT FOR PUBLIC
+    //port: 8080,  // CRITICAL
+    port: 80,  // CRITICAL
+    clientPort: 80,
+    //https: false,  // UNKNOWN
+    strictPort: true,  // OK
+    //hmr: false
     hmr: {
-      host: true,
-      protocol: 'wss',
-      clientPort: 443,
+      //host: 'localhost',  // CRITICAL, OK
+      //host: true,  // LOOP
+      //host: '0.0.0.0',  // LOOP
+      //protocol: 'ws',  // OK
+      //protocol: 'wss',  // LOOP
+      port: 443,  // OK
+      //Port: 443,  // OK
+      //port: 3000,
+      //clientPort: 3001,
+      clientPort: 443,  // LOOP
     },
   }
 })