Next.jsの開発環境でもHTTPSが使いたい!
1. はじめに
最近、セッションベースの認証を導入する機会がありました。CORSの関係により、開発環境でHTTPSを使用する必要があったので、その方法をメモにしておきます。
2. Mkcertをインストールする
証明書自体はopenssl等でも作成できますが、ブラウザで信頼させるための設定が必要なので今回は、設定なしで使えることが魅力な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",
},
...