本地HTTPS环境搭建的完整步骤记录

前言

之前在为公司的应用添加 https 时，是在 nginx 上配置的，这样不需要 node 做额外的开发，但是组内的开发同学本地一直没有配置，一直是采用 http 的方式开发和测试。最近发现有些 case 需要 https 来复现，比如 Android 5.0 以上的 app 内，使用 https 的网站访问 http 的内容会阻止访问，这种问题测试的时候本地就需要一个 https 的环境。于是花了点时间学习了下本地 https 的搭建，在这里记录一下。下面话不多说了，来一起看看详细的介绍吧。

生成证书

本地开发的证书可以自己生成一个，可以通过以下步骤生成一个简单的证书：

首先，进入你想创建证书和私钥的目录，例如：

$ cd /usr/local/nginx/conf

创建服务器私钥，命令会让你输入一个口令：

$ openssl genrsa -des3 -out server.key 1024

创建签名请求的证书（CSR）：

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

配置https

nginx 的 https 配置很简答，就是监听 443 端口，并且添加相关的 ssl 配置。

 server {
   listen 80;
   listen 443;

   ssl on;
   ssl_certificate ssl/server.crt;
   ssl_certificate_key ssl/server.key;

 }

再配置好你自己的 upstream 和 location 后就可以用 https 访问了。

这里踩了一个坑，因为我需要添加 https 的域名是配了虚拟主机的，但是我的 ssh 却没有在虚拟主机里添加，导致一开始并不能访问，这时候学习了一下如何去查 nginx 的问题。

先确认不是浏览器的问题，确实是nginx配置问题

wget local.xxx.com ok
wget local.xxx.com:443 cant receive

然后查了一下，nginx有两种日志，access log 和 error log。

其中 access log 日志记录了哪些用户，哪些页面以及用户浏览器、ip和其他的访问信息，error log 则是记录服务器错误日志。

我先查了一下nginx的access.log 没有日志，再查nginx的error.log 有报错

2017/04/18 14:07:10 [error] 18614#0: *168 no "ssl_certificate" is defined in server listening on SSL port while SSL handshaking, client: 192.168.2.1, server: 0.0.0.0:443
2017/04/18 14:07:10 [error] 18614#0: *169 no "ssl_certificate" is defined in server listening on SSL port while SSL handshaking, client: 192.168.2.1, server: 0.0.0.0:443

最后发现是虚拟主机中没配ssh

无法使用http访问

细心的朋友可能已经看出来了，这个配置有一点问题，因为开启了ssl：on，导致使用 http 访问时会报错

The plain HTTP request was sent to HTTPS port

后续删掉了ssl：on这一行，并且对443端口的监听做了一下修改

listen 443 ssl;

mac信任证书的问题

配置完https后，mac 用 chrome 打开时一直显示证书不受信任，需要点击确认才能继续往下进行，并且导致我的 https 的静态资源无法访问，可以用safari打开该网页后点击信任

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对我们的支持。

赞 (0)

