PTT數位生活區 / Web_Design

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

看板Web_Design作者 (擋我者死)時間5年前 (2019/09/09 09:24), 5年前編輯推噓8(8推 0噓 39→)
留言47則, 9人參與, 5年前最新討論串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, 5年前 , 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, 5年前 , 2F
就build完當靜態資源阿
09/09 12:56, 2F
推
09/09 15:00, 5年前 , 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, 5年前 , 4F
app.use(express.static())跟app.get() app.post()
09/10 07:07, 4F
→
09/10 07:07, 5年前 , 5F
多宣告幾個就好了啊
09/10 07:07, 5F
抱歉這邊不理解，多宣告是指針對我上述哪個問題？
→
09/10 07:18, 5年前 , 6F
而且我想你誤會了.... react-script也是透過node去聽 只是他
09/10 07:18, 6F
→
09/10 07:18, 5年前 , 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, 5年前 , 8F
覺得奇怪，部署後你寫的一切 react code 都只是透過
09/10 18:30, 8F
→
09/10 18:30, 5年前 , 9F
script tag 一個個引入，uri 的 domain 由 process.
09/10 18:30, 9F
→
09/10 18:30, 5年前 , 10F
env 環境變數來決定，不會有你說的前端後端分別部署
09/10 18:30, 10F
→
09/10 18:30, 5年前 , 11F
的情形。
09/10 18:30, 11F
→
09/10 19:47, 5年前 , 12F
3000port那個只是create_react_app讓你debug用，跟部
09/10 19:47, 12F
→
09/10 19:47, 5年前 , 13F
署還有後端無關，也不是你打包好的網頁。你最後做好
09/10 19:47, 13F
→
09/10 19:47, 5年前 , 14F
的網頁會跟你node在同一個port，原因是你的前端是藉
09/10 19:47, 14F
→
09/10 19:47, 5年前 , 15F
由node程式中app.use傳到server。如果要檢測後端是否
09/10 19:47, 15F
→
09/10 19:47, 5年前 , 16F
有接上前端，你應該在node所使用的port開啟你的網頁
09/10 19:47, 16F
→
09/10 19:47, 5年前 , 17F
，而不是使用3000port
09/10 19:47, 17F
謝謝 b大a大 的解說，我有稍微理解了
推
09/11 03:58, 5年前 , 18F
我覺得你的基礎完全不行，一個 port 啟動很正常
09/11 03:58, 18F
→
09/11 03:58, 5年前 , 19F
你根本不需要 3000 port，你只要 react build 出來的丟進
09/11 03:58, 19F
→
09/11 03:59, 5年前 , 20F
node.js 的靜態資料夾就好，常開 5500 連就對了
09/11 03:59, 20F
→
09/11 04:00, 5年前 , 21F
前後端分離，前端不用丟在 5500 跑也沒關係
09/11 04:00, 21F
→
09/11 04:00, 5年前 , 22F
你甚至隨便丟一個網路空間讓它去跟 api 存取都行
09/11 04:00, 22F
→
09/11 04:00, 5年前 , 23F
如果你前後端要放在一起，那就是都丟在 node.js 目錄下
09/11 04:00, 23F
→
09/11 04:02, 5年前 , 24F
正確前後端分離的話沒有什麼實務上誰要放在誰那裡的問題
09/11 04:02, 24F
→
09/11 04:02, 5年前 , 25F
但佈署方便來說通常最終是前端放在後端的某個目錄下居多
09/11 04:02, 25F
→
09/11 04:04, 5年前 , 26F
因為後端要決定伺服器的執行環境與目錄結構
09/11 04:04, 26F
推
09/11 04:10, 5年前 , 27F
有空玩玩 Apache 或 nginx 理解一下 http server 概念好了
09/11 04:10, 27F
→
09/11 04:11, 5年前 , 28F
不然 node.js 監聽 web 服務的方法有點抽象會讓你誤解
09/11 04:11, 28F
推
09/11 04:15, 5年前 , 29F
另外看起來現代框架、打包、運行一條龍殘害新手不淺
09/11 04:15, 29F
→
09/11 04:18, 5年前 , 30F
居然會對靜態網頁前端誤解成要啟動 web server 才能執行
09/11 04:18, 30F
→
09/11 04:20, 5年前 , 31F
啟動 web server 是為了跑後端，讓前端順利存取 API 運作
09/11 04:20, 31F
→
09/11 04:21, 5年前 , 32F
所謂 port 3000 只是一種方便需要 build 才能執行的開發用
09/11 04:21, 32F
→
09/11 04:22, 5年前 , 33F
最基本的網頁你寫完存檔在本機到瀏覽器把檔案打開就能看到
09/11 04:22, 33F
→
09/11 04:23, 5年前 , 34F
但現代 build 網頁是因為可能要把 scss compile
09/11 04:23, 34F
→
09/11 04:23, 5年前 , 35F
然後 js 模組化也要編譯組合壓成一支檔案來執行
09/11 04:23, 35F
→
09/11 04:24, 5年前 , 36F
再加上方便瀏覽器出錯時指回原始檔案位置而需要 source map
09/11 04:24, 36F
→
09/11 04:25, 5年前 , 37F
最後是即時監控程式碼有更新就自動 build 完再立即重新整理
09/11 04:25, 37F
→
09/11 04:27, 5年前 , 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, 5年前 , 39F
前端打包後成為static資源檔案
09/15 00:27, 39F
推
09/15 00:34, 5年前 , 40F
09/15 00:34, 40F
→
09/15 00:35, 5年前 , 41F
09/15 00:35, 41F
推
09/21 16:35, 5年前 , 42F
最近為了學go和vue才遇到類似的問題，簡單整理一下。
09/21 16:35, 42F
→
09/21 16:35, 5年前 , 43F
1.前端編譯後，就只是靜態的網頁，透過ajax去取資料而已。
09/21 16:35, 43F
→
09/21 16:35, 5年前 , 44F
2.所以你只要把取資料的api用網址能夠區分，就能夠一個埠號
09/21 16:35, 44F
→
09/21 16:35, 5年前 , 45F
解決。
09/21 16:35, 45F
→
09/21 16:35, 5年前 , 46F
3.這種開發方式，最讓人頭痛的是前期api怎麼定、開發時的跨
09/21 16:35, 46F
→
09/21 16:35, 5年前 , 47F
域存取api這些問題
09/21 16:35, 47F
‣ 更多 Moneyyyyy 的文章
文章代碼(AID): #1TTQdEgr (Web_Design)
Web_Design 近期熱門文章
更多 近期熱門文章 >>
PTT數位生活區 即時熱門文章
更多 即時熱門文章 >>
‣ 更多 Moneyyyyy 的文章
文章代碼(AID): #1TTQdEgr (Web_Design)