如何使Express网站上的nextjs在ssl上工作

apache React.js

神无

2020-03-24

我们有一个在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进行访问,则该站点可以正常运行但是,尽管我可以通过将端口号指定为https://myreactsite.com:8445来访问https版本,但是当我访问https://myreactsite.com时它会失败。

我想使其工作而无需指定https端口。

如何在不指定端口的情况下使网站强制所有页面进入https?

第3209篇《如何使Express网站上的nextjs在ssl上工作》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

2个回答
HarryHarry 2020.03.24

您可能要使用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>
DavaidTony宝儿 2020.03.24

基于@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 vhost文件中添加了以下行:

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

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android