React Router v7 已發布。 查看文件
本地 TLS

本地 TLS

本指南目前僅在使用傳統 Remix 編譯器時相關。

在本地使用 HTTP 比較簡單,但如果您真的需要在本地使用 HTTPS,以下是如何操作。

remix-serve 不支援本地 HTTPS,因為它旨在作為一個最小伺服器,讓您快速上手。remix-serve 是一個簡單的 Express 包裝器,因此如果您想在本地使用 HTTPS,可以直接使用 Express。

如果您在沒有 -c 標誌的情況下執行 remix dev,您會隱式地使用 remix-serve 作為您的應用程式伺服器。

使用本地 TLS 執行您的應用程式伺服器

第一步是讓您的應用程式伺服器在執行 remix dev 的情況下使用本地 TLS 執行。這將在您在下一節設定具有本地 TLS 的 remix dev 時,為您奠定成功的基礎。

👉 安裝 mkcert

👉 建立本地憑證授權單位

mkcert -install

👉 告知 Node 使用我們的本地 CA

export NODE_EXTRA_CA_CERTS="$(mkcert -CAROOT)/rootCA.pem"

👉 建立 TLS 金鑰和憑證

mkcert -key-file key.pem -cert-file cert.pem localhost

如果您使用自訂主機名稱,您可以在產生 TLS 金鑰和憑證時將 localhost 變更為其他名稱。

👉 使用 key.pemcert.pem,讓 HTTPS 在您的應用程式伺服器上正常運作。

如何執行此操作將取決於您使用的應用程式伺服器。例如,以下是如何在 Express 伺服器中使用 HTTPS 的方法

import fs from "node:fs";
import https from "node:https";
import path from "node:path";

import express from "express";

const BUILD_DIR = path.resolve(__dirname, "build");
const build = require(BUILD_DIR);

const app = express();

// ... code setting up your express app goes here ...

const server = https.createServer(
  {
    key: fs.readFileSync("path/to/key.pem"),
    cert: fs.readFileSync("path/to/cert.pem"),
  },
  app
);

const port = 3000;
server.listen(port, () => {
  // ... code to run after your server is running goes here ...
});

👉 使用本地 TLS 執行您的應用程式伺服器

例如,使用上面的 Express 伺服器,您會像這樣執行它

remix build
node ./server.js

使用本地 TLS 執行 remix dev

請確保您可以在沒有 remix dev 的情況下,使用本地 TLS 執行您的應用程式!如果您還沒做,請查看上一節。

👉 為 remix dev 啟用 TLS

透過設定檔

/** @type {import('@remix-run/dev').AppConfig} */
module.exports = {
  dev: {
    tlsKey: "key.pem", // relative to cwd
    tlsCert: "cert.pem", // relative to cwd
  },
};

或透過標誌

remix dev --tls-key=key.pem --tls-cert=cert.pem -c "node ./server.js"

您的應用程式現在應該使用本地 TLS 執行了!

文件和範例以 MIT