如何为以下设置安装 SSL（React 前端 + Nodejs 后端 + 自定义域 Heroku）

Posted 2023-03-07

【中文标题】如何为以下设置安装 SSL（React 前端 + Nodejs 后端 + 自定义域 Heroku）

【英文标题】：How to install SSL for the following setup (React Frontend + Nodejs Backend + Custom Domain Heroku)

【发布时间】：2019-05-29 06:08:49

【问题描述】：

关于我的设置的一般信息

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

关于我的设置的技术细节

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

我遇到的问题

为了为 react/NodeJS 设置 SSL，我一直在研究大量文档和教程，但找不到关于如何为我的设置设置 SSL/安全性的不错教程。

我已经阅读过的教程：

Node + Express + Lets Encrypt How to use SSL/TLS with nodejs 堆栈溢出帖子，可能还有很多我现在忘记了。

我想实现什么？

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

如有任何问题或其他信息，请随时提问！

【参考方案1】：

你试过在 node 中使用 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'));
);

如果你使用 react 路由器来处理你的 web 应用程序的路由，那么你可以修改 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'));
);

【讨论】：

有道理！但是为了提供 https，SSL 证书部分呢？ :)

您可以为 https 模块提供一个可选对象作为第一个参数。看这里：sitepoint.com/how-to-use-ssltls-with-node-js

mate...请快速查看问题，我已经阅读了该文章，但问题不在于创建 ssl 或提供，但我需要 1 个证书并将它们分别用于服务器？还是我需要创建不同的 SSL 证书？你知道吗？

您找到解决方案了吗？我对 heruko 和自定义域有同样的问题。

【参考方案2】：

这不是一个复杂的问题，不用担心 ssl，只需为 Node.JS/Express 创建自己的证书就足够了。

而且，React 有一个内置的方式来进行 api 调用，

将此行添加到您的 React 安装的 package.json 中，

"proxy": "http://localhost:8000/"

然后像这样调用 api 服务，

 //Generic API Call
 callApi = async () => 
    const response = await fetch('/api/hello');
    const body = await response.json();
    if (response.status !== 200) throw Error(body.message);

    return body;
  ;

  // A Submit handler to proxy
  handleSubmit = async e => 
    e.preventDefault();
    const response = await fetch('/api/myrequest', 
      method: 'POST',
      headers: 
        'Content-Type': 'application/json',
      ,
      body: JSON.stringify( post: this.state.post ),
    );
    const body = await response.text();

    this.setState( responseToPost: body );
  ;

一切正常。