带有 webpack + socket.io 的服务器/客户端应用程序

Question

我正在开发一个前端通过 socket.io 与后端通信的应用程序

现在我将它们放在两个单独的应用程序中，如下所示：

.
├──client
│  ├──src
│  │  └──index.js
│  ├──public 
│  │  └──index.html
│  ├──webpack.config.js
│  └──package.json
└──server
   ├──app.js
   └──package.json

./server/app.js 是这样的

const Express = require('express')();
const server = require('http').Server(Express);
const options = {
    cors: {
        origin: 'http://localhost:8080',
        methods: ['GET','POST'],
        credentials: true,
    },
};
const Socketio = require('socket.io')(server, options);

Socketio.on('connection', socket => {
    socket.on('do-something', () => {
        console.log('doing something...');
    });

});

server.listen(3000, () => {
    console.log('listening on port 3000');
});

./client/src/index.js 有这些行

const io = require('socket.io-client');
const socket = io('http://localhost:3000');

const someFunction = () => {
    socket.emit('do-something');
}

相当标准的东西。

现在我从两个终端窗口分别运行它们。所以基本上我有两台服务器为一个应用程序服务。这似乎不是正确的方法，所以我想尝试将它们合并到一个 webpack 应用程序中以进行部署。我怎么做？你如何在现实世界中设置这种东西？

我尝试在谷歌上搜索该主题，但找不到任何东西。如果您知道有明确解释的帖子，请分享链接。 Muchas gracias，祝你有美好的一天:)

Answer 1

我推荐：

1. 将 webpack.config.js 和 package.json 放在项目的根目录中。
2. ./server 中区分 app.js（导出 express 应用）和 server.js（监听某个端口）。
3. 使用npm-run-all 简化您的 package.json 脚本（提供命令 run-p 和 run-s）
4. 在项目的根目录中添加生产 ./server.js。

./package.json

  "scripts": {
    "dev": "run-p dev:*",
    "dev:server": "nodemon ./server/server.js",
    "dev:webpack": "webpack serve",
    "build:webpack": "webpack",
    "serve": "node ./server.js"
  }

./server/app.js

const Express = require('express')();
const app = require('http').Server(Express);

// Your app definition (socket.io, etc) ...

module.exports = app

./server/server.js

// Your api dev server

const app = require('./app')

app.listen(3000, () => {
    console.log('Dev server listening on port 3000');
});

./server.js

// Your prod server

const express = require('express')
const app = require('./server/app')

// Same of your api dev server, but your also serve your frontend build
// ./dist depends on webpack "output-path" parameter
app.use(express.static('./dist')) 

app.listen(3000, () => {
    console.log('Prod server listening on port 3000');
});

现在，您可以：

并行运行前端和后端

npm run dev

只运行前端

npm run dev:webpack

只运行后端

npm run dev:server

构建前端

npm run build:webpack

在生产中服务后端和前端（我建议使用pm2）

npm run serve

这种架构在我的项目中运行良好?。 例如，您可以轻松地将其扩展为使用 Typescript...

对不起，我的英语很接近。

我没有测试提供的代码，如果有任何错误，请见谅。

问候

Answer 2

好吧，我放弃了。我正在回答。

不要这样做。现在，合并这两个 repos 看起来很诱人，因为您使用相同的语言，并且客户端和服务器的某些依赖项可能相同。

但是当

• 您的老板说您必须将服务器部分移植到 Python/Java/Go/什么原因？
• 您想将客户端或服务器交给另一个团队吗？
• 您想开源客户端，但现在 git 历史记录中包含您所有（仍然是专有的）服务器代码？
• 您添加了 CI/CD 工作流，现在向客户端提交会启动服务器的管道，反之亦然？

注意这不是假设，我实际上已经看到大多数情况发生了。现在，您可能对所有这些问题都有很好的答案并决定无论如何都要做，但如果您不这样做，那就别管了：将客户端和服务器捆绑在同一个 repo 中会使您失去很多灵活性 very em> 收益微乎其微。