將 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}`);
});