Next.jsの開発環境でもHTTPSが使いたい!

1. はじめに

最近、セッションベースの認証を導入する機会がありました。CORSの関係により、開発環境でHTTPSを使用する必要があったので、その方法をメモにしておきます。

2. Mkcertをインストールする

証明書自体はopenssl等でも作成できますが、ブラウザで信頼させるための設定が必要なので今回は、設定なしで使えることが魅力なmkcertを使用します。

https://github.com/FiloSottile/mkcert

開発用のドメインはループバックを指定しています。そのドメインに向けて証明書を発行します。

$ mkcert dev.example.com

コマンドを実行すると、dev.example.com.pem と dev.example.com-key.pemというファイルが出力されますが、そのままではファイル名が長いので、それぞれ、リネームしておきましょう。

$ mv dev.example.com.pem cert.pem
$ mv dev.example.com-key.pem key.pem

3. httpsサーバーを作成する

server.js

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

const app = next({ dev: true });
const handle = app.getRequestHandler();

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

app.prepare().then(() => {
  createServer(httpsOptions, (req, res) => {
    const baseURL = 'https://' + req.headers.host + '/';
    const reqUrl = new URL(req.url, baseURL);
    handle(req, res, reqUrl);
  }).listen(443, (err) => {
    if (err) throw err;
    console.log('> Ready on https://dev.example.com/');
  });
});

4. package.jsonを変更

package.json

  ...
  "scripts": {
    "dev": "node server.js",
  },
  ...