reactjs - 使用 NextJS + Express 在本地主机上使用 HTTPS

Question

系统信息

• Express :4.16.4
• NextJS :8.0.3
• React :16.8.4
• ReactDOM :16.8.4

目标

在本地主机上使用基于 HTTPS 的 SSL 为 Web 应用程序提供服务

已经做了什么

1. 使用 Create Next App 创建了基本的 NextJS 应用程序
2. 使用 OpenSSL 生成证书和 key 并将其移至项目目录
3. 添加了 Express 依赖项
4. 将应用配置为在 server.js 内使用 Express
5. 更改了脚本以使用 package.json 脚本中的 server.js。

server.js

const express = require('express');
const next = require('next');
const dev = process.env.NODE_ENV !== 'production';
const app = next({ dev });
const handle = app.getRequestHandler();
const port = 3000;

const https = require('https');
const fs = require('fs');
const httpsOptions = {
  key: fs.readFileSync('./certificates/key.pem'),
  cert: fs.readFileSync('./certificates/cert.pem')
};

app
  .prepare()
  .then(() => {
    const server = express();

    server.get('*', (req, res) => {
      return handle(req, res);
    });

    server.listen(port, err => {
      if (err) throw err;
      console.log('> Ready on http://localhost: ' + port);
    });
  })
  .catch(ex => {
    console.error(ex.stack);
    process.exit(1);
  });

额外信息

该应用程序当前在使用yarn dev初始化时可以运行。我尝试使用 this answer 通过 https 提供该应用程序但我无法弄清楚如何使用 NextJS 将其应用到我当前的设置中。

我花了很多时间在网络上研究如何应用此解决方案，但尚未找到实现此功能的方法。

非常感谢任何帮助。

Answer 1

您只需要使用https模块的createServer方法即可。

const { createServer } = require('https');
const { parse } = require('url');
const { readFileSync } = require('fs');
const next = require('next');

const port = 3000;
const dev = process.env.NODE_ENV !== 'production';
const app = next({ dev });
const handle = app.getRequestHandler();

const httpsOptions = {
  key: readFileSync('./certificates/key.pem'),
  cert: readFileSync('./certificates/cert.pem')
};

app.prepare()
  .then(() => {
    createServer(httpsOptions, (req, res) => {
      const parsedUrl = parse(req.url, true);
      handle(req, res, parsedUrl);
    }).listen(port, err => {
      if (err) throw err;
      console.log(`> Ready on https://localhost:${port}`);
    })
  });