专栏首页服务器运维笔记为你的前端本地环境配置 HTTPS 吧!

为你的前端本地环境配置 HTTPS 吧!

❝这是 山月七八月原创计划 中的「第三篇」原创文章,简述了如何在本地环境配置 https 证书 月初定下的目标是每周四篇原创文章,因此在接下来的三天中还会有两篇原创文章推送,敬请期待中。 ❞

❝关于本周后的两篇文章应该是关于服务器与浏览器交互的,有关 node 系列,「我对 Node 系列又简单拟了一个草稿目录,感兴趣的可以翻到最后边查看」


在使用某些 html API 时,https 是前置必须项,这要求我们在本地开发环境也能够配置 https。否则你要每次部署到测试环境才能预览效果,这对开发的敏捷度造成了极大的干扰。

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

关于证书

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

  1. cert-file
  2. key-file

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

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

另外一种方式是使用 openssl 配置本地证书,自建 Root CA。不过这对于不熟悉 https 及一些简易命令行的人而言,简直是无字天书级别的操作。

「凡是复杂且常见的需求,必有人开发出更简单的工具解放生产力,必有成熟的解决方案占领市场。」

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

使用 mkcert

mkcert[2] 是一个用 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,并生成 certkey,文件目录如下

{
  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[3]

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 系列目录

先简单截个图,目前还都是待作状态

关注我

欢迎关注全栈成长之路

Reference

[1]

mkcert: https://github.com/FiloSottile/mkcert

[2]

mkcert: https://github.com/FiloSottile/mkcert

[3]

webpack-dev-server:/lib/Server.js: https://github.com/webpack/webpack-dev-server/blob/master/lib/Server.js#L677

本文分享自微信公众号 - 全栈成长之路(shanyue-road),作者:山月行

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-07-09

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 什么,没有服务器也能部署自己的博客?!

    我前几天写了一篇文章,如果你想搭建一个博客,其中提到了使用 netlify 做博客托管服务。

    山月
  • Deno 1.0,来了解一下

    经过近两年的等待,官方正式宣布Deno 1.0将于5月13日发布。如今,API已经冻结,倒计时开始。

    山月
  • 当我有一台服务器时我做了什么

    由于 dev 的机器与去年列举出来的事情相似,这里只介绍下在这台 1C2G 的服务器上做了什么

    山月
  • 如何在Ubuntu和Debian上安装R.

    R是包含了数据可视化功能的用于统计分析的编程语言。该语言通过Comprehensive R Archive Network(CRAN)拥有高度的可扩展性,该网络...

    魔法少女伊莉雅
  • 那些有意思的网站(二)

    这是一个苹果公司档案网站(非官方),收集了苹果公司从成立以来的所有广告、海报和宣传材料 https://www.applearchive.org/

    苏生不惑
  • 魏艾斯博客重装 CentOS 系统和添加 Let’s Encrypt 免费 SSL 证书过程全记录

    魏艾斯博客www.vpsss.net
  • 前端技术观察第12期 - 2020 年 Node.js 将会有哪些新功能

    ConardLi
  • 字节、百度等大厂面经,资深服务端工程师谈跳槽感悟

    今天大鹏请来一位大厂有 4 年工作经验的服务端资深工程师,在2020年多事之秋的节点,跟大家谈一下跳槽感悟,分享一下自己的面试经历

    灵魂画师牧码
  • 负责任地编写Javascript(二)

    重构工作一开始非常简单,就是到处安装 npm,这其实就是在快速安装生产依赖项,就像一个大学生在做桶支架,而不关心第二天早上的情况一样。

    WecTeam
  • mac下抓包工具proxyman

    今天用charles抓https的数据,结果我网上找了一堆的教程没有一个成功的,诶,愚蠢的我呀,还要找到了一款方便简单的抓包工具proxyman! 这个软件是...

    崔笑颜

扫码关注云+社区

领取腾讯云代金券