乐趣区

关于javascript:VuePress-博客如何开启本地-HTTPS-访问

jiezi

前言

在《一篇带你用 VuePress + Github Pages 搭建博客》中，咱们应用 VuePress 搭建了一个博客，最终的成果查看：TypeScript 中文文档。

如果咱们在本地运行我的项目，运行地址相似于 http://localhost:8080/learn-typescript/，以 http 结尾，这在大部分时候都满足了须要，但有的时候，比方兼容 PWA，就须要以 https 结尾，那咱们如何在本地应用 https 地址呢？

开启 HTTPS

在 VuePress 官网文档里，咱们并没有搜到间接的答案，但咱们能够在 StackOverflow 搜到一个答复，其实能够间接在 config.js 增加：

module.exports = {
  devServer: {https: true}
}

咱们试一下，拜访地址，会呈现不平安提醒：

咱们点击「高级」里的「持续返回 localhost（不平安）」，能够拜访到页面，只是地址栏会显示一个“不平安”：

HTTPS 原理

想想的确如此，咱们都没有 SSL 证书，怎么就能判断为平安连贯呢？​

那如何能力让浏览器判断为平安连贯呢？咱们先简略温习一下 HTTPS 的原理：

首先是 CA，英文全称：Certificate Authority，中文翻译为：数字证书认证机构，是负责发放和治理数字证书的权威机构，是受到信赖的第三方机构。电脑系统、浏览器里会内置 CA 颁发的根证书。

而后是 HTTPS 建设的过程，当客户端向服务端发动一个 HTTPS 连贯的时候，服务器会将本人的证书发给客户端，证书中蕴含公钥，客户端会寻找是否有这个证书签发的 CA 的根证书，如果有，再对证书进行解密验证，避免证书被篡改，如果通过，客户端会生成一个随机串，而后应用服务器证书中的公钥进行加密，而后发送给服务器，服务器利用私钥进行对这个密文进行解密，失去随机串，而后两端应用这个随机值进行加密通信。

所以对于服务器来说，须要有两个货色，一个是蕴含公钥的服务器证书，一个是私钥。

对于客户端来说，则须要 CA 根证书。

mkcert

为了实现本地 HTTPS 连贯，咱们能够借助 mkcert 这个工具来实现证书的配置：

mkcert 是一个用于创立本地信赖的开发证书的便捷工具。在本地开发环境中应用实在的 CA（Certificate Authority，证书颁发机构）签发的证书，是十分艰难的，特地是对于像 example.net、localhost 或者 127.0.0.1 这样的主机来说，应用实在的 CA 签发的证书是不可能的。在这样的状况下，自签发的证书可能是惟一的抉择。mkcert 能够生成自签发的证书，并把本地 CA 装置到零碎根证书库中。

1. 装置 mkcert

brew install mkcert

2. 创立本地 CA

mkcert -install

生成后，在 Mac 中，咱们能够通过「钥匙串拜访」查看到这个证书：

3. 生成证书 

mkcert localhost 127.0.0.1

这会在当前目录下生成两个证书文件：localhost+1-key.pem 和 localhost+1.pem，其中 localhost+1.pem 就是服务端证书，localhost+1-key.pem 就是私钥。​

4. 批改 config.js

而后咱们将这两个文件拷贝到 config.js 文件的同级目录里，而后批改 config.js：

const fs = require('fs')
const path = require('path');

module.exports = {
    devServer: {
        https: true,
        key: fs.readFileSync(path.resolve(__dirname, './localhost+1-key.pem')),
        cert: fs.readFileSync(path.resolve(__dirname, './localhost+1.pem'))
  }
}

5. 从新运行我的项目

而后从新运行我的项目，你就会看到：

如果证书显示无效，但仍然显示不平安连贯，浏览器重启或者开一个隐衷窗口试试。

系列文章

博客搭建系列是我至今写的惟一一个偏实战的系列教程，预计 20 篇左右，解说如何应用 VuePress 搭建、优化博客，并部署到 GitHub、Gitee、公有服务器等平台。本篇为第 22 篇，全系列文章地址：https://github.com/mqyqingfeng/Blog

微信：「mqyqingfeng」，加我进冴羽惟一的读者群。

如果有谬误或者不谨严的中央，请务必给予斧正，非常感激。如果喜爱或者有所启发，欢送 star，对作者也是一种激励。

退出移动版