Next.jsのローカルサーバにhttpsでアクセスできるようにする 💻

はじめに

blog.kimizuka.org

こちらの記事の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にアクセスする（安全ではありません）」というリンクが表示されるので、押下すると無事にサイトが表示されるはずです。

みかづきブログ・カスタム

基本的にはちょちょいのほいです。