Search code examples
reactjsssldocusaurus

Running Docusaurus with HTTPS=true yields ERR_SSL_PROTOCOL_ERROR


We are making a V2 Docusaurus website.

After building the website in the server, we could well use it with https. Here is a part of my_server_block.conf:

server {
  listen  3001 ssl;

  ssl_certificate      /certs/server.crt;
  ssl_certificate_key  /certs/server.key;

  ssl_session_cache    shared:SSL:1m;
  ssl_session_timeout  5m;

  ssl_ciphers  HIGH:!aNULL:!MD5;
  ssl_prefer_server_ciphers  on;

  location / {
    proxy_pass http://localhost:3002;
    proxy_redirect off;
    proxy_set_header Host $host:$server_port;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Ssl on;
  }
}

In localhost, http works. However, we need to test https in localhost now. But https returns an error, though I started it by HTTPS=true yarn start: This site can’t provide a secure connection localhost sent an invalid response. ERR_SSL_PROTOCOL_ERROR:

enter image description here

Does anyone know what I should do to make https work in localhost?

Edit 1: I tried HTTPs=true SSL_CRT_FILE=certs/server.crt SSL_KEY_FILE=certs/server.key yarn start, https://localhost:3001 still returned the same error. Note that certs/server.crt and certs/server.crt are the files that make https work in our production server via ngnix:

server {
  listen  3001 ssl;

  ssl_certificate      /certs/server.crt;
  ssl_certificate_key  /certs/server.key;

Solution

  • There is an issue with https support on localhost in react-dev-utils@^v9.0.3, which is a dependency of docusaurus.

    https://github.com/facebook/create-react-app/issues/8075

    https://github.com/facebook/create-react-app/pull/8079

    It is fixed in react-dev-utils@10.1.0