Next.js开启Https的方法

Next.js v13.4.9 截止目前为止，没有方便的官方配置来开启 https，我结合实际需求自己研究了开启的方法。

方案按开发环境和生产环境来分：

开发环境

开发环境下可以使用外部库来实现，官方仓库就有讨论。

生产环境

生产环境下，有三个选择

1. 使用Vercel的服务，交给供应商 Provider 搞定
2. 使用 Nginx 代理，证书都交 Nginx 来配置。这种比较简单。具体可以自行搜索，教程很多
3. 使用 Custom Server 。等于是自己启动Server，这样做会失去 Next.js 的一些优化，所以官方并不推荐

我目前的实际情况：

• 不允许托管给 Vercel，因为可能需要内网部署；
• 也不想去找运维配合，修改现有的 Nginx 配置文件，带来意外的问题；
• 又不想自定义 server.js 文件，失去某些优化；

所以最后选择自己从项目内部来解决，在打包完成后，修改生产出来的 server.js 文件，使之直接弃用 http.createServer，转而直接使用 https.createServer

// 原始的打包产物 server.js
.....
// 关键代码就在createServerHandler方法中
createServerHandler({
  port: currentPort,
  hostname,
  dir,
  conf: nextConfig,
  keepAliveTimeout: isValidKeepAliveTimeout keepAliveTimeout : undefined,
}).then((nextHandler) => {
  // 此处需要修改为 https
  const server = http.createServer(async (req, res) => {
    try {
      await nextHandler(req, res)
    } catch (err) {
      console.error(err);
      res.statusCode = 500
      res.end('Internal Server Error')
    }
  })
......
}).catch(err => {
  console.error(err);
  process.exit(1);
});

解决方案

思路

主要原理就是通过解析 AST，并修改代码。读取打包产物 server.js，然后根据已有代码重新编程来实现。这样既保留了原本的打包产物和官方优化，又实现了开启 https 的目的。

步骤

• 第一步
  在 npm 打包完成后执行一个脚本来读取和修改文件。此处需要用到 npm 的生命周期钩子 postbuild：它将会在打包完成后执行内部的命令

// package.json
  "scripts": {
    ......
    "build": "next build",
    "postbuild": "node after-build.js",
     ......
  },

after-build.js 就是实现所有修改逻辑的脚本，放在项目根目录

• 第二步
  开发 after-build.js，下面是示例代码

// after-build.js
const { readFileSync, writeFileSync } = require('fs')

// 首先找到server.js,进行读取
const code = readFileSync(`${打包目录}/server.js`, 'utf8')
// 引入AST分析库recast，前提是npm i 安装过
const recast = require('recast')

// 转换为AST
const ast = recast.parse(code)
const tnt = recast.types.namedTypes
tnt.File.assert(ast)

// 读取和修改源文件
recast.visit(ast, {
  visitProgram: function (path) {
        // 创建一个引入的表达式，声明2个变量：https和https.createServer的第一个参数options
    const requirePath = recast.types.builders.variableDeclaration('const', [
      recast.types.builders.variableDeclarator(
        recast.types.builders.identifier('https'),
        recast.types.builders.callExpression(recast.types.builders.identifier('require'), [
          recast.types.builders.literal('https'),
        ]),
      ),
      recast.types.builders.variableDeclarator(
        recast.types.builders.identifier('options'),
        recast.types.builders.callExpression(recast.types.builders.identifier('require'), [
          recast.types.builders.literal('./gen-cert-key'),
        /** 
          此处gen-cert-key.js文件实现了读取私钥和证书的操作，放在server.js同级目录。最终返回一个对象，
          const options = {{
            key: readFileSync(`${证书和私钥目录}` + '/portsip.key'),
           cert: readFileSync(`${证书和私钥目录}` + '/portsip.crt'),
          }
      */

        ]),
      ),
    ])
    // 在第一个节点前插入require表达式
    path.value.body.splice(0, 0, requireExpr, requirePath)
    this.traverse(path)
  },
  visitArrowFunctionExpression: function (path) {
    const params = path.node.params
    if (params.length && params[0].name === 'nextHandler') {
      // 找到 createServer 方法
      const functionBody = path.node.body.body
      const section = functionBody.find((v) => v.kind === 'const')
      const init = section.declarations[0].init
      // 增加参数配置证书
      init.arguments.unshift(recast.types.builders.variableDeclarator(recast.types.builders.identifier('options')))
      const callee = init.callee
      // 调用方法由http => https
      callee.object.name = 'https'
      return false
    }
    this.traverse(path)
  },
})
// 转换回js代码并写入文件
const output = recast.print(ast).code
writeFileSync(`${BUILD_DIR}/server.js`, output, 'utf-8')

此时打包完成后生成的 server.js 文件启动以后已经开启 https

在生产环境中报错找不到 recast 库的话，需要自行复制

// after-build.js
// copyFolder自行实现，单纯的文件夹复制
copyFolder('./node_modules/recast', `${打包目录}/node_modules/recast`)