HTTPS / 웹 소켓에서 실행되는 Webpack Dev Server 보안

Question 1

일반적으로 개발자 모드에서 Webpack은 HTTP를 사용하여 실행됩니다. 일반적으로 별도의 포트에서 http / websockets를 사용하여 HTTP 및 웹팩을 통해 콘텐츠를 제공하는 웹 서버가 있습니다.

https에서 웹 서버를 실행하고 https / websocket에서 webpack을 안전하게 실행할 수 있습니까?

Question 2

webpack-dev-server 명령에 추가 할 수있는 플래그가 있습니다.

webpack-dev-server --https

Question 3

위의 대답은 cli에 맞지만 CLI에 있지 않은 경우 다음과 같이 할 수 있습니다 (거의 작업에서).

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');
});

Question 4

테스트 환경에만 해당됩니다.

다음과 같이 webpack-dev-server를 구성해야합니다.

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

가장 쉬운 해결 방법은 암호없이 키를 생성하는 것입니다 (이 보안 결과는 모르겠지만 테스트 용입니다).

키에서 암호를 제거하려면 다음 명령을 사용하십시오.

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

미리보기 구성 줄에서 새 키를 사용합니다.

Question 5

함께 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 형식으로 변환해야 할 것입니다.

Question 6

제 경우에는 인증서를 얻기 위해이 모든 명령을 실행해야했습니다.

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

Question 7

나는 반응 프로젝트에서 일하고 있는데 이제이 프로젝트에 SSL 인증서를 추가하고 https로 내 웹 사이트를 실행하고 싶었으므로 아래 단계를 따랐습니다.

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
   }

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
       }

npm start터미널에서 명령을 실행 하거나 다음을 사용할 수도 있습니다.pm2 start npm -- start