Heroku redirect Next.js React 客户端应用程序 http 到 https

Question

我在 Heroku 上部署了一个快速服务器：https://server.mydomain.com

和一个 Next.js React 应用程序也部署在 Heroku 上：https://app.mydomain.com

它们的 SSL 证书都由 Heroku 自动配置，当我访问 https 域时，它们按预期工作。

我遇到的问题是当我访问http://app.mydomain.com时，它没有重定向到https://app.mydomain.com.

我在网上找到的所有解决方案都指向在服务器上强制使用 SSL：

this popular question 表示要检查 x-forwarded-proto 值：

/* At the top, with other redirect methods before other routes */
app.get('*',function(req,res,next){
 if(req.headers['x-forwarded-proto']!='https')
   res.redirect('https://app.mydomain.com'+req.url)
 else
   next() /* Continue to other routes if we're not redirecting */
})

和其他人建议使用像 express-sslify or heroku-ssl-redirect.

这些解决方案对于服务器请求工作正常，但加载 React 客户端页面不一定会触发 app.get()。显然，React 客户端可以运行独立于服务器。

所以问题是： 有人如何为子域强制使用 https Next.js Heroku 上的 React 客户端应用程序？不使用快速服务器方法？

Answer 1

我在我的一个生产应用程序中这样做。

我们准备下一个应用程序对象并初始化一个快速服务器。这是在 server.js 文件中完成的。您可以在 docs about a custom server.

中阅读更多相关信息

Next.js 在示例文件夹中的 github 中也有一个关于自定义快递服务器的示例。这是 here.

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

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

const handle = app.getRequestHandler();

app
  .prepare()
  .then(() => {

    const server = express();

    server.use((req, res, next) => {
      const hostname = req.hostname === 'www.app.domain.com' ? 'app.domain.com' : req.hostname;

      if (req.headers['x-forwarded-proto'] === 'http' || req.hostname === 'www.app.domain.com') {
        res.redirect(301, `https://${hostname}${req.url}`);
        return;
      }

      res.setHeader('strict-transport-security', 'max-age=31536000; includeSubDomains; preload');
      next();
    });

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

    server.listen(
      4242,
      error => {
        if (error) throw error;
        console.error('Listening on port 4242');
      }
    );

  })
  .catch(error => {
    console.error(error);
    process.exit(1);
  });

至于部署到 Heroku，您应该能够像这样自定义 npm start 脚本来启动 nextjs：

"scripts": {
  "dev": "next",
  "build": "next build",
  "start": "next start"
}

Heroku 也会自动运行s npm 运行 build 所以它应该为你构建应用程序。

Answer 2

Heroku 当前不向提供“开箱即用”的功能。

但是，随着 Nextjs v12 的发布，您无需设置 custom server and use middleware 即可完成此操作。

参见 this answer 示例代码和 middleware 对比 custom server 的优势。

我还发布了一个 npm package 来处理这个问题：

import sslRedirect from 'next-ssl-redirect-middleware';
export default sslRedirect({});

Heroku redirect Next.js React 客户端应用程序 http 到 https

Heroku redirect Next.js React client app http to https

reactjs

ssl

heroku

https

next.js