Comment puis-je faire mon nextjs avec le site Express fonctionne sur SSL

Question

Nous avons un site en cours d'exécution sur Next.js et Express. C'est sur un serveur cPanel avec Aapche et avec nginx servant de proxy inverse.

J'ai besoin d'avoir ssl sur le site. Mais je suis assez confus avec la façon dont les configurations devraient être.

Mes 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 fonctionne sur 8080 Nginx fonctionne sur 80 Next.js fonctionne aussi bien sur 3007 et 8445 (je préfère pour ssl)

config Apache Mon contient ce qui suit pour cacher le port 3007

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

le site fonctionne très bien si j'accéder comme http://myreactsite.com. Mais il échoue quand j'accède https://myreactsite.com bien que je puisse accéder à la version de https en spécifiant le numéro de port en tant que https://myreactsite.com:8445

Je veux le faire fonctionner sans spécifier le port de https.

Comment puis-je obtenir mon site pour forcer toutes les pages à https sans spécifier le port?

Answer 1

Vous souhaitez probablement utiliser Apache pour toute la gestion SSL et écouter le port 443, puis le proxy vers votre port 3007. Essayez cette 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> 

Pour rediriger tout le trafic HTTP alors:

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

Answer 2

Sur la base de commentaires @fabian, je signale mes configurations de travail si elle aide quelqu'un ...

Ajouté le lignes suivantes dans la section hôte virtuel 443 pour le site dans 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] 

De plus, un dded la ligne suivante dans le fichier vhost nginx pour le site:

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