[問題] 新手 Node.js+React+一個端點

看板Web_Design作者 (擋我者死)時間4年前 (2019/09/09 09:24), 4年前編輯推噓8(8039)
留言47則, 9人參與, 4年前最新討論串1/1
我這邊遇到了前後端如何接在一起的問題,想請各位前輩幫幫忙 專案是前端用:React,後端用:node.js 最初我啟動 react 是 3000 port, node 是 5500 port 也就是在 react 中長這樣 fetch("http://localhost:5500/api") 可是我的老師希望只在一個 port 啟動 就是類似在 node 使用樣板語言讓後端資料能直接渲染畫面那樣 從頭到尾只會有一個網址 我在網路上找了很多資料,都是跟我一樣的做法 (兩個端點) 或是在 package.json 中設置代理服務器 "proxy": "http://localhost:5500/" (可是這也是兩個端點) 有沒有人有遇過類似的做法,或是相關關鍵字可以提供給我查詢 謝謝~ -- ※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 49.197.56.209 (澳大利亞) ※ 文章網址: https://www.ptt.cc/bbs/Web_Design/M.1567992270.A.AB5.html

09/09 09:46, 4年前 , 1F
把打包完的檔案丟到node當靜態資源?
09/09 09:46, 1F
事實上我試過直接在 React 中打包完 將整包靜態資源放入 node 的 public 資料夾(不太熟悉怎麼做,手法有點粗糙) 然後因為資料夾大概會長這樣 -public -index.html -mainifest.json -static -css -js -media 我直接先在 app.use 中使用 res.sendFile(path.join(__dirname + '/index.html')) 抓取由 React 來的 index.html 的路徑 可以抓取到首頁,但是點擊按鈕要 fetch 資料時就會出現 404 not found 錯誤 感覺是因為我的路徑設置不對,或靜態資料放置的位置不對 可是我找不到相關資料,不知道怎麼修正 所有資料如下:程式碼中包含很多額外的垃圾我沒有刪掉抱歉 React: https://github.com/jenifers001d/AzureReact/blob/master/src/App3.js Node: (48 line) https://github.com/jenifers001d/AzureNode/blob/master/app.js 問題圖片集: https://hackmd.io/@OQeeWHXgRk6Fwb8MEh1Jww/HktJiIX8r ※ 編輯: Moneyyyyy (49.197.56.209 澳大利亞), 09/09/2019 13:01:11

09/09 12:56, 4年前 , 2F
就build完當靜態資源阿
09/09 12:56, 2F

