如何在线下windows服务器中部署SSL证书？

Question

最近做的项目要求在 web 应用中调用摄像头扫描并识别二维码（最终要在 安卓9.0系统的PDA中实现，目前设备还没拿到在PC上做实现案例），已经使用 vue3 实现功能，有个麻烦点是浏览器调用摄像头要求 https 环境，将 vue3 项目编译后部署在云端 https 环境下在手机浏览器中已经测试通过，但是在线下的 windows 服务器中就遇到麻烦了，线下的 SSL 证书怎么搞呢，网上搜索后自己的制作步骤如下：

1. 官网 https://slproweb.com/products/Win32OpenSSL.html 下载OpenSSL 工具，下载安装下面版本
   
2. 制作环境变量
   
3. 下面在 cmd 中执行N个命令

// 创建文件 xdfby.key - 名称 xdfby 保证和服务器计算机名相同
openssl genrsa -des3 -out xdfby.key 1024
openssl req -new -key xdfby.key -out xdfby.csr
// 复制文件 xdfby.key 并重命名为 xdfby.key.org，然后执行下面命令
openssl rsa -in xdfby.key.org -out xdfby.key
openssl x509 -req -days 365 -in xdfby.csr -signkey xdfby.key -out xdfby.crt

上面多个命令执行完毕后生成了下面的文件

4. 下面是 nginx 443端口的相关配置

server {
    listen       443;
    server_name  localhost xdfby;

    ssl_certificate D://nginx-1.19.8//conf//ssl//xdfby.crt;
    ssl_certificate_key D://nginx-1.19.8//conf//ssl//xdfby.key;
    ssl_session_cache shared:SSL:10m;
    ssl_session_timeout 10m; 
    ssl_ciphers HIGH:!aNULL:!MD5;
    ssl_prefer_server_ciphers on;

    location / {
        root html;
        index index.html index.htm;
        try_files $uri $uri/ /index.html;
    }

    location /showa {
        alias D:\projfe\showa;
        index index.html;
        try_files $uri $uri/ /showa/index.html;
    }

}

最后在 chrome 中访问：https://xdfby/showa/vue3qr/
就提示

服务器路径 D:\projfe\showa\vue3qr 中部署 vue3 项目编译后的文件，效果如下：

请问是我做的SSL证书不对吗？

Answer 1

listen 443; 改成 listen 443 ssl;
如果不加ssl，那么nginx响应的应该还是http协议的内容。

Answer 2

你是自颁发的证书，又不是什么权威机构的证书， 有没有把证书安装到浏览器的可信任里去，

申请个免费证书吧，自颁发的证书，你所有客户都要安装你这个证书才能访问