web-dev-qa-db-ja.com

NextJS + Expressを使用したローカルホストでのHTTPS

システム情報

目標

ローカルホストでSSLoverHTTPSを使用してWebアプリケーションを提供します

何が行われたか

  1. Create Next App を使用して基本的なNextJSアプリケーションを作成しました
  2. OpenSSLを使用して証明書とキーを生成し、プロジェクトディレクトリに移動しました
  3. Expressの依存関係を追加しました
  4. server.js内でエクスプレスを使用するようにアプリを構成しました
  5. server.jsスクリプト内でpackage.jsonを使用するようにスクリプトを変更しました。

server.js

const express = require('express');
const next = require('next');
const dev = process.env.NODE_ENV !== 'production';
const app = next({ dev });
const handle = app.getRequestHandler();
const port = 3000;

const https = require('https');
const fs = require('fs');
const httpsOptions = {
  key: fs.readFileSync('./certificates/key.pem'),
  cert: fs.readFileSync('./certificates/cert.pem')
};

app
  .prepare()
  .then(() => {
    const server = express();

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

    server.listen(port, err => {
      if (err) throw err;
      console.log('> Ready on http://localhost: ' + port);
    });
  })
  .catch(ex => {
    console.error(ex.stack);
    process.exit(1);
  });

追加情報

アプリは現在、yarn devを使用して初期化すると機能します。 この回答 を使用してhttps経由でアプリを提供しようとしましたが、NextJSを使用して現在のセットアップにこれを適用する方法を理解できませんでした。

私はこのソリューションを適用する方法をWebで調査することに多くの時間を費やしましたが、これを機能させる方法をまだ見つけていません。

どんな助けでも大歓迎です。

reactjsexpresshttpslocalhostnext.js
3
Ben

createServerモジュールのhttpsメソッドを使用する必要があります。

const { createServer } = require('https');
const { parse } = require('url');
const { readFileSync } = require('fs');
const next = require('next');

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

const httpsOptions = {
  key: readFileSync('./certificates/key.pem'),
  cert: readFileSync('./certificates/cert.pem')
};

app.prepare()
  .then(() => {
    createServer(httpsOptions, (req, res) => {
      const parsedUrl = parse(req.url, true);
      handle(req, res, parsedUrl);
    }).listen(port, err => {
      if (err) throw err;
      console.log(`> Ready on https://localhost:${port}`);
    })
  });
10
Tibi02

他の答えはただ急行を落とすようでした...サーバーコードと証明書の両方でいくつかの問題の後に解決策を見つけたので、うまくいけば他の誰かのトラブルを救うことができます！

まず、ここでローカルホスト証明書を作成するための確かなアドバイス： https://letsencrypt.org/docs/certificates-for-localhost/

次に、次のjsとexpressでHTTP/HTTPSを提供する単純なコード：

const next = require('next');
const express = require('express');
const http = require('http');
const https = require('https');
const fs = require('fs');

const httpPort = 3080;
const httpPort = 3443;
const dev = process.env.NODE_ENV !== 'production';
const app = next({ dev });
const handle = app.getRequestHandler();
const server = express();  

const options = { 
  key: fs.readFileSync('localhost.key'),
  cert: fs.readFileSync('localhost.crt'), 
};

app.prepare().then(() => {           
  server.all('*', (req, res) => {
    return handle(req, res)    
  });
  http.createServer(server).listen(httpPort);
  https.createServer(options, server).listen(httpsPort);
});

どちらのポートも省略またはリダイレクトできることは注目に値します。

1
PJRobot

以下は、httpsを使用する次のサーバーで非常にうまく機能します。

Node js httpsモジュールのこの公式ドキュメントを使用する HTTPSサーバーの作成

const { createServer } = require('http')
const { parse } = require('url')
const next = require('next')
const { readFileSync } = require('fs');

const port = parseInt(process.env.PORT, 10) || 3000
const dev = process.env.NODE_ENV !== 'production'
const app = next({ dev })
const handle = app.getRequestHandler()

const httpsOptions = {
    pfx: readFileSync('./certificates/AMB.pfx'),
    passphrase: 'Testabc$'
  };

app.prepare().then(() => {
    createServer(httpsOptions, (req, res) => {    
        const parsedUrl = parse(req.url, true)
        const { pathname, query } = parsedUrl

        if (pathname === '/login') {
            app.render(req, res, '/login', query)
        } else {
            handle(req, res, parsedUrl)
        }
    }).listen(port, err => {
        if (err) throw err
        console.log(`> Ready on https://localhost:${port}`)
    })
})
0
emarshah