Macでオレオレ証明書＋ webpack-dev-server

3999 ワード
SSL webpack webpack-dev-server HTTPS SSL テキストリンク

2018/8/29 Sierra で確認済み。

今回はアプリの webView などで呼ばれる事を想定して、Macのネットワーク名で証明書を作成します。

Macのネットワーク名取得

[システム環境設定]→[共有]で出てくる、以下の画面でMacのネットワーク名を確認します。

pemファイル作成

プロジェクト以下の適当なフォルダに移動して下記を実行。今回は public/ca というフォルダで実行しています。

cd public
mkdir ca & cd ca
openssl req -days 365 -new -nodes -newkey rsa:4096 -x509 -keyout cert.pem -out cert.pem

国など聞かれますが、大事なのは Common Name です。先程メモしたMacのネットワーク名を入力します。

これで cert.pem が出来ました。これで一応動きはするんですが、この証明書をMacに信頼させます。

証明書のインストール

下記コマンドでキーチェーンアクセスを起動し、キーチェーンに登録します。

open cert.pem

登録した証明書を探して、ダブルクリックで詳細を開きます。信頼という項目があるので、常に信頼に変更します。


webpack-dev-server の設定

configの中身を下記のように書き換えます。

const path = require('path');
const fs = require('fs');
...
    devServer: {
        https: {
            key: fs.readFileSync(path.resolve(__dirname, 'public/ca/cert.pem')),
            cert: fs.readFileSync(path.resolve(__dirname, 'public/ca/cert.pem')),
        },
    }