推 oledu: 把打包完的檔案丟到node當靜態資源？ 09/09 09:46
事實上我試過直接在 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
→ pkro12345: 就build完當靜態資源阿 09/09 12:56
試了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
→ y3k: app.use(express.static())跟app.get() app.post() 09/10 07:07
→ y3k: 多宣告幾個就好了啊 09/10 07:07
抱歉這邊不理解，多宣告是指針對我上述哪個問題？
→ y3k: 而且我想你誤會了.... react-script也是透過node去聽 只是他 09/10 07:18
→ y3k: 聽的地方你沒去追就看不到而已 09/10 07:18
這邊我不確定是不是因為我不太懂沒說清楚
我目前的理解是 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
→ brianwu1201: 覺得奇怪，部署後你寫的一切 react code 都只是透過 09/10 18:30
→ brianwu1201: script tag 一個個引入，uri 的 domain 由 process. 09/10 18:30
→ brianwu1201: env 環境變數來決定，不會有你說的前端後端分別部署 09/10 18:30
→ brianwu1201: 的情形。 09/10 18:30
→ at5lp6andy: 3000port那個只是create_react_app讓你debug用，跟部 09/10 19:47
→ at5lp6andy: 署還有後端無關，也不是你打包好的網頁。你最後做好 09/10 19:47
→ at5lp6andy: 的網頁會跟你node在同一個port，原因是你的前端是藉 09/10 19:47
→ at5lp6andy: 由node程式中app.use傳到server。如果要檢測後端是否 09/10 19:47
→ at5lp6andy: 有接上前端，你應該在node所使用的port開啟你的網頁 09/10 19:47
→ at5lp6andy: ，而不是使用3000port 09/10 19:47
謝謝 b大a大 的解說，我有稍微理解了
推 shter: 我覺得你的基礎完全不行，一個 port 啟動很正常 09/11 03:58
→ shter: 你根本不需要 3000 port，你只要 react build 出來的丟進 09/11 03:58
→ shter: node.js 的靜態資料夾就好，常開 5500 連就對了 09/11 03:59
→ shter: 前後端分離，前端不用丟在 5500 跑也沒關係 09/11 04:00
→ shter: 你甚至隨便丟一個網路空間讓它去跟 api 存取都行 09/11 04:00
→ shter: 如果你前後端要放在一起，那就是都丟在 node.js 目錄下 09/11 04:00
→ shter: 正確前後端分離的話沒有什麼實務上誰要放在誰那裡的問題 09/11 04:02
→ shter: 但佈署方便來說通常最終是前端放在後端的某個目錄下居多 09/11 04:02
→ shter: 因為後端要決定伺服器的執行環境與目錄結構 09/11 04:04
推 shter: 有空玩玩 Apache 或 nginx 理解一下 http server 概念好了 09/11 04:10
→ shter: 不然 node.js 監聽 web 服務的方法有點抽象會讓你誤解 09/11 04:11
推 shter: 另外看起來現代框架、打包、運行一條龍殘害新手不淺 09/11 04:15
→ shter: 居然會對靜態網頁前端誤解成要啟動 web server 才能執行 09/11 04:18
→ shter: 啟動 web server 是為了跑後端，讓前端順利存取 API 運作 09/11 04:20
→ shter: 所謂 port 3000 只是一種方便需要 build 才能執行的開發用 09/11 04:21
→ shter: 最基本的網頁你寫完存檔在本機到瀏覽器把檔案打開就能看到 09/11 04:22
→ shter: 但現代 build 網頁是因為可能要把 scss compile 09/11 04:23
→ shter: 然後 js 模組化也要編譯組合壓成一支檔案來執行 09/11 04:23
→ shter: 再加上方便瀏覽器出錯時指回原始檔案位置而需要 source map 09/11 04:24
→ shter: 最後是即時監控程式碼有更新就自動 build 完再立即重新整理 09/11 04:25
→ shter: 前端的 node 主要是在做這些事，並不是實際佈署也需要這樣 09/11 04:27
對，我的基礎有很多地方要加強，因為學得有點亂
我在接觸現代框架前，單純只寫js，也明白不用跑 web server 就能在瀏覽器上出現
但是使用現代框架，我自己還沒去搞懂 webpack 那些
想說先能動起來就好（這是我自己的問題 >"<
謝謝 s大 不厭其煩詳盡的解說
在我詢問完朋友後，最後也是歸到對於 http server 和 route 的不熟悉
等我試試新的想法，順利解完後再 po 上來補充
謝謝大家的回應
※ 編輯: Moneyyyyy (131.181.158.30 澳大利亞), 09/11/2019 11:03:32
推 googoo1102: 前端打包後成為static資源檔案 09/15 00:27
推 froce: 最近為了學go和vue才遇到類似的問題，簡單整理一下。 09/21 16:35
→ froce: 1.前端編譯後，就只是靜態的網頁，透過ajax去取資料而已。 09/21 16:35
→ froce: 2.所以你只要把取資料的api用網址能夠區分，就能夠一個埠號 09/21 16:35
→ froce: 解決。 09/21 16:35
→ froce: 3.這種開發方式，最讓人頭痛的是前期api怎麼定、開發時的跨 09/21 16:35
→ froce: 域存取api這些問題 09/21 16:35