1. 首页

带你一文搞懂nginx配置https

生成数字证书和密钥

配置openssl.cnf(Mac OS用户打开/usr/local/etc/openssl目录,Windows用户请先下载openssl)

  • 打开openssl.cnf文件(用记事本或vs code以免保存时修改编码)
  • 取消以下行的注释(删除以“#”开头的行):

#req_extensions = v3_req#The extensions to add to a certificate request (添加一个证书请求) //JS中文网 – 前端进阶资源分享 https://www.javascriptc.com/ 趣聊CSS系列
  • 在 “[ v3_req ]” 区域添加下行

subjectAltName = @alt_names //JS中文网 – 前端进阶资源分享 https://www.javascriptc.com/ 趣聊CSS系列
  • 添加[ alt_names ] 区域(配置要使用该证书的客户端域名)

[ alt_names ] DNS.1 = <yourDomain> //JS中文网 – 前端进阶资源分享 https://www.javascriptc.com/ 趣聊CSS系列
  • 取消以下行的注释:# copy_extensions = copy(告知CA配置允许使用自签名证书)

copy_extensions = copy //JS中文网 – 前端进阶资源分享 https://www.javascriptc.com/ 趣聊CSS系列

genrsa命令: 生成密钥对cert.key

生成的密钥对长度是2048bit, 包含公钥和私钥,公钥发送给对方加密,私钥留着自己解密


openssl genrsa -out cert.key 2048 //JS中文网 – 前端进阶资源分享 https://www.javascriptc.com/ 趣聊CSS系列

req命令:使用密钥对cert.key + openssl.cnf配置信息生成证书签名请求cert.csr


openssl req -new -sha256 -key cert.key -out cert.csr -config openssl.cnf //JS中文网 – 前端进阶资源分享 https://www.javascriptc.com/ 趣聊CSS系列

-sha256表示使用sha256算法生成摘要然后计算签名 -out表示输出CSR文件 -config表示扩展配置文件

新建alt-names.txt文件


[ alt_names ] DNS.1 = mydomain.com //JS中文网 – 前端进阶资源分享 https://www.javascriptc.com/ 趣聊CSS系列

x509命令:使用密钥对cert.key + 证书签名请求cert.csr + alt-names.txt配置,生成数字证书cert.crt


openssl x509 -req -sha256 -days 365 -in cert.csr -signkey cert.key -out cert.crt -extfile alt-names.txt //JS中文网 – 前端进阶资源分享 https://www.javascriptc.com/ 趣聊CSS系列

-days参数表示证书的有效期 -in表示CSR文件 -signkey表示密钥对的公钥 -extfile表示引用一个扩展文件 包含一些重要的扩展信息,其中最重要的就是alt_names扩展 -out表示输出的证书文件

使cert.crt受浏览器信任(浏览器不再报不安全提示)

双击cert.crt-进入钥匙串访问-选择添加到系统-并标记此证书为始终信任-点击关闭时输入账户密码完成操作

配置nginx.conf


server { listen 443 ssl; # 服务器监听443端口并启用SSL协议 server_name mydomain.com; ssl_certificate cert.crt; # 数字证书路径 ssl_certificate_key cert.key; # 密钥对路径 ssl_session_cache shared:SSL:1m; ssl_session_timeout 5m; ssl_ciphers HIGH:!aNULL:!MD5; # 支持的密码套件列表 ssl_prefer_server_ciphers on; ...... } //JS中文网 – 前端进阶资源分享 https://www.javascriptc.com/ 趣聊CSS系列

重启nginx/浏览器/电脑

FAQ

解决本地大量sockjs-node相关请求报错

  • 报错原因: 此请求是由webpack devserver内部代码发起的,url根据webpack配置默认生成为https://127.0.0.1:8080, 但该站点缺少可信任的CA证书,导致浏览器拦截了这个请求。
  • 解决办法:使用配置了可信任CA证书的域名访问,通过nginx代理到ip

// Webpack devServer{ // 告知runtime获取最新代码的路径 sockHost: "mydomain.com", sockPort: 443 } // Nginx location /sockjs-node { proxy_set_header X-Real-IP $remote_addr; proxy_set_header Host $http_host; proxy_pass https://127.0.0.1:8080; } //JS中文网 – 前端进阶资源分享 https://www.javascriptc.com/ 趣聊CSS系列

作者:ABCDE
链接:https://juejin.im/post/6878297030926532622

看完两件小事

如果你觉得这篇文章对你挺有启发,我想请你帮我两个小忙:

  1. 关注我们的 GitHub 博客,让我们成为长期关系
  2. 把这篇文章分享给你的朋友 / 交流群,让更多的人看到,一起进步,一起成长!
  3. 关注公众号 「画漫画的程序员」,公众号后台回复「资源」 免费领取我精心整理的前端进阶资源教程

JS中文网是中国领先的新一代开发者社区和专业的技术媒体,一个帮助开发者成长的社区,目前已经覆盖和服务了超过 300 万开发者,你每天都可以在这里找到技术世界的头条内容。欢迎热爱技术的你一起加入交流与学习,JS中文网的使命是帮助开发者用代码改变世界

本文著作权归作者所有,如若转载,请注明出处

转载请注明:文章转载自「 Js中文网 · 前端进阶资源教程 」https://www.javascriptc.com

标题:带你一文搞懂nginx配置https

链接:https://www.javascriptc.com/4197.html

« 新来的漂亮女实习生问我什么是闭包?
滴滴出行小程序体积优化实践»
Flutter 中文教程资源

相关推荐

QR code