相关推荐

  • 利用Docker搭建本地https环境的完整步骤

    利用Docker搭建本地https环境的完整步骤

    什么是 HTTPS 我们都知道 Web App 的运行都是建立在网络应用层 HTTP 协议的,HTTP 协议能够进行客户端和服务器之间的请求和返回.但是这个过程是明文传输的,当请求被抓包后传输内容很容易被篡改,这对用户的安全性来说是极其严重的威胁.PWA 应用出于安全性的考虑要求项目必须部署在 HTTPS 环境. 那么 HTTPS 是什么呢? HTTPS 是将 HTTP 置于 SSL/TLS 之上,其效果是加密 HTTP 流量( traffic ),包括请求的 URL.结果页面.cookies.

  • 有了SSL证书，如何在IIS环境下部署https

    有了SSL证书，如何在IIS环境下部署https

    昨天各位小伙伴都很开心的领取了自己的SSL证书,但是大部分小伙伴却不知道如何部署,也许是因为第一次接触SSL这种高端的东西吧,不过个人觉得就是懒懒懒...本来小编也挺懒的,但是答应了各位小伙伴的,那么今天就教大家如何在IIS环境下部署HTTPS证书吧.(建议在PC端阅读) 1.首先我们要取走我们的证书,保存在我们本地的电脑里,然后复制到服务器即可. 2.取走后接下来干嘛?当然是打开文件看看里面有些什么啊.我们找到IIS那个压缩包并解压. 3.解析得到pfx文件,也就是我们需要部署域名的证书文件.

  • windows环境下用squid代理https(ssl)的方法

    这个其实跟配置http代理也差不多,我之前是因为没有使用支持ssl的squid版本,所以反复折腾都不见效! 首先得检查你正在使用的squid版本是否是支持ssl的,主要看squid\sbin\ssleay32.dll文件是否存在,如果没有此文件那就得去换个支持ssl的squid版本了. 我这里就只提供个最简单的例子: 复制代码 代码如下: acl all src 0.0.0.0/0.0.0.0 acl manager proto cache_object acl localhost src 12

  • nginx环境下配置ssl加密（单双向认证、部分https）

    nginx下配置ssl本来是很简单的,无论是去认证中心买SSL安全证书还是自签署证书,但最近公司OA的一个需求,得以有个机会实际折腾一番.一开始采用的是全站加密,所有访问http:80的请求强制转换(rewrite)到https,后来自动化测试结果说响应速度太慢,https比http慢慢30倍,心想怎么可能,鬼知道他们怎么测的.所以就试了一下部分页面https(不能只针对某类动态请求才加密)和双向认证.下面分节介绍. 默认nginx是没有安装ssl模块的,需要编译安装nginx时加入--with

  • 本地HTTPS环境搭建的完整步骤记录

    前言 之前在为公司的应用添加 https 时,是在 nginx 上配置的,这样不需要 node 做额外的开发,但是组内的开发同学本地一直没有配置,一直是采用 http 的方式开发和测试.最近发现有些 case 需要 https 来复现,比如 Android 5.0 以上的 app 内,使用 https 的网站访问 http 的内容会阻止访问,这种问题测试的时候本地就需要一个 https 的环境.于是花了点时间学习了下本地 https 的搭建,在这里记录一下.下面话不多说了,来一起看看详细的介绍吧

  • Python + selenium自动化环境搭建的完整步骤

    前言 本文主要介绍了关于Python+selenium自动化环境搭建的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧 Python +selenium+googledriver 小白的血泪安装使,不停的总结写心得是理解透彻的毕竟之路 一,python的安装: 首先去Python的官网下载安装包:https://www.python.org/  ,大家也可以通过我们进行下载://www.jb51.net/softs/415916.html 2.下载完成后如下图所示 3.双

  • vue3.0项目快速搭建的完整步骤记录

    vue3.0项目快速搭建的完整步骤记录

    目录 一.我们要确保vue/cli版本在4.5.0以上,才能更好的支持3.0 二.通过vue/cli3创建我们的第一个项目 Router CSS 预编译 ESLint 语法校验 运行项目 升级vue 三.vue3.0相比vue2.0改进和新特性 总结 如何搭建一个vue3.0基础项目? 一.我们要确保vue/cli版本在4.5.0以上,才能更好的支持3.0 //安装最新vue/cli yarn global add @vue/cli //或 npm install -g @vue/cli 用vu

  • Node.js+Vue脚手架环境搭建的方法步骤

    Node.js的下载 node下载地址:https://nodejs.org/zh-cn/download/ 下载后安装即可.新版Node.js自带npm包管理器 # 查看node的版本 node -v # v12.16.1 # 查看npm版本 npm -v #6.13.4 第一个Node.js程序,新建helloworld.js文件,内容如下 console.log("Hello World") console.log("第一个Node.js程序!") 进入终端

  • React+Ant Design开发环境搭建的实现步骤

    React+Ant Design开发环境搭建的实现步骤

    基础知识 1.使用脚手架创建项目并启动 1.1 安装脚手架: npm install -g create-react-app 1.2 使用脚手架创建项目: create-react-app antd-start-demo antd-start-demo为项目名. 1.3 启动 npm start 2.npm转换为yarn 2.1 安装yarn: npm install -g yarn ​ 2.2 获取yarn当前的镜像源: yarn config get registry ​ 2.3 设置为淘宝

  • MacBook M1 Flutter环境搭建的实现步骤

    MacBook M1 Flutter环境搭建的实现步骤

    目录 一.基础环境搭建 git: Flutter SDK: CocoaPods: 二.安装IDE IDEA: Xcode: AndroidStudio: 三.跑一个app试试 最近入手了Apple M1,MacBook Air,由于之前未使用苹果系列产品,并且Flutter官方和各项配套的软件环境也还没有成熟,导致搭建环境时碰到了不少坑,这里总结记录一波,来看文档的同学,有不懂的地方直接发评论或者消息就好 一.基础环境搭建 git: 我是装完homebrew,git就装好了,homebrew的安

  • windows server 2016 域环境搭建的方法步骤(图文)

    windows server 2016 域环境搭建的方法步骤(图文)

    目录 搭建环境准备 搭建主DC 搭建辅DC 搭建和配置DNS 搭建和配置DHCP 域内加入主机和用户 创建OU 设立GPO 本文主要记录一下自己搭建的一个域环境进行测试 搭建环境准备搭建主DC搭建辅DC搭建和配置DNS搭建和配置DHCP域内加入主机和用户创建OU设立GPO 搭建环境准备 DC1:windows server 2016主机A: windows 10主机B: windows 10DC2:windows server 2019(辅) 搭建主DC 1)windows server 201

  • Angular2环境搭建具体操作步骤(推荐)

    01.安装Node.js 和 npm 安装完成后,在命令行依次使用node -v 和 npm -v可以看到版本号. 目前安装的node.js版本为8.2.1  ,npm的版本为5.3.0 02.安装cnpm npm需要连接谷歌服务器,国内不能正常使用,因此使用淘宝的镜像安装cnpm.命令行输入npm i -g cnpm --registry=https://registry.npm.taobao.org 03.安装Angular CLI 命令行输入cnpm i -g @angular/cli.

  • PyTorch在Windows环境搭建的方法步骤

    一.安装Anaconda 3.5 Anaconda是一个用于科学计算的Python发行版,支持Linux.Mac和Window系统,提供了包管理与环境管理的功能,可以很方便地解决Python并存.切换,以及各种第三方包安装的问题. 二.下载和安装 个人建议推荐在清华的镜像来下载.选择合适你的版本下载,我使用的是Anaoonda3-5.1.0-Windows-x86_64.exe 可能安装速度有点慢,不太清楚是我电脑系统盘快慢的原因还是什么. 环境变量配置 将D:\ProgramData\Anac

随机推荐