Heroku 将 Next.js React 客户端应用程序 http 重定向到 https

IT技术 reactjs ssl heroku https next.js
2021-04-24 15:48:51

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

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

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

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

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

/* 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 */
})

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

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

2个回答

我在我的一个生产应用程序中执行此操作。

我们准备下一个应用程序对象并初始化一个快速服务器。这是在server.js文件中完成的。您可以在有关自定义服务器的文档中阅读更多相关信息。

Next.js 在他们的 github 中的 examples 文件夹中还有一个关于自定义快速服务器的示例。它在这里。

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 还自动运行npm run build，因此它应该为您构建应用程序。

Heroku 目前不提供“开箱即用”的功能来强制使用httpsfor node apps。

但是，随着 Nextjs v12 的发布，您无需设置自定义服务器并使用中间件即可完成此操作。

有关vs 的示例代码和优点，请参阅此答案。middlewarecustom server

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

import sslRedirect from 'next-ssl-redirect-middleware';
export default sslRedirect({});
其它你可能感兴趣的问题
上一篇强制 React 通过注入的 JavaScript 触发事件 下一篇在不损坏步进器的情况下，打印头可以移动多快？