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

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

---

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

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

---

참고 항목 웹팩 문서를

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

webpack-dev-server --https 

---

위의 답변은 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');
});

---

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

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

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

그러나 웹팩이 키에서 암호를 사용하지 않습니다. 이 링크를 참조하십시오

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

키에서 암호를 제거하십시오.

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

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

---

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

---

나는 반응 프로젝트에서 일하고 있는데, 이제이 프로젝트에 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
       }

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

---

모든 명령을 실행해야합니다.

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

참고 URL : https://stackoverflow.com/questions/26663404/webpack-dev-server-running-on-https-web-sockets-secure