fix: nest 采用 socket.io v4 版本，生产环境下前端连接 socket.io 报错

fix #190
cumt-robin · Dec 17, 2024 · 373b310 · 373b310
1 parent 1a66c0e
commit 373b310
Show file tree

Hide file tree

Showing 22 changed files with 127 additions and 271 deletions.
diff --git a/.changeset/funny-walls-rescue.md b/.changeset/funny-walls-rescue.md
@@ -0,0 +1,8 @@
+---
+"express-server": patch
+"webpack-vue3": patch
+"cra-react18": patch
+"vite-vue3": patch
+---
+
+fix: nest 采用 socket.io v4 版本，生产环境下前端连接 socket.io 报错
diff --git a/Dockerfile.dev b/Dockerfile.dev
@@ -7,16 +7,16 @@ FROM base AS build
 COPY . /usr/src/app
 WORKDIR /usr/src/app
 RUN --mount=type=cache,id=pnpm,target=/pnpm/store pnpm install --frozen-lockfile
-# RUN pnpm deploy --filter=vite-vue3 /app/vite-vue3
+RUN pnpm deploy --filter=vite-vue3 /app/vite-vue3
 # RUN pnpm deploy --filter=cra-react18 /app/cra-react18
 RUN pnpm deploy --filter=express-server /app/express-server
 # RUN pnpm deploy --filter=nest-server /app/nest-server
 
-# FROM base AS vite-vue3-frontend
-# COPY --from=build /app/vite-vue3 /usr/src/fullstack-blog/app/vite-vue3
-# WORKDIR /usr/src/fullstack-blog/app/vite-vue3
-# EXPOSE 3000
-# CMD ["pnpm", "dev"]
+FROM base AS vite-vue3-frontend
+COPY --from=build /app/vite-vue3 /usr/src/fullstack-blog/app/vite-vue3
+WORKDIR /usr/src/fullstack-blog/app/vite-vue3
+EXPOSE 3000
+CMD ["pnpm", "dev"]
 
 # FROM base AS cra-react18-frontend
 # COPY --from=build /app/cra-react18 /usr/src/fullstack-blog/app/cra-react18
@@ -27,9 +27,6 @@ RUN pnpm deploy --filter=express-server /app/express-server
 FROM base AS express-backend
 RUN npm i -g pm2-dev
 COPY --from=build /app/express-server /usr/src/fullstack-blog/app/express-server
-WORKDIR /usr/src/fullstack-blog/app/express-server
-EXPOSE 8002
-CMD ["pnpm", "docker-dev"]
 
 # FROM base AS nestjs-backend
 # COPY --from=build /app/nest-server /usr/src/fullstack-blog/app/nest-server
