在本地使用 HTTP 比較簡單,但如果您真的需要在本地使用 HTTPS,以下是如何操作。
remix-serve
不支援本地 HTTPS,因為它旨在作為一個最小伺服器,讓您快速上手。remix-serve
是一個簡單的 Express 包裝器,因此如果您想在本地使用 HTTPS,可以直接使用 Express。
如果您在沒有 -c
標誌的情況下執行 remix dev
,您會隱式地使用 remix-serve
作為您的應用程式伺服器。
第一步是讓您的應用程式伺服器在不執行 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.pem
和 cert.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
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 執行了!