Heroku перенаправить Next.js Реагировать клиентское приложение http на https - PullRequest
Новая
       21

Heroku перенаправить Next.js Реагировать клиентское приложение http на https

6 голосов
/ 02 июля 2019

У меня есть экспресс-сервер, развернутый в 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 на сервере: 

/* 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 может работать независимо от сервера.

Итак, вопрос в следующем: Как кто-то принудительно устанавливает https для дочернего приложения клиента React Next.js в Heroku?Без использования экспресс-методов сервера?

1 Ответ

2 голосов
/ 12 июля 2019

Я делаю это в одном из моих производственных приложений.

Мы готовим следующий объект приложения и запускаем экспресс-сервер.Это делается в файле server.js .Вы можете прочитать больше об этом в документах о пользовательском сервере .

. Next.js также имеет пример в своем github в папке примеров о пользовательском экспресс-сервере.Это здесь . 

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 , чтобы запускать следующие файлы следующим образом: 

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

Heroku также автоматически запускает npm run build , поэтому приложение должно быть создано для вас.

...