在前端本地环境配置-HTTPS-证书

本文收录于 GitHub 山月行博客: shfshanyue/blog，内含我在理论工作中碰到的问题、对于业务的思考及在全栈方向上的学习

• 前端工程化系列
• Node 进阶系列

对于本周后的两篇文章应该是对于服务器与浏览器交互的，无关 node 系列， 我对 Node 系列又简略拟了一个草稿目录，感兴趣的能够翻到最初边查看

在应用某些 html API 时，https 是前置必须项，这要求咱们在本地开发环境也可能配置 https。否则你要每次部署到测试环境能力预览成果，这对开发的麻利度造成了极大的烦扰。

如果可能在本地环境生成证书，这将开发体验提供极大的便当及舒适度。

对于证书

对于 https 的原理，有很多篇文章对此有极其详尽的介绍，然而在实际过程中最初都要落地为几个文件

1. cert-file
2. key-file

以及 CA，给证书提供安全性保障的机构，当然也可自制。

对于集体及一些企业的证书会应用 Let's Encrypt 制作，只有一个 ACME 简略配置即可搞定。对于本地环境下的 https 如此操作就显得大费周章且无必要了。

另外一种形式是应用 openssl 配置本地证书，自建 Root CA。不过这对于不相熟 https 及一些繁难命令行的人而言，几乎是无字天书级别的操作。

但凡简单且常见的需要，必有人开发出更简略的工具解放生产力，必有成熟的解决方案占领市场。

简化证书制作的工具就是 mkcert

应用 mkcert

mkcert 是一个用 GO 写的零配置专门用来本地环境 https 证书生成的工具。

# 本地装置 CA
$ mkcert -install
Created a new local CA at "/Users/shanyue/Library/Application Support/mkcert" ????
The local CA is now installed in the system trust store! ⚡️
The local CA is now installed in the Firefox trust store (requires browser restart)! ????

$ mkcert local.shanyue.tech
Using the local CA at "/Users/xiange/Library/Application Support/mkcert" ✨

Created a new certificate valid for the following names ????
 - "local.shanyue.tech"

The certificate is at "./local.shanyue.tech.pem" and the key at "./local.shanyue.tech-key.pem" ✅

通过 cert 最终会胜利装置 CA，并生成 cert 及 key，文件目录如下

{
  cert: './local.shanyue.tech.pem',
  key: './local.shanyue.tech-key.pem'
}

在 webpack 中配置 https

如果你应用了 webpack，那祝贺你，配置 https 只须要在 devServer 处增加两行代码。

module.exports = {
  //...
  devServer: {
    https: true,
    key: fs.readFileSync('/path/to/server.key'),
    cert: fs.readFileSync('/path/to/server.crt')
  }
};

在 node server 中配置 https

如果你的前端我的项目是通过 express 读取动态文件启动，那这就略微有点麻烦

此时在 http server 中开启 https，须要应用到 https 模块，如下所示

import path from 'path'
import fs from 'fs'
import express from 'express'
import http from 'http'
import https from 'https'

const app = express();

const cred = {key: fs.readFileSync(path.resolve(__dirname, '../key.pem')),
  cert: fs.readFileSync(path.resolve(__dirname, '../cert.pem'))
}
const httpServer = http.createServer(app)
const httpsServer = https.createServer(cred, app)

httpServer.listen(8000);
httpsServer.listen(8888);

而对于 webpack-dev-server，仔细阅读源码就能过发现它的原理也是如此，详见代码 webpack-dev-server:/lib/Server.js

const http = require('http');
const https = require('https');

if (this.options.https) {if (semver.gte(process.version, '10.0.0') || !isHttp2) {this.listeningApp = https.createServer(this.options.https, this.app);
  } else {
    // The relevant issues are:
    // https://github.com/spdy-http2/node-spdy/issues/350
    // https://github.com/webpack/webpack-dev-server/issues/1592
    this.listeningApp = require('spdy').createServer(
      this.options.https,
      this.app
    );
  }
} else {this.listeningApp = http.createServer(this.app);
}

总结

本篇文章解说了以下几个点

1. 在本地环境能够通过 mkcert 制作证书
2. webpack 中如何配置证书及其原理
3. Node 原生 http server 如何配置证书

Node 系列目录

先简略截个图，目前还都是待作状态

关注我

本文收录于 GitHub 山月行博客: shfshanyue/blog，内含我在理论工作中碰到的问题、对于业务的思考及在全栈方向上的学习

• 前端工程化系列
• Node 进阶系列

扫码增加我的微信，备注进群，退出高级前端进阶群

<figure>
<img width=”240″ src=”https://user-gold-cdn.xitu.io/2020/6/29/172fe14e18d2b38c?w=430&h=430&f=jpeg&s=38173″ alt=” 加我微信拉你进入面试交换群 ”>
<figcaption> 加我微信拉你进入面试交换群 </figcaption>
</figure>

欢送关注公众号【全栈成长之路】，定时推送 Node 原创及全栈成长文章

<figure>
<img width=”240″ src=”https://shanyue.tech/qrcode.jpg” alt=” 欢送关注 ”>
<figcaption> 欢送关注全栈成长之路 </figcaption>
</figure>