问题一、引入高德地图，需要改http为https引入。

改

<script language="javascript" src="http://webapi.amap.com/maps?v=1.4.15&key=你的密钥&plugin=AMap.ControlBar,Map3D,AMap.DistrictSearch"></script>

为

<script language="javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=你的密钥&plugin=AMap.ControlBar,Map3D,AMap.DistrictSearch"></script>

说明：看到很多人说，高德地图引入必须是https，但是我http引入了多年也能用。直到将自己系统升级到https后才必须要使用https的地图引入方式。

问题二、websocket报错

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

和地图引入报错类似，https访问时无法加载不安全的websocket链接。于是将代码中的

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

改为

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

果然可以了，但是当我使用http访问当前系统时，websocket再次报错。所以需要判断当前浏览器使用的协议http/https，相应的建立对应安全等级的websocket吧。

问题三、启动后报错：(使用docker容器部署)

按照之前的文章，HTTPS免费证书的申请与配置。

启动后发现nginx有报错日志：

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)

大致意思是无此类文件或目录，满脸疑惑，我用chmod 777命令修改了文件夹及文件的权限，毛线用没有。结果看到大家说，路径不对，要放到nginx同目录。于是我想…… 我的nginx在哪呢？我用docker部署的，不知道nginx在哪呀。结果：看到docker-compose.yml文件里做了nginx映射

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

那我添加映射就好了啊，还要注意端口映射

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

同时nginx配置如下：

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; // 此处与映射到的位置保持一致

        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/ {
            // 复制http的接口即可
        }
    }

完。

HTTP升级HTTPS遇到的坑

问题一、引入高德地图，需要改http为https引入。

问题二、websocket报错

问题三、启动后报错：(使用docker容器部署)