Https front-end configuration and change ws wss error of ERR_SSL_PROTOCOL_ERROR solve!

The first step in generating a certificate

linux or osx system
1, the key generation key, run

$ openssl genrsa -des3 -out server.key 2048

Will be asked to set a password, you can easily set up;
thus gained a server.key file
after using this file (openssl command provided by or API) may return often requires a password, enter a password if you want to step removal can use the following command :

$ openssl rsa -in server.key -out server.key

2, create a server certificate to run the application documents server.csr

openssl req -new -key server.key -out server.csr

Country Name which fill CN, Common Name fill in the host name can not fill, if not fill the browser deemed unsafe (for example, your future url is https: // abcd / xxxx ... Here you can fill abcd)., Other You can not fill.
3, to create a CA certificate

openssl req -new -x509 -key server.key -out ca.crt -days 3650

Figure

4, created from the current ten-year period from the date of the server certificate server.crt:

openssl x509 -req -days 3650 -in server.csr -CA ca.crt -CAkey server.key -CAcreateserial -out server.crt

5, ls your folder, you can see the total generated 5 documents:
ca.crt ca.srl server.crt server.csr server.key
which, server.crt and server.key is your nginx need certificate file .

Nginx front-end configuration file

Add nginx.conf file

server {
        listen 80; // 这个是http
        listen 443 ssl; // 这个是https 
        server_name localhost;
        ssl_certificate /etc/nginx/https/server.crt;  // 代理地址
        ssl_certificate_key /etc/nginx/https/server.key;
        ssl_session_timeout 5m;
        ssl_protocols SSLv2 SSLv3 TLSv1;
        ssl_ciphers ALL:!ADH:!EXPORT56:RC4+RSA:+HIGH:+MEDIUM:+LOW:+SSLv2:+EXP;
        ssl_prefer_server_ciphers   on;

In docker-compose.yml file

so far, nginx it configured, this time running under https you can open the project.

websocket modification

In https, the corresponding websocket ws should be modified as wss

this.wSocket = new WebSocket(`wss://182.177.19.90:31189/websocketfile`);

182.177.19.90:31189 this is my casual series, back-end interface.
In the case of the original http + ws, and write no problem, but at https + wss
case, the error will
ERR_SSL_PROTOCOL_ERROR.

Reason https works so front-end configuration as shown below:

(because of the configuration at the front end, back end are still requesting http and https if ws is a back-end configuration, the problem does not exist, I just get this place. a long time to resolve, just want to know!)
so although websocket cross-domain does not exist, but in the case of https + wss, it must be forwarded through nginx
add nginx.conf file

location ~ /websocketfile {
          proxy_pass http://182.177.19.90:31189;  
          proxy_http_version 1.1;
          proxy_set_header Upgrade $http_upgrade;
          proxy_set_header Connection "upgrade";
          proxy_read_timeout 6000s;
        }

Then write the js

this.wSocket = new WebSocket(`wss://${window.location.host}/websocketfile`);