在前端本地環境配置 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>