首页 > 解决方案 > 如何为以下设置安装 SSL(React 前端 + Nodejs 后端 + 自定义域 Heroku)

问题描述

关于我的设置的一般信息

目前,我正在使用和一个为该 Web 应用程序提供数据的 API 构建一个 Web 应用程序。这两个应用程序都托管在heroku.com上,并且彼此独立运行。我从不同的托管服务提供商处购买了一个自定义域,并使用heroku 自定义域选项将 DNS 指向我的网站。

关于我的设置的技术细节

  • NodeJS 服务器:Express
  • NodeJS 版本:v10.15.0
  • 反应版本:v16.2.0
  • 自定义域:www.tabbs.nl
  • Heroku 域:tabbs-web-app.herokuapp.com

我遇到的问题

我一直在研究很多文档和教程,以便为 react/NodeJS 设置 SSL,但找不到一个关于如何为我的设置设置 SSL/安全性的不错的教程。

我已经阅读的教程:

我想达到什么目标?

我想要实现的目标是在 React Web 应用程序(前端)和 NodeJS API(后端)之间建立一个安全连接,以便它们之间的所有数据都是加密和安全的。此外,我希望我的自定义域(由与 Heroku 不同的托管服务提供商购买)是安全的并强制使用 https。

如有任何问题或其他信息,请随时提问!

标签: node.jsreactjsheroku

解决方案


您是否尝试过在节点中使用 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 函数,旨在作为回调传递给 Node 的 HTTP 服务器以处理请求。这使得为​​您的应用程序的 HTTP 和 HTTPS 版本提供相同的代码库变得很容易,因为应用程序不会从这些版本继承(它只是一个回调。

如果您使用的是 create react app,请打开终端并输入“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'));
});

推荐阅读