はじめに
こちらの記事 のNext.js版です。
yarn dev で立ち上がるサーバをhttpsでアクセスできるようにします。
※ 正確には yarn dev は上書きせずに yarn dev:https を作ります
証明書の発行
ターミナルから、
❶ 秘密鍵の発行
openssl genrsa 2048 > server.key
❷ 証明書署名要求の生成 ※ Country Nameの入力が必須
openssl req -new -key server.key > server.csr
❸ サーバー証明書の生成(有効期限は適当に10年に設定)
openssl x509 -in server.csr -days 3650 -req -signkey server.key > server.crt
と操作し、server.key と server.crt を作成します。
証明書署名要求を生成する際に、対話式に色々聞かれるのですが、「Country Name」だけ入力すれば、あとは無視してOKでした。
なにも入力せずにエンターを連打すると、 server.csr と server.crt が空になるので注意が必要です。
ここまでは、こちらの記事 と全く一緒です。
expressをインストールする
yarn add -D express
で、Next.jsのプロジェクトにexpressを導入します。
server.jsを作成する
server.js
const https = require('https'); const path = require('path'); const fs = require('fs'); const express = require('express'); const next = require('next'); (async () => { const nextApp = next({ dev: process.env.NODE_ENV !== 'production' }); const handle = nextApp.getRequestHandler(); await nextApp.prepare(); const expressApp = express(); expressApp.get('*', (req, res) => { return handle(req, res); }); const options = { key: fs.readFileSync(path.resolve(__dirname, './server.key')), // いましがた作成した server.key を読み込む cert: fs.readFileSync(path.resolve(__dirname, './server.crt')) // いましがた作成した server.crt を読み込む }; https.createServer(options, expressApp).listen('3000', '0.0.0.0'); })();
これでOKです。
package.json に yarn dev:https を追加する
{ "scripts": { "dev": "next dev", "dev:https": "node ./server.js" } }
追加します。
警告を乗り越えてウェブサイトにアクセスする
yarn dev:https で、サーバを起動して、https://localhost:3000 にアクセスすると、
という感じで警告が表示されます。
左下の「詳細設定」をクリックすると、
「localhostにアクセスする(安全ではありません)」というリンクが表示されるので、押下すると無事にサイトが表示されるはずです。