在本地使用 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 运行!