“This is the third day of my participation in the Gwen Challenge in November. Check out the details: The last Gwen Challenge in 2021.”

This article documents the issues to be aware of when upgrading your system from HTTP to HTTPS.

For details on how to apply for and configure free HTTPS certificates, see the previous article:

Juejin. Cn/post / 698795…

Problem 1, the introduction of Amap, need to change HTTP to HTTPS import.

change

<script language="javascript" SRC = "http://webapi.amap.com/maps?v=1.4.15&key= your key & plugin = AMap. The ControlBar, Map3D, AMap. DistrictSearch" > < / script >Copy the code

for

<script language="javascript" SRC = "https://webapi.amap.com/maps?v=1.4.15&key= your key & plugin = AMap. The ControlBar, Map3D, AMap. DistrictSearch" > < / script >Copy the code

Note: see a lot of people say, Amap introduction must be HTTPS, but I HTTP introduction for many years can also be used. You don’t have to use HTTPS map import until you upgrade your system to HTTPS.

Websocket error

vue.runtime.esm.js:1888 DOMException: Failed to construct 'WebSocket': An insecure WebSocket connection may not be initiated from a page loaded over HTTPS.
Copy the code

Similar to the map import error, unsafe Websocket links cannot be loaded during HTTPS access. So I put it in the code

new WebSocket('ws://' + location.host + this.$_apiUrl.getSocket)
Copy the code

Instead of

new WebSocket('wss://' + location.host + this.$_apiUrl.getSocket)
Copy the code

Sure enough, it worked, but when I accessed the current system using HTTP, websocket reported an error again. Therefore, you need to determine the protocol used by the current browser HTTP/HTTPS, and set up the corresponding security level of the Websocket.

Error :(deployed using docker container)

According to the previous article, HTTPS free certificate application and configuration.

Nginx error:

cannot load certificate "/usr/local/key/mytest.cer": BIO_new_file() failed (SSL: error:02001002:system library:fopen:No such file or directory:fopen('/usr/local/key/mytest.cer','r') error:2006D080:BIO routines:BIO_new_file:no such file)
Copy the code

There is no such file or directory, I use chmod 777 command to modify folder and file permissions, do not use the thread. You should put it in the same directory as nginx. So I thought… Where is my Nginx? I use Docker to deploy, don’t know where nginx is. Docker-comemage. yml file with nginx mapping

ports:
      - 9090:80
    volumes:
      - ./conf/nginx/nginx.conf:/etc/nginx/nginx.conf
      - ./web/dist:/usr/share/nginx/html
      - ./logs:/var/log/nginx
Copy the code

I’ll just add the mapping, and also pay attention to the port mapping

ports:
      - 9090:80
      - 9443:443
    volumes:
      - ./conf/nginx/nginx.conf:/etc/nginx/nginx.conf
      - ./web/dist:/usr/share/nginx/html
      - ./logs:/var/log/nginx
      - ./conf/key/mytest.cer:/etc/nginx/mytest.cer
      - ./conf/key/mytest.key:/etc/nginx/mytest.key
Copy the code

Nginx configuration is as follows:

server { listen 443 ssl; #ssl on; Server_name 10.10.17.49; ssl_certificate /etc/nginx/mytest.cer; Ssl_certificate_key /etc/nginx/mytest.key; // This parameter is the same as the mapping directory. Ssl_session_cache shared:SSL:1m; ssl_session_cache shared:SSL:1m; ssl_session_timeout 5m; Ssl_protocols TLSv1 TLSv1.1 TLSv1.2; ssl_ciphers HIGH:! aNULL:! MD5; ssl_prefer_server_ciphers on; location / { root /usr/share/nginx/html; if (! -e $request_filename) { rewrite ^(.*)$ /index.html; } } location ~*\.(js|css|png|jpg|jpeg|gif|ico)$ { root /usr/share/nginx/html; expires 30d; } location/API / {// copy HTTP interface}}Copy the code

To the end.