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

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

自前で証明書を発行してローカルにExpressで立てたスタティックなウェブサーバにhttpsでアクセスできるようにする 💻

はじめに

Expressでウェブサーバを建てる際、

http://localhost:3000 でアクセスすることが多い(ポートが3000の場合)のですが、

自前で証明書を準備して、

https://localhost:3000 でアクセスできるように設定してみます。

僕の開発環境がMacOSなので、MacOSでしか試してません。

証明書の発行

ターミナルから、

❶ 秘密鍵の発行

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を使ってウェブサーバを作成

app.js

const https = require('https');
const path = require('path');
const fs = require('fs');
const express = require('express');
const app = express();
const options = {
  key: fs.readFileSync(path.resolve(__dirname, './server.key')), // いましがた作成した server.key を読み込む
  cert: fs.readFileSync(path.resolve(__dirname, './server.crt')) // いましがた作成した server.crt を読み込む
};

app.use('/', express.static(__dirname + '/public')); // publicディレクトリをホスティングする

https.createServer(options, app).listen(3000);

これでOKです。

警告を乗り越えてウェブサイトにアクセスする

サーバを起動して、https://localhost:3000 にアクセスすると、

という感じで警告が表示されます。
左下の「詳細設定」をクリックすると、

「localhostにアクセスする(安全ではありません)」というリンクが表示されるので、押下するとpublicディレクトリの中身が表示されるはずです。

リポジトリ

今回のソースコードは、まるまるこちらのリポジトリに上げてあります。

github.com

Expressを使用しない場合

単純にスタティックなウェブサーバにhttpsでアクセスしたい場合は、 servez を使うのが手軽でおすすめです。

blog.kimizuka.org