diff --git a/README.md b/README.md
@@ -2,6 +2,8 @@
 
 Hello，这是[Vue3+TS+Node打造个人博客](https://juejin.cn/column/7177402980180688952)开源全栈项目，最初采用 Vue3 + Vue CLI + Typescript + NodeJS Express 实现，目前已经涵盖了多种技术实现，无论你是 Webpack/Vite 使用者，或者是 Vue/React 爱好者，这里都有你想要的内容，你甚至可以从这里学会多种框架的使用。
 
+除了最初采用的 Express，后端目前也提供了 NestJS 实现，并且后续会主要维护 NestJS 版本。
+
 如果你是一个前端开发者，还不太清楚后端开发或者全栈的概念，请一定不要错过这个项目，我相信它会对你的工作或者求职有所帮助！
 
 本项目最新代码采用 pnpm monorepo 架构搭建，工程化能力和开发体验都比较不错，目前支持：
@@ -43,8 +45,8 @@ Hello，这是[Vue3+TS+Node打造个人博客](https://juejin.cn/column/71774029
 
 后端部分：
 
-- [x] Express + MySQL: 见目录 app/express-server
-- [ ] NestJS 开发中...
+- [x] NestJS + MySQL + TypeORM + class-validator: 见目录 app/nest-server
+- [x] Express + MySQL + express-validator: 见目录 app/express-server
 
 ## Features
 

diff --git a/app/cra-react18/.env b/app/cra-react18/.env
@@ -1,2 +1,2 @@
 REACT_APP_BASE_API=/api
-REACT_APP_SOCKET_SERVER=http://localhost:8002
+REACT_APP_SOCKET_SERVER=http://127.0.0.1:8012
diff --git a/app/cra-react18/package.json b/app/cra-react18/package.json
@@ -33,7 +33,7 @@
     "react-redux": "^9.1.2",
     "react-refresh": "^0.11.0",
     "react-router-dom": "^6.24.1",
-    "socket.io-client": "^2.5.0",
+    "socket.io-client": "^4.8.1",
     "styled-components": "^6.1.11",
     "tailwindcss": "^3.4.6",
     "web-vitals": "^2.1.4"

diff --git a/app/cra-react18/src/setupProxy.js b/app/cra-react18/src/setupProxy.js
@@ -4,7 +4,7 @@ module.exports = function (app) {
     app.use(
         "/api",
         createProxyMiddleware({
-            target: "http://express-server:8002",
+            target: "http://127.0.0.1:8012",
             changeOrigin: true,
             pathRewrite: {
                 "^/api": "",

diff --git a/app/express-server/.env b/app/express-server/.env
diff --git a/app/express-server/package.json b/app/express-server/package.json
@@ -29,7 +29,7 @@
         "nodemailer": "^4.6.8",
         "openai": "^3.1.0",
         "serve-favicon": "~2.4.5",
-        "socket.io": "^2.1.1",
+        "socket.io": "^4.8.1",
         "svg-captcha": "^1.3.12",
         "xss": "^1.0.9"
     },

diff --git a/app/express-server/process-dev.json b/app/express-server/process-dev.json
@@ -1,14 +1,14 @@
-{
-    "apps": [
-        {
-            "name": "blog",
-            "script": "src/app.js",
-            "env": {
-                "NODE_ENV": "development",
-                "PORT": 8002
-            },
-            "watch": true,
-            "ignore_watch": ["node_modules", "*.md"]
-        }
-    ]
-}
+{
+    "apps": [
+        {
+            "name": "blog",
+            "script": "src/app.js",
+            "env": {
+                "NODE_ENV": "development",
+                "PORT": 8002
+            },
+            "watch": true,
+            "ignore_watch": ["node_modules", "*.md"]
+        }
+    ]
+}
diff --git a/app/express-server/src/utils/ws.js b/app/express-server/src/utils/ws.js
@@ -91,7 +91,19 @@ function broadcastExceptSelf(socket, param) {
 }
 
 function startWs(server) {
-    io = socketIo(server);
+    io = socketIo(server, {
+        cors: {
+            origin: (origin, callback) => {
+                const list = process.env.WEB_SOCKET_WHITE_LIST.split(",");
+                if (list.includes(origin)) {
+                    callback(null, true);
+                } else {
+                    callback(new Error("Not allowed by CORS"));
+                }
+            },
+            credentials: true,
+        },
+    });
     chatRoomHandler();
 }
 

diff --git a/app/vite-vue3/.env.development b/app/vite-vue3/.env.development
@@ -1,2 +1,2 @@
 # 开发环境变量
-VITE_APP_SOCKET_SERVER=http://localhost:8012
+VITE_APP_SOCKET_SERVER=http://127.0.0.1:8012
diff --git a/app/vite-vue3/package.json b/app/vite-vue3/package.json
@@ -28,7 +28,7 @@
     "mitt": "^3.0.1",
     "pinia": "^2.1.7",
     "qs": "^6.12.1",
-    "socket.io-client": "^2.1.1",
+    "socket.io-client": "^4.8.1",
     "vue": "^3.4.29",
     "vue-router": "^4.0.16"
   },

diff --git a/app/vite-vue3/vite.config.ts b/app/vite-vue3/vite.config.ts
@@ -12,7 +12,7 @@ export default defineConfig({
         port: 3000,
         proxy: {
             "/api": {
-                target: "http://127.0.0.1:8012",
+                target: "http://127.0.0.1:8002",
                 changeOrigin: true,
                 rewrite: (path) => path.replace(/^\/api/, ""),
             },

diff --git a/app/webpack-vue3/.env.development b/app/webpack-vue3/.env.development
@@ -1,2 +1,2 @@
 # 开发环境变量
-VUE_APP_SOCKET_SERVER=http://localhost:8002
+VUE_APP_SOCKET_SERVER=http://127.0.0.1:8012
diff --git a/app/webpack-vue3/package.json b/app/webpack-vue3/package.json
@@ -30,7 +30,7 @@
         "mermaid": "^10.9.1",
         "mitt": "^3.0.1",
         "qs": "^6.10.1",
-        "socket.io-client": "^2.1.1",
+        "socket.io-client": "^4.8.1",
         "vue": "~3.3.13",
         "vue-router": "~4.0.8",
         "vuex": "~4.0.1"

diff --git a/app/webpack-vue3/vue.config.docker.js b/app/webpack-vue3/vue.config.docker.js
@@ -25,7 +25,7 @@ module.exports = {
         open: true,
         proxy: {
             "/api": {
-                target: "http://express-server:8002",
+                target: "http://nest-server:8012",
                 changeOrigin: true,
                 pathRewrite: {
                     "^/api": "",

diff --git a/app/webpack-vue3/vue.config.js b/app/webpack-vue3/vue.config.js
@@ -24,7 +24,7 @@ module.exports = {
         open: true,
         proxy: {
             "/api": {
-                target: "http://express-server:8002",
+                target: "http://127.0.0.1:8012",
                 changeOrigin: true,
                 pathRewrite: {
                     "^/api": "",

diff --git a/build-dev-images.sh b/build-dev-images.sh
@@ -1,8 +1,8 @@
 #!/bin/bash
 
-# docker build . -f Dockerfile.dev --target vite-vue3-frontend --tag fullstack-blog-vite-vue3:dev
+docker build . -f Dockerfile.dev --target vite-vue3-frontend --tag fullstack-blog-vite-vue3:dev
 # docker build . -f Dockerfile.dev --target cra-react18-frontend --tag fullstack-blog-cra-react18:dev
-# docker build . -f Dockerfile.dev --target express-backend --tag fullstack-blog-express:dev
+docker build . -f Dockerfile.dev --target express-backend --tag fullstack-blog-express:dev
 # docker build . -f Dockerfile.dev --target nestjs-backend --tag fullstack-blog-nestjs:dev
 
 echo "build dev images successfully."
diff --git a/compose-dev.yml b/compose-dev.yml
@@ -34,19 +34,20 @@ services:
 #       - CHOKIDAR_USEPOLLING=true
 #       - DANGEROUSLY_DISABLE_HOST_CHECK=true
 
-  # vite-vue3:
-  #   image: fullstack-blog-vite-vue3:dev
-  #   ports:
-  #     - "3000:3000"
-  #   volumes:
-  #     - ./app/vite-vue3/src:/usr/src/fullstack-blog/app/vite-vue3/src
-  #     - ./app/vite-vue3/vite.config.docker.ts:/usr/src/fullstack-blog/app/vite-vue3/vite.config.ts
-  #     - ./app/vite-vue3/index.html:/usr/src/fullstack-blog/app/vite-vue3/index.html
-  #     - ./app/vite-vue3/public:/usr/src/fullstack-blog/app/vite-vue3/public
-  #     - ./.prettierrc.json:/usr/src/fullstack-blog/.prettierrc.json
-  #     - ./.prettierignore:/usr/src/fullstack-blog/.prettierignore
-  #   environment:
-  #     - NODE_ENV=development
+  vite-vue3:
+    image: fullstack-blog-vite-vue3:dev
+    ports:
+      - "3000:3000"
+    volumes:
+      - ./app/vite-vue3/src:/usr/src/fullstack-blog/app/vite-vue3/src
+      - ./app/vite-vue3/vite.config.docker.ts:/usr/src/fullstack-blog/app/vite-vue3/vite.config.ts
+      - ./app/vite-vue3/index.html:/usr/src/fullstack-blog/app/vite-vue3/index.html
+      - ./app/vite-vue3/public:/usr/src/fullstack-blog/app/vite-vue3/public
+      - ./.prettierrc.json:/usr/src/fullstack-blog/.prettierrc.json
+      - ./.prettierignore:/usr/src/fullstack-blog/.prettierignore
+    environment:
+      - NODE_ENV=development
+      - VITE_APP_SOCKET_SERVER=http://express-server:8002
 
   express-server:
     restart: always
@@ -60,6 +61,9 @@ services:
       - PORT=8002
       - MYSQL_ROOT_PASSWORD=${MYSQL_ROOT_PASSWORD}
       - MYSQL_DATABASE=${MYSQL_DATABASE}
+      - WEB_SOCKET_WHITE_LIST=http://localhost:3000
+    working_dir: /usr/src/fullstack-blog/app/express-server
+    command: ["pnpm", "docker-dev"]
 
 #   nestjs-server:
 #     restart: always

diff --git a/docker-ops.md b/docker-ops.md
@@ -12,6 +12,31 @@
 |       |-- init.sql
 ```
 
+## Docker 开发环境
+
+前端均支持 Docker 开发环境。
+
+后端暂时只支持 express-server。nest-server 由于文件更新检测问题，暂时无法支持 Docker 开发环境，后续再投入时间研究补充。
+
+构建镜像：
+
+```shell
+sh build-dev-images.sh
+```
+
+启动服务：
+
+```shell
+docker compose --env-file .env.docker.local -f compose-dev.yml up -d
+```
+
+其中的`.env.docker.local`文件内容参照下面内容：
+
+```
+MYSQL_ROOT_PASSWORD=xxx
+MYSQL_DATABASE=blog_db
+```
+
 ## Docker 生产环境
 
 1. 构建镜像

diff --git a/legacy-ops.md b/legacy-ops.md
@@ -11,7 +11,7 @@ pnpm install
 由于不是使用 docker compose，需要修改`vite.config.ts`中的`server`配置：
 
 ```
-target: "http://localhost:8002",
+target: "http://127.0.0.1:8012",
 ```
 
 启动项目：