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`)
