当前位置：首页>后端>正文

Next.js开启Https的方法

后端2024-04-23 23:12:13

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

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

开发环境

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

生产环境

生产环境下，有三个选择

使用Vercel的服务，交给供应商 Provider 搞定
使用 Nginx 代理，证书都交 Nginx 来配置。这种比较简单。具体可以自行搜索，教程很多
使用 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`)

查看全文

https://www.xamrdz.com/backend/39r1931539.html

开发环境

生产环境

解决方案

思路

步骤

相关文章：