在 Heroku 上将 Next.js 从 http 重定向到 https

Question

我已经找到了很多解决这个问题的方法，但它们都需要使用自定义服务器破坏 SSR，或者破坏 Next.js 中的 API 路由。我需要重定向到 https 并且仍然有 SSR 和 API 路由工作。

我尝试过使用 node 和 express 自定义服务器和 nginx buildpack 的几种变体，但都没有解决列出的标准。下面的代码是我最接近让它工作的代码。它适用于第一次加载，但随后会在来自非安全 http 的后续加载中中断。这也可能会破坏 SSR。

const { createServer } = require('http');
const { parse } = require('url');
const next = require('next');

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

app.prepare().then(() => {
  createServer((req, res) => {
    res.setHeader(
      'strict-transport-security',
      'max-age=31536000; includeSubDomains; preload'
    );

    if (req.headers['x-forwarded-proto'] === 'http') {
      res.writeHead(301, { Location: `https://${req.headers.host}${req.url}` });
    }

    const parsedUrl = parse(req.url, true);
    handle(req, res, parsedUrl);

  }).listen(process.env.PORT, (err) => {
    if (err) throw err;
    console.log('> NextJS Server running...');
  });
});

Answer 1

您可以通过 Express 集成来实现这一点。 Next.js 服务器在这一点上完全帮不了你。

快速集成

const express = require('express')
const next = require('next')

const port = parseInt(process.env.PORT, 10) || 3000
const dev = process.env.NODE_ENV !== 'production'
const app = next({ dev })
const handle = app.getRequestHandler()

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

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

  server.listen(port, (err) => {
    if (err) throw err
    console.log(`> Ready on http://localhost:${port}`)
  })
})

现在使用heroku-ssl-redirect 可以获得所需的结果。

安装heroku-ssl-redirect

npm install heroku-ssl-redirect

现在进入您的server.js 文件并在开头输入以下内容：

const sslRedirect = require('heroku-ssl-redirect');

然后在实现 express 的下面添加这一行，但在调用登陆页面的 GET 路由的代码之前：

app.use(sslRedirect());

正确下订单非常重要。希望这能解决您的问题！