前后端分离的项目可以共用同一个端口吗

Question

这个问题会不会有点傻，希望大佬莫嘲笑
因为前两天因为前后端分离的项目分别在两个端口设置nginx反代花费了过多时间的问题，前端react 后端express
所以我在想它俩有没有可能放在一个端口，这样就不存在跨域了吧？
那为啥还要折腾nginx代理呢？
（为什么没有实践去验证，因为部署花了好久的时间，经不起折腾了）
希望有经验的大佬能给予解答，不胜感激额

Answer 1

1. react 不需要占用端口. 如果你一定要说占用端口是指开发时, webpack 启动的 devserver 吧. 而生产编译后的 react 工程是一系列静态文件, 必须是需要一个 web 服务器来提供服务的, 可以是 nginx, apache, 虽然的确也可以直接是 express, 但不推荐, 专业的事情交给专业的软件
2. 基于上述第 1 点, 实际上 nginx 你只需要配置对 express 的反代就行了, 你提到了两个端口肯定是其中某个地方搞错了
3. nginx 的反向代理根本不复杂, 折腾是你还在学习曲线中, 好好去读一下官方的文档可以让你少走很多弯路 (比如 location 后面的参数的详细解释, 还有 root 和 alias 的区别之类的)

Answer 2

1. 可以共用一个端口，相当于用 express 提供打包后 react 的静态文件服务
2. 同一个端口就是同一个服务器，自然不存在跨域问题
3. nginx 性能更好，占用更少，适合提供多个服务器实例

4. 比较合适的做法应该是：

   1. nginx 提供静态文件服务，也就是打包后的 react 静态文件；
   2. 然后以类似 /api 这样的目录，反向代理 express 服务
   3. 这样，既没有跨域问题，也能更好的利用 nginx 的效率

Answer 3

我看楼上讲的都是生产环境，那假如就像一楼说的，开发环境(没有打包)前端的devServer与后端用同一个端口，这可以吗？