ssl - create - react scripts https

Webpack Dev Server que se ejecuta en HTTPS/Web Sockets Secure

Question

Normalmente en modo desarrollador, Webpack se ejecuta utilizando HTTP. Por lo general, hay un servidor web que sirve contenido a través de HTTP y webpack usando http / websockets en un puerto separado.

¿Es posible ejecutar el servidor web en https y webpack en https / websocket secure?

Answer 1

Con webpack-dev-server --https creas un certificado autofirmado. Pero no funciona para todos los casos de uso.

Los navegadores le pedirán una excepción de seguridad y mostrarán en la barra de direcciones que la conexión no es segura.

Por lo tanto, se recomienda crear un certificado de desarrollo de confianza local para localhost con mkcert

Luego úselo a través de 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

o configure la opción devServer.https en webpack.config.js:

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 crea archivos .pem en formato Unix de forma predeterminada. Entonces, si estás en Windows, probablemente necesites convertirlos al formato de Windows usando, por ejemplo, Notepad ++

Answer 2

En mi caso, tuve que ejecutar todos estos comandos para obtener el certificado:

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

Y luego finalmente:

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

Answer 3

Estoy trabajando en el proyecto de reacción, ahora quería agregar un certificado SSL en este proyecto y ejecutar mi sitio web con https, así que he seguido el siguiente paso:

1. En agregar https en 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,
   
             historyApiFallback: true,
             publicPath: ''/'',
             contentBase: ''./dist'',
             disableHostCheck: true
      }

2. Agregue certificado público SSL en el archivo package.json Si no desea agregar un certificado en su archivo package.json, debe agregarlo en su webpack.config.js, es obligatorio agregar su certificado en su proyecto. puede en el paquete.json archivo o webpack.config.js

Para 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"

            }

O 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. Ejecute el comando npm start en una terminal o también puede usar pm2 start npm -- start

Answer 4

Si bien la respuesta anterior es correcta para cli, si no está en la CLI, podría hacer algo como esto (en una tarea de trago):

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

Answer 5

Ver los documentos del paquete web

Hay un indicador que puede agregar al comando webpack-dev-server

webpack-dev-server --https 

Answer 6

esto solo para el entorno TEST:

necesita configurar su servidor webpack-dev-server de la siguiente manera:

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

sin embargo, hay un error conocido cuando webpack intenta leer la frase de contraseña de la clave. por favor vea este enlace

La solución más fácil es generar una clave sin frase de contraseña (no sé las consecuencias de seguridad de esto, pero esto es solo para prueba).

Para quitar la frase de contraseña de su clave, use este comando:

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

y use la nueva clave en la línea de configuración de vista previa