【前端】在 Next.js 开发服务器中应该如何配置 HTTPS？

在 Next.js 的开发环境中，默认情况下是使用 HTTP 协议的。但是，您可以通过一些配置来启用 HTTPS。这在开发阶段可能很有用，尤其是在需要测试涉及安全传输的应用场景时。

下面是如何在 Next.js 开发环境中配置 HTTPS 的步骤：

方法一：使用 https 模块

您可以使用 Node.js 的内置模块 https 来启动一个支持 HTTPS 的开发服务器。这通常涉及到生成 SSL 证书和密钥。

生成自签名证书

首先，您需要生成一个自签名的 SSL 证书和对应的密钥。可以使用 OpenSSL 来生成：

1. 安装 OpenSSL（如果尚未安装）：

   对于 Ubuntu/Debian：

   sudo apt-get install openssl
   

   对于 macOS：

   brew install openssl
   

2. 生成自签名证书和密钥：

   openssl req -x509 -newkey rsa:2048 -nodes -out cert.pem -keyout key.pem -days 365 -subj "/CN=localhost"
   

   这个命令会生成两个文件：cert.pem（证书文件）和 key.pem（密钥文件）。

配置 Next.js 开发服务器

接下来，您需要修改 package.json 文件中的 dev 脚本来使用 HTTPS 模式启动开发服务器。

1. 打开 package.json 文件，修改 dev 脚本：

   "scripts": {"dev": "NODE_TLS_REJECT_UNAUTHORIZED=0 PORT=3000 next dev --https-key=key.pem --https-cert=cert.pem"
   }
   

   这里使用了环境变量 NODE_TLS_REJECT_UNAUTHORIZED=0 来禁用对证书的验证，因为我们在开发环境中使用的是自签名证书。

2. 启动开发服务器：

   npm run dev
   

   或者使用 Yarn：

   yarn dev
   

方法二：使用第三方工具

另一种方法是使用第三方工具，如 mkcert，来生成本地信任的证书。

安装 mkcert

1. 安装 mkcert：

   对于 Linux：

   wget https://github.com/FiloSottile/mkcert/releases/download/v1.4.5/mkcert-v1.4.5-linux-amd64.tar.gz
   tar xf mkcert-v1.4.5-linux-amd64.tar.gz
   chmod +x mkcert-v1.4.5-linux-amd64
   sudo mv mkcert-v1.4.5-linux-amd64 /usr/local/bin/mkcert
   

   对于 macOS：

   brew install mkcert
   

2. 生成证书：

   mkcert -install
   mkcert localhost
   

   这将会生成 localhost+3.pem（证书文件）和 localhost+3-key.pem（密钥文件）。

配置 Next.js 开发服务器

1. 修改 package.json 文件中的 dev 脚本：

   "scripts": {"dev": "NODE_TLS_REJECT_UNAUTHORIZED=0 PORT=3000 next dev --https-key=localhost+3-key.pem --https-cert=localhost+3.pem"
   }
   

2. 启动开发服务器：

   npm run dev
   

   或者使用 Yarn：

   yarn dev
   

注意事项

• 使用自签名证书仅适用于开发环境，生产环境中应使用受信任的证书颁发机构颁发的证书。

• 确保证书和密钥文件的路径正确无误。

• 在 macOS 上，您可能还需要信任证书：

  sudo security add-trusted-cert -d -r trustAsRoot -k /Library/Keychains/System.keychain ~/.local/share/mkcert/rootCA.pem
  

通过上述方法之一，您可以在 Next.js 开发环境中启用 HTTPS 支持，这对于测试涉及安全传输的应用场景非常有用。希望这些步骤能帮助您成功配置 Next.js 开发服务器的 HTTPS 支持！