Как установить SSL для следующей настройки (React Frontend + Nodejs Backend + Custom Domain Heroku)

Question

Общая информация о моей настройке

В настоящее время я создаю веб-приложение с использованием реаги и API nodejs , который предоставляет данные для этого веб-приложения. Оба приложения размещены на heroku.com и работают независимо друг от друга. Я купил собственный домен у другого хостинг-провайдера и использовал опцию heroku custom domain , чтобы указать DNS на моем веб-сайте.

Технические подробности о моей настройке

• NodeJS сервер: Экспресс
• NodeJS версия: v10.15.0
• Реактивная версия: v16.2.0
• Пользовательский домен: www.tabbs.nl
• Домен Heroku: tabbs-web-app.herokuapp.com

Проблема, с которой я сталкиваюсь

Я копался во многих документациях и учебных пособиях, чтобы настроить SSL для реакции / NodeJS, но не смог найти приличного учебного пособия о том, как установить SSL / безопасность для моей установки.

Уроки, которые я уже прочитал:

• Узел + Экспресс + Позволяет зашифровать
• Как использовать SSL / TLS с nodejs
• Переполнение стека сообщений и, вероятно, многое другое, что я сейчас забыл.

Чего я хочу достичь?

Цель, которую я хотел бы достичь, - это установить безопасное соединение между веб-приложением React (внешний интерфейс) и NodeJS API (внутренний интерфейс), чтобы все данные между ними были зашифрованы и безопасны. Кроме того, я хочу, чтобы мой пользовательский домен (купленный другим хостинг-провайдером, нежели Heroku) был защищенным и принудительным с использованием https.

По любым вопросам или дополнительной информации, пожалуйста, не стесняйтесь спрашивать!

Answer 1

Вы пытались использовать модуль https в узле?

Вы можете сделать что-то вроде этого:

var express = require('express');
var https = require('https');
var http = require('http');
var app = express();

http.createServer(app).listen(80);
https.createServer(options, app).listen(443);

Приложение, возвращаемое функцией express (), фактически является функцией JavaScript, разработаннойдля передачи на HTTP-серверы Node в качестве обратного вызова для обработки запросов.Это упрощает предоставление версий вашего приложения как HTTP, так и HTTPS с одной и той же кодовой базой, поскольку приложение не наследует их (это просто обратный вызов.

Если вы используете приложение создания реакции, откройтевашего терминала и введите «npm run build». Это создаст папку сборки со всеми вашими статическими файлами.

Теперь вернитесь в бэкэнд-сервис вашего узла и добавьте следующее:

var express = require('express');
var path = require('path');
var https = require('https');
var http = require('http');
var app = express();

const options = {
  key: fs.readFileSync("/srv/www/keys/my-site-key.pem"),
  cert: fs.readFileSync("/srv/www/keys/chain.pem")
};
http.createServer(app).listen(80);
https.createServer(options, app).listen(443);

app.use(express.static(path.join(__dirname, 'build')));

app.get('/', function(req, res) {
  res.sendFile(path.join(__dirname, 'build', 'index.html'));
});

Если вы используете реакционный маршрутизатор для обработки маршрутизации для своего веб-приложения, вы должны изменить запрос GET следующим образом:

var express = require('express');
const path = require('path');
var https = require('https');
var http = require('http');
var app = express();
const options = {
  key: fs.readFileSync("/srv/www/keys/my-site-key.pem"),
  cert: fs.readFileSync("/srv/www/keys/chain.pem")
};
http.createServer(app).listen(80);
https.createServer(options, app).listen(443);

app.use(express.static(path.join(__dirname, 'build')));

app.get('/*', function(req, res) {
  res.sendFile(path.join(__dirname, 'build', 'index.html'));
});