在本地使用NextJS + Express实现HTTPS

14 浏览
0 Comments

在本地使用NextJS + Express实现HTTPS

系统信息\n

\n目标\n在localhost上使用SSL通过HTTPS提供Web应用程序\n已完成的工作\n

    \n

  1. 使用Create Next App创建了基本的NextJS应用程序

    2. \n

  2. 使用OpenSSL生成了一个证书和密钥，并将其移动到项目目录中

    3. \n

  3. 添加了Express依赖

    4. \n

  4. 配置应用程序在server.js中使用express

    5. \n

  5. 更改脚本以在package.json脚本中使用server.js

    6. \n

\nserver.js\n

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);
  });

\n额外信息\n该应用程序在使用yarn dev初始化时可以正常工作。我尝试使用这个答案来通过https提供应用程序，但是我无法弄清楚如何将其应用到我当前使用NextJS的设置中。\n我花了很多时间在网络上研究如何应用这个解决方案，但是还没有找到让它工作的办法。\n非常感谢任何帮助。

0

3 答案

0 Comments

问题的原因是在本地开发环境中，使用NextJS和Express搭建的项目默认是使用HTTP协议进行通信，而不是HTTPS协议。然而，某些情况下我们需要在本地使用HTTPS协议进行开发和测试，例如测试HTTPS相关功能或与第三方API进行安全通信等。

解决方法是通过运行一个名为local-ssl-proxy的工具来实现在本地使用HTTPS。具体步骤如下：

第一步：运行开发服务器并获取其HTTP端口。

第二步：使用local-ssl-proxy工具，并指定目标端口为当前开发服务器的端口。具体命令如下：

npx local-ssl-proxy --source 3001 --target 3000

第三步：访问全新的HTTPS服务，可以通过https://localhost:3001或在局域网中使用您的IP地址，例如https://192.168.1.21:3001。

通过以上步骤，我们可以在本地开发环境中使用HTTPS协议进行开发和测试，以满足特定需求。

0
0 Comments

HTTPS on localhost using NextJS + Express 的问题是在设置服务器代码和证书时遇到了困难。下面是解决方法：

首先，可以在这里找到创建 localhost 证书的可靠建议：https://letsencrypt.org/docs/certificates-for-localhost/

其次，下面是使用 NextJS 和 Express 提供 HTTP/HTTPS 的简单代码：

const next = require('next');
const express = require('express');
const http = require('http');
const https = require('https');
const fs = require('fs');
const ports = {
  http: 3080,
  https: 3443
}
const dev = process.env.NODE_ENV !== 'production';
const app = next({ dev });
const handle = app.getRequestHandler();
const server = express();
const options = { 
  key: fs.readFileSync('localhost.key'),
  cert: fs.readFileSync('localhost.crt'), 
};
app.prepare().then(() => {           
  server.all('*', (req, res) => {
    return handle(req, res)    
  });
  http.createServer(server).listen(ports.http);
  https.createServer(options, server).listen(ports.https);
});

值得注意的是，可以省略或重定向任一端口。

0
0 Comments

问题的原因是作者之前尝试使用createServer方法，但用法不正确。解决方法是使用https模块的createServer方法，并结合Next.js和Express实现本地HTTPS服务器。

首先，我们需要引入所需的模块和库：

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')
};

然后，我们准备Next.js应用程序并创建HTTPS服务器：

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

以上代码中，我们使用createServer方法创建了一个HTTPS服务器，传入了HTTPS选项httpsOptions，并在指定的端口上进行监听。在请求到达时，我们解析URL并使用handleRequest方法处理请求。

这个解决方法可以帮助我们在本地使用Next.js和Express实现HTTPS服务器的功能。

0