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

使用 Certbot 和 LetsEncrypt 實現 Node/Express 的 HTTPS

基本上是參考這篇
Node + Express + LetsEncrypt : Generate a free SSL certificate and run an HTTPS server in 5 minutes or less

原則上是依他的說明操作，這邊是防痴呆記錄一下。

1. 先在 local 準備一個簡單的 node/express 專案，只要先安裝 express 即可，寫個 hello world。

2. 在遠端開一台 VM。我是直接在 digitalocean 開一台 ubuntu 18.4 VM，每月五塊美金的（之後有需要再擴充）。開完就可以取得主機的 IP。

3. 設定 domain name。我個人是使用 godaddy 的服務，設定對應的子網域。

4. 使用 ssh 登入主機，更新 apt 並安裝 certbot。

$ apt-get update
$ apt-get install certbot

5. 使用 cetbot 啟用手動設定

$ certbot certonly --manual

在過程中，會需要回答一些問題、輸入連絡的 email 和申請的 domain name。

6. 看到以下訊息時，請先暫停，別冒然按下 Enter。

Create a file containing just this data:
辨識用的一串編碼
And make it available on your web server at this URL:
http://你的網域/.well-known/acme-challenge/一串編碼

7. 編輯你的專案，實作上述的功能，然後使用 sftp 上傳到主機。

app.get('/.well-known/acme-challenge/一串編碼', (req, res)=>{
    res.send('辨識用的一串編碼');
});

8. 在主機，使用另一個 terminal 啟動 node server，port number 使用 80。然後才在最初的 terminal 按下 Enter。

9. 看到以下的訊息就表示成功了

IMPORTANT NOTES:
 - Congratulations! Your certificate and chain have been saved at:
   /etc/letsencrypt/live/你的網域/fullchain.pem
   Your key file has been saved at:
   /etc/letsencrypt/live/你的網域/privkey.pem
   Your cert will expire on 2019-05-04. To obtain a new or tweaked
   version of this certificate in the future, simply run certbot
   again. To non-interactively renew *all* of your certificates, run
   "certbot renew"
 - If you like Certbot, please consider supporting our work by:
   Donating to ISRG / Let's Encrypt:   https://letsencrypt.org/donate
   Donating to EFF:                    https://eff.org/donate-le

10. 在 node/express 專案中設定:

const privateKey = fs.readFileSync('/etc/letsencrypt/live/你的網域/privkey.pem', 'utf8');
const certificate = fs.readFileSync('/etc/letsencrypt/live/你的網域/fullchain.pem', 'utf8');
const credentials = {
    key: privateKey,
    cert: certificate,
    ca: certificate
};

11. 啟動 sever 應該就可以看到 https 了。