Next.js 开发环境设置 SSL 证书

蒋晓燕

在 Next.js 中设置证书时，你可以按照以下步骤进行操作：

1. 生成自签名证书：在开发环境中，你可以使用自签名证书来启用 HTTPS。可以使用工具如 OpenSSL 来生成自签名证书。以下是一个示例命令：

   openssl req -nodes -new -x509 -keyout server.key -out server.crt
   

   这将生成一个名为 server.key 的私钥文件和一个名为 server.crt 的证书文件。

2. 将证书文件放置在 Next.js 项目的根目录下。

3. 在 Next.js 项目的根目录中创建一个名为 server.js 的文件（如果该文件不存在）。

4. 在 server.js 文件中添加以下代码：

    const { createServer } = require('https');
    const { parse } = require('url');
    const next = require('next');
    const fs = require('fs');
   
    const dev = process.env.NODE_ENV !== 'production';
    const app = next({ dev });
    const handle = app.getRequestHandler();
   
    const requestListener = (req: any, res: any) => {
      //todo: 自定义逻辑
      handle(req, res, parsedUrl)
    }
   
    app.prepare().then(() => {
   
      let isHttps = process.env.Https || false
      const httpsOptions = {
        key: fs.readFileSync('devcert/server.key'),
        cert: fs.readFileSync('devcert/server.crt')
      };
      const httpServer = isHttps
        ? https.createServer(httpsOptions, requestListener)
        : createServer(requestListener)
   
      httpServer.listen(port)
   
      // tslint:disable-next-line:no-console
      console.log(
        `> Server listening at ${isHttps ? 'https' : 'http'}://localhost:${port} as ${dev ? 'development' : process.env.NODE_ENV
        }`
      )
    })
   

   这段代码使用了 https 模块创建了一个 HTTPS 服务器，并指定了之前生成的证书文件的路径。它还使用了 Next.js 的 app.getRequestHandler() 来处理请求。

5. 在项目的 package.json 文件中添加一个启动脚本，以便使用自定义的服务器文件：

   "scripts": {
     "dev": "node server.js"
   }
   

   这将使你可以使用 npm run dev 命令来启动 Next.js 项目，并使用 HTTPS 访问。

6. 启动项目：运行 npm run dev 命令启动 Next.js 项目，并通过浏览器访问 https://localhost:3000 来查看使用 HTTPS 的项目。

请注意，自签名证书在浏览器中可能会被标记为不受信任的证书，因为它们没有由受信任的证书颁发机构签名。在生产环境中，你应该使用由受信任的证书颁发机构签发的有效证书。

来源：https://www.cnblogs.com/frank-zhang/p/17584668.html