如何使用Express站点在ssl上运行我的nextjs

Question

We have a site running on Next.js and Express. This is on a cPanel server with Aapche and together with nginx serving as reverse proxy.

I need to have ssl on the site. But I am quite confuused with how the configurations should be.

My 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 runs on 8080 Nginx runs on 80 Next.js runs on both 3007 and 8445(I prefer it for ssl)

My Apache config contains the following to hide the port 3007

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

The site works fine if I access it as 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

I want to make it work without specifying the https port.

How can I get my site to force all pages to https without specifying the port?

Answer 1

You probably want to use Apache for all the SSL handling and listen to the 443 port, then proxy to your 3007 port. Try this config:

<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>

To redirect all HTTP traffic then:

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

Answer 2

Based on @fabian comment, I am posting my working configurations if it helps someone...

Added the following lines in the 443 virtual host section for the site in apache.conf :

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]

Also, added the following line in the nginx vhost file for the site :

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