web-dev-qa-db-ja.com

HTTPS / Web Sockets Secureで実行されているWebpack Dev Server

通常、開発者モードでは、WebpackはHTTPを使用して実行されます。通常、HTTPとWebパックを使用してコンテンツを提供するWebサーバーは、別のポートでhttp/websocketsを使用します。

Https上でWebサーバーを実行し、https/websocket上でwebpackを安全に実行することは可能ですか？

sslhttpswebpackdevserver
68
Licx

webpack docs を参照してください

Webpack-dev-serverコマンドに追加できるフラグがあります

webpack-dev-server --https
92
royka

上記の答えはcliには正しいですが、CLIを使用していない場合は、次のようなことを（gulpタスクで）行うことができます。

var WebpackDevServer = require('webpack-dev-server');

new WebpackDevServer(webpack(WebpackDevConfig), {
    https: true,
    hot: true,
    watch: true,
    contentBase: path.join(__dirname, 'src'),
    historyApiFallback: true
}).listen(1337, 'localhost', function(err, result) {
    if (err) {
        console.log(err);
    }
    console.log('Dev server running at https://localhost:1337');
});
27
dangoldnj

これはTEST環境のみの場合：

次のようにwebpack-dev-serverを構成する必要があります。

webpack-dev-server --https --cert ./cert.pem --key ./key.pem

ただし、webpackがキーからパスフレーズを読み取ろうとすると、既知のエラーが発生します。 このリンクをご覧ください

最も簡単な回避策は、パスフレーズなしでキーを生成することです（これのセキュリティ上の影響はわかりませんが、これはテスト専用です）。

キーからパスフレーズを取り出すには、次のコマンドを使用します。

$ openssl rsa -in key.pem -out newKey.pem

プレビュー設定行で新しいキーを使用します

14
Khalid Hakami

webpack-dev-server --httpsを使用して、自己署名証明書を作成します。ただし、すべてのユースケースで機能するわけではありません。

ブラウザはセキュリティ例外を要求し、接続が安全でないことをURLバーに表示します。

したがって、 mkcert を使用して、localhostのローカルで信頼できる開発証明書を作成することをお勧めします

次に、CLI経由で使用します。

webpack-dev-server --https --key C:/Users/User/localhost-key.pem --cert C:/Users/User/localhost.pem --cacert C:/Users/User/AppData/Local/mkcert/rootCA.pem

またはwebpack.config.jsでdevServer.httpsオプションを構成します。

devServer: {
    https: {
        key: fs.readFileSync('C:/Users/User/localhost-key.pem'),
        cert: fs.readFileSync('C:/Users/User/localhost.pem'),
        ca: fs.readFileSync('C:/Users/User/AppData/Local/mkcert/rootCA.pem')
    }
}

mkcertは、デフォルトでUnix形式の.pemファイルを作成します。そのため、Windowsを使用している場合は、たとえば、次を使用してWindows形式に変換する必要があります。メモ帳++

3
Ilyich

私は反応プロジェクトに取り組んでいますが、このプロジェクトにSSL証明書を追加し、httpsで私のウェブサイトを実行したいので、以下の手順に従ってください：

  1. Webpack.config.jsにhttpsを追加する

     devServer:{

          https: true,
          Host: '0.0.0.0', // you can change this ip with your ip
          port: 443,       // ssl defult port number
          inline: true,

          historyApiFallback: true,
          publicPath: '/',
          contentBase: './dist',
          disableHostCheck: true
   }

  2. Package.jsonファイルにSSLパブリック証明書を追加package.jsonファイルに証明書を追加したくない場合は、webpack.config.jsに証明書を追加する必要があります。プロジェクトに証明書を追加することは必須ですpackage.jsonファイルまたはwebpack.config.jsでそれを行うことができます

Package.jsonの場合

scripts: {
                    "test": "echo \"Error: no test specified\" && exit 1",
                    "build": "webpack --mode production",
                    "start": "webpack-dev-server  --open --https --cert /path/to/private.crt --key /path/to/private.key"

            }

またはwebpack.config.js

 devServer:{

              https: true,
              Host: '0.0.0.0', // you can change this ip with your ip
              port: 443,       // ssl defult port number
              inline: true,
              https: {
                    key: fs.readFileSync('/path/to/private.pem'),
                    cert: fs.readFileSync('/path/to/private.pem'),
                    ca: fs.readFileSync('/path/to/private.pem')
                    }
              historyApiFallback: true,
              publicPath: '/',
              contentBase: './dist',
              disableHostCheck: true
       }
  1. 端末でnpm startコマンドを実行するか、pm2 start npm -- startを使用することもできます
1
Rawan-25

私の場合、これらのコマンドをすべて実行して証明書を取得する必要がありました。

openssl genrsa -out private.key 4096
openssl req -new -sha256 -out private.csr -key private.key
openssl x509 -req -days 3650 -in private.csr -signkey private.key -out private.crt -extensions req_ext
openssl x509 -in private.crt -out private.pem -outform PEM

そして最後に：

npm run dev -- --open --https --cert private.pem --key private.key
0
AndreFeijo