[问题] 新手 Node.js+React+一个端点

楼主: Moneyyyyy (郑竹)   2019-09-09 09:24:26
我这边遇到了前后端如何接在一起的问题,想请各位前辈帮帮忙
专案是前端用:React,后端用:node.js
最初我启动 react 是 3000 port, node 是 5500 port
也就是在 react 中长这样 fetch("http://localhost:5500/api")
可是我的老师希望只在一个 port 启动
就是类似在 node 使用样板语言让后端资料能直接渲染画面那样
从头到尾只会有一个网址
我在网络上找了很多资料,都是跟我一样的做法 (两个端点)
或是在 package.json 中设置代理服务器
"proxy": "http://localhost:5500/" (可是这也是两个端点)
有没有人有遇过类似的做法,或是相关关键字可以提供给我查询
谢谢~
作者: oledu (oLedu)   2019-09-09 09:46:00
把打包完的档案丢到node当静态资源?
作者: pkro12345 (席龙)   2019-09-09 12:56:00
就build完当静态资源阿
作者: GsMoMo (GsMoMo)   2019-09-09 15:00:00
作者: y3k (激流を制するは静水)   2019-09-10 07:07:00
app.use(express.static())跟app.get() app.post()多宣告几个就好了啊而且我想你误会了.... react-script也是透过node去听 只是他听的地方你没去追就看不到而已
作者: brianwu1201 (bunny29)   2019-09-10 18:30:00
觉得奇怪,部署后你写的一切 react code 都只是透过script tag 一个个引入,uri 的 domain 由 process.env 环境变量来决定,不会有你说的前端后端分别部署的情形。
作者: at5lp6andy (兔子角傲地滴仿)   2019-09-10 19:47:00
3000port那个只是create_react_app让你debug用,跟部署还有后端无关,也不是你打包好的网页。你最后做好的网页会跟你node在同一个port,原因是你的前端是借由node程式中app.use传到server。如果要检测后端是否有接上前端,你应该在node所使用的port开启你的网页,而不是使用3000port
作者: shter (飞梭之影)   2019-09-11 03:58:00
我觉得你的基础完全不行,一个 port 启动很正常你根本不需要 3000 port,你只要 react build 出来的丢进node.js 的静态资料夹就好,常开 5500 连就对了前后端分离,前端不用丢在 5500 跑也没关系你甚至随便丢一个网络空间让它去跟 api 存取都行如果你前后端要放在一起,那就是都丢在 node.js 目录下正确前后端分离的话没有什么实务上谁要放在谁那里的问题但布署方便来说通常最终是前端放在后端的某个目录下居多因为后端要决定服务器的执行环境与目录结构有空玩玩 Apache 或 nginx 理解一下 http server 概念好了不然 node.js 监听 web 服务的方法有点抽象会让你误解另外看起来现代框架、打包、运行一条龙残害新手不浅居然会对静态网页前端误解成要启动 web server 才能执行启动 web server 是为了跑后端,让前端顺利存取 API 运作所谓 port 3000 只是一种方便需要 build 才能执行的开发用最基本的网页你写完存盘在本机到浏览器把档案打开就能看到但现代 build 网页是因为可能要把 scss compile然后 js 模组化也要编译组合压成一支档案来执行再加上方便浏览器出错时指回原始档案位置而需要 source map最后是即时监控程式码有更新就自动 build 完再立即重新整理前端的 node 主要是在做这些事,并不是实际布署也需要这样
作者: googoo1102 (googoo)   2019-09-15 00:27:00
前端打包后成为static资源档案参考一下 https://tinyurl.com/y65uxy6lhttps://tinyurl.com/yxscmr84
作者: froce (froce)   2019-09-21 16:35:00
最近为了学go和vue才遇到类似的问题,简单整理一下。1.前端编译后,就只是静态的网页,透过ajax去取资料而已。2.所以你只要把取资料的api用网址能够区分,就能够一个埠号解决。3.这种开发方式,最让人头痛的是前期api怎么定、开发时的跨域存取api这些问题

Links booklink

Contact Us: admin [ a t ] ucptt.com