將 React app 和 Node.js 寫的 API 放在同一台伺服器
要前後端分離，同時要將 React app 和 API 放在同一台伺服器相同的 port，以避免誇來源的問題。
此時可以用一台 Node express server 解決。
React app 發佈至 Express server 靜態資料夾
第一種方式是，把發佈後的 React 放在 build 資料夾（別的名稱也可以），並將 build 設定為靜態資料夾。
其餘後端的 API 可以定義在服務靜態 html 檔之前。
const express = require("express");
const fs = require("fs/promises");
const app = express();
app.use(express.static("build"));
let html = "";
fs.readFile(__dirname + "/build/index.html").then((txt) => {
html = txt.toString();
});
// app.use('/api', YOUR_ROUTER); // 可以把 api 掛在這裡
app.use("/api", (req, res) => {
res.json({ name: "shinder", say: "hello" });
});
app.use((req, res) => {
res.send(html);
});
const port = 3005;
app.listen(port, () => {
console.log(`啟動 ${port}`);
});
使用反向代理伺服器
另一種做法是使用反向代理伺服器，可以利用 http-proxy-middleware 套件，建立 proxy。
const express = require("express");
const { createProxyMiddleware } = require("http-proxy-middleware");
const app = express();
app.use(express.static("build"));
// app.use('/api', YOUR_ROUTER); // 可以把 api 掛在這裡
app.use("/api", (req, res) => {
res.json({ name: "shinder", say: "hello" });
});
app.use(
"/",
createProxyMiddleware({
target: "http://localhost:3000",
changeOrigin: true,
})
);
const port = 3005;
app.listen(port, () => {
console.log(`啟動 ${port}`);
});