09/09 15:00, 4年前 , 3F
09/09 15:00, 3F
試了G大的方法,可以成功運行,真的是非常感謝 稍微研究了一下 concurrently 是同時執行兩條監聽命令 (實際上還是兩個端點,那麼如果我想將其部署在 Heroku 上) (node 中 app.listen(5500); 是不是要做修改?) 另外,實務上是比較偏向這種,將後端(node.js寫成)的檔案放在 React 中 而不是將 React build 完,將靜態資料放進後端(node.js寫成)的public資料夾? 還是後者也可以做到,只是我不會(掩面 如果後者也可以做到,不知道有沒有網路上的參考資料能讓我學習? 再麻煩有資源的前輩告知,謝謝 ※ 編輯: Moneyyyyy (124.184.105.23 澳大利亞), 09/09/2019 21:08:23

09/10 07:07, 4年前 , 4F
app.use(express.static())跟app.get() app.post()
09/10 07:07, 4F

09/10 07:07, 4年前 , 5F
多宣告幾個就好了啊
09/10 07:07, 5F
抱歉這邊不理解,多宣告是指針對我上述哪個問題?

09/10 07:18, 4年前 , 6F
而且我想你誤會了.... react-script也是透過node去聽 只是他
09/10 07:18, 6F

09/10 07:18, 4年前 , 7F
聽的地方你沒去追就看不到而已
09/10 07:18, 7F
這邊我不確定是不是因為我不太懂沒說清楚 我目前的理解是 React 啟動在 http://localhost:3000 而我的後端啟動在 http://localhost:5500 這樣是兩個端點,React 中用 fetch 取資料時需要連結到另一個 url 另外,如果我將 React 和後端分別部署在 Heroku 就會是兩個不同的 url 但是目前老師的要求是,例如 React 啟動在 http://localhost:3000 我點擊了一個按鈕後,會連到 http://localhost:3000/book (這個不會明確顯示在網址欄),然後後端送回資料渲染畫面 如果將上述部署在 Heroku 就會是只有一個 url 例如:https://myapp.herokuapp.com/ 我的 fetch 直接放 "/book" 參數就好,不會是放不一樣的 url ※ 編輯: Moneyyyyy (124.184.105.23 澳大利亞), 09/10/2019 10:55:10

09/10 18:30, 4年前 , 8F
覺得奇怪,部署後你寫的一切 react code 都只是透過
09/10 18:30, 8F

09/10 18:30, 4年前 , 9F
script tag 一個個引入,uri 的 domain 由 process.
09/10 18:30, 9F

09/10 18:30, 4年前 , 10F
env 環境變數來決定,不會有你說的前端後端分別部署
09/10 18:30, 10F

09/10 18:30, 4年前 , 11F
的情形。
09/10 18:30, 11F

09/10 19:47, 4年前 , 12F
3000port那個只是create_react_app讓你debug用,跟部
09/10 19:47, 12F

09/10 19:47, 4年前 , 13F
署還有後端無關,也不是你打包好的網頁。你最後做好
09/10 19:47, 13F

09/10 19:47, 4年前 , 14F
的網頁會跟你node在同一個port,原因是你的前端是藉
09/10 19:47, 14F

09/10 19:47, 4年前 , 15F
由node程式中app.use傳到server。如果要檢測後端是否
09/10 19:47, 15F

09/10 19:47, 4年前 , 16F
有接上前端,你應該在node所使用的port開啟你的網頁
09/10 19:47, 16F

09/10 19:47, 4年前 , 17F
,而不是使用3000port
09/10 19:47, 17F
謝謝 b大a大 的解說,我有稍微理解了

09/11 03:58, 4年前 , 18F
我覺得你的基礎完全不行,一個 port 啟動很正常
09/11 03:58, 18F

09/11 03:58, 4年前 , 19F
你根本不需要 3000 port,你只要 react build 出來的丟進
09/11 03:58, 19F

09/11 03:59, 4年前 , 20F
node.js 的靜態資料夾就好,常開 5500 連就對了
09/11 03:59, 20F

09/11 04:00, 4年前 , 21F
前後端分離,前端不用丟在 5500 跑也沒關係
09/11 04:00, 21F

09/11 04:00, 4年前 , 22F
你甚至隨便丟一個網路空間讓它去跟 api 存取都行
09/11 04:00, 22F

09/11 04:00, 4年前 , 23F
如果你前後端要放在一起,那就是都丟在 node.js 目錄下
09/11 04:00, 23F

09/11 04:02, 4年前 , 24F
正確前後端分離的話沒有什麼實務上誰要放在誰那裡的問題
09/11 04:02, 24F

09/11 04:02, 4年前 , 25F
但佈署方便來說通常最終是前端放在後端的某個目錄下居多
09/11 04:02, 25F

09/11 04:04, 4年前 , 26F
因為後端要決定伺服器的執行環境與目錄結構
09/11 04:04, 26F

09/11 04:10, 4年前 , 27F
有空玩玩 Apache 或 nginx 理解一下 http server 概念好了
09/11 04:10, 27F

09/11 04:11, 4年前 , 28F
不然 node.js 監聽 web 服務的方法有點抽象會讓你誤解
09/11 04:11, 28F

09/11 04:15, 4年前 , 29F
另外看起來現代框架、打包、運行一條龍殘害新手不淺
09/11 04:15, 29F

09/11 04:18, 4年前 , 30F
居然會對靜態網頁前端誤解成要啟動 web server 才能執行
09/11 04:18, 30F

09/11 04:20, 4年前 , 31F
啟動 web server 是為了跑後端,讓前端順利存取 API 運作
09/11 04:20, 31F

09/11 04:21, 4年前 , 32F
所謂 port 3000 只是一種方便需要 build 才能執行的開發用
09/11 04:21, 32F

09/11 04:22, 4年前 , 33F
最基本的網頁你寫完存檔在本機到瀏覽器把檔案打開就能看到
09/11 04:22, 33F

09/11 04:23, 4年前 , 34F
但現代 build 網頁是因為可能要把 scss compile
09/11 04:23, 34F

09/11 04:23, 4年前 , 35F
然後 js 模組化也要編譯組合壓成一支檔案來執行
09/11 04:23, 35F

09/11 04:24, 4年前 , 36F
再加上方便瀏覽器出錯時指回原始檔案位置而需要 source map
09/11 04:24, 36F

09/11 04:25, 4年前 , 37F
最後是即時監控程式碼有更新就自動 build 完再立即重新整理
09/11 04:25, 37F

09/11 04:27, 4年前 , 38F
前端的 node 主要是在做這些事,並不是實際佈署也需要這樣
09/11 04:27, 38F
對,我的基礎有很多地方要加強,因為學得有點亂 我在接觸現代框架前,單純只寫js,也明白不用跑 web server 就能在瀏覽器上出現 但是使用現代框架,我自己還沒去搞懂 webpack 那些 想說先能動起來就好(這是我自己的問題 >"< 謝謝 s大 不厭其煩詳盡的解說 在我詢問完朋友後,最後也是歸到對於 http server 和 route 的不熟悉 等我試試新的想法,順利解完後再 po 上來補充 謝謝大家的回應 ※ 編輯: Moneyyyyy (131.181.158.30 澳大利亞), 09/11/2019 11:03:32

09/15 00:27, 4年前 , 39F
前端打包後成為static資源檔案
09/15 00:27, 39F

09/15 00:34, 4年前 , 40F
09/15 00:34, 40F

09/15 00:35, 4年前 , 41F

09/21 16:35, 4年前 , 42F
最近為了學go和vue才遇到類似的問題,簡單整理一下。
09/21 16:35, 42F

09/21 16:35, 4年前 , 43F
1.前端編譯後,就只是靜態的網頁,透過ajax去取資料而已。
09/21 16:35, 43F

09/21 16:35, 4年前 , 44F
2.所以你只要把取資料的api用網址能夠區分,就能夠一個埠號
09/21 16:35, 44F

09/21 16:35, 4年前 , 45F
解決。
09/21 16:35, 45F

09/21 16:35, 4年前 , 46F
3.這種開發方式,最讓人頭痛的是前期api怎麼定、開發時的跨
09/21 16:35, 46F

09/21 16:35, 4年前 , 47F
域存取api這些問題
09/21 16:35, 47F
文章代碼(AID): #1TTQdEgr (Web_Design)
文章代碼(AID): #1TTQdEgr (Web_Design)