如何让我的 nextjs with Express 站点在 ssl 上工作

Question

我们在 Next.js 和 Express 上有一个站点运行。这是在带有 Aapche 的 cPanel 服务器上，并与作为反向代理的 nginx 一起。

我需要在站点上使用 ssl。但是我对应该如何配置感到很困惑。

我的server.js：

const express = require('express')
const next = require('next')
const https = require('https');
const fs = require('fs');
//const forceSSL = require('express-force-ssl')

var ssl_options = {
 key: fs.readFileSync('/home/myreactsite.key'),
 cert: fs.readFileSync('/home/myreactsite.crt'),
};

const dev = process.env.NODE_ENV !== 'production'
const app = next({ dev })
const handle = app.getRequestHandler()

const favicon = require('serve-favicon')
const path = require('path')

app.prepare()
.then(() => {
 const server = express()
 server.use(favicon(path.join(__dirname, 'static', 'images', 'favicon.ico')))

 server.get('*', (req, res) => {
  return handle(req, res)
})

server.listen(3007, (err) => {
   if (err) throw err
   console.log('> Ready on http://localhost:3007')
 })

var httpsServer = https.createServer(ssl_options,server).listen('8445', (err) => {
  if (err) throw err
  console.log('> Ready on https://localhost:8445')
})
})
.catch((ex) => {
 console.error(ex.stack)
 process.exit(1)
})

Apache 在 8080 上运行 Nginx 运行在 80 Next.js 在 3007 和 8445 上运行（我更喜欢 ssl）

我的 Apache 配置包含以下隐藏端口 3007

<Proxy *>
   Order deny,allow
   Allow from all
</Proxy>
ProxyPass / http://myreactsite.com:3007/

如果我以 http://myreactsite.com . But it fails when I access https://myreactsite.com though I can access https version by specifying the port number as https://myreactsite.com:8445

访问该站点，该站点将正常运行

我想让它在不指定 https 端口的情况下工作。

如何让我的网站在不指定端口的情况下强制所有页面都使用 https？

Answer 1

您可能希望使用 Apache 进行所有 SSL 处理并监听 443 端口，然后代理到您的 3007 端口。试试这个配置：

<VirtualHost *:443>
  ProxyPreserveHost On
  ProxyRequests Off
  ServerName myreactsite.com
  ServerAlias myreactsite.com
  ProxyPass / http://0.0.0.0:3007/
  ProxyPassReverse / http://0.0.0.0:3007/
  SSLEngine On
  SSLProxyEngine On
  SSLCertificateFile /home/myreactsite.crt
  SSLCertificateKeyFile /home/myreactsite.key
</VirtualHost>

然后重定向所有 HTTP 流量：

<VirtualHost *:80>
  ServerName myreactsite.com
  Redirect / https://myreactsite.com/  
</VirtualHost>

Answer 2

根据@fabian 的评论，如果对某人有帮助，我将发布我的工作配置...

在 apache.conf 中的站点的 443 虚拟主机部分添加了以下行：

ProxyPreserveHost On
ProxyRequests Off
<Proxy *>
    Order deny,allow
    Allow from all
</Proxy>
ProxyPass / http://example.com:3000/
ProxyPassReverse / http://example.com:3000/
SSLProxyEngine On
#To redirect to https and www version
RewriteEngine On
RewriteCond %{HTTP_HOST} ^example\.com$ [NC]
RewriteRule ^ https://www.example.com%{REQUEST_URI} [R=301,L]

此外，在站点的 nginx 虚拟主机文件中添加了以下行：

server {
  ...
  ...
#To redirect all http requests to https+www
return 301 https://www.example.com$request_uri;
  ...
  ...
}

如何让我的 nextjs with Express 站点在 ssl 上工作

How can I make my nextjs with Express site work on ssl

apache

express

ssl

cpanel

next.js