Front-end When using some HTML5 apis, HTTPS is mandatory. Some apis, such as the AudioContext API for recording, can be enabled only when HTTPS ensures security.

This requires us to be able to configure HTTPS in the local development environment as well, otherwise you need to preview every time you deploy to a test environment with HTTPS, which can be very disruptive to development agility.

Being able to generate certificates in a localhost environment would greatly facilitate and comfort the development experience, which is necessary.

About the certificate

There are many articles that describe HTTPS in great detail, but in practice, they all end up in the following two files

  1. cert-file
  2. key-file

As well asCAOf course, the organization that provides security for certificates can also make their own.

For personal and small business certificates, you can use Let’s Encrypt to create a simple ACME configuration.

But for HTTPS in a local environment, this is cumbersome, unnecessary, and impossible: you cannot configure an HTTPS certificate for localhost.

Another way is to use the OpenSSL self-signed certificate and build your own Root CA. But for those unfamiliar with HTTPS and some of the command lines, OpenSSL’s arcane command lines are almost unreadable.

For complex and common requirements, someone will develop simpler tools to liberate productivity, and mature solutions will dominate the market.

The tool to simplify the creation of local certificates is mkcert, a 32K Star project on Github written in Go.

Using mkcert

Mkcert is a zero configuration tool written in GO specifically for local environment HTTPS certificate generation.

# installation mkcert
$ brew install mkcert

Install the CA for the local environment
$ mkcert -install
Created a new local CA at "/Users/shanyue/Library/Application Support/mkcert" 💥
The local CA is now installed inthe system trust store! ⚡ ️ Thelocal CA is now installed inthe Firefox trust store (requires browser restart)! 🦊 $mkcert local.shanyue.tech Using thelocal CA at "/Users/xiange/Library/Application Support/mkcert" ✨

Created a new certificate valid forThe following names 📜 -"local.shanyue.tech"

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

After cert is passed, CA will be successfully installed and cert and key files will be generated. The file directories are as follows. This step is important, and the next steps will take advantage of the two generated files.

{
  key: './local.shanyue.tech-key.pem'.cert: './local.shanyue.tech.pem'
}
Copy the code

Finally, remember to add domain name IP mapping in /etc/hosts

127.0.0.1 local. Shanyue. TechCopy the code

Configure HTTPS in Webpack

If you use WebPack, congratulations, configuring HTTPS requires only two lines of code at devServer.

Use the two files generated by mkcert in the previous step as configuration options for webpack.devserver. key and webpack.devserver. cert.

module.exports = {
  / /...
  devServer: {
    https: true.key: fs.readFileSync('./local.shanyue.tech-key.pem'),
    cert: fs.readFileSync('./local.shanyue.tech.pem')}};Copy the code

Start the local development environment and switch to the HTTPS link.

Configure HTTPS on the Node Server

If your front-end project starts with Express reading static files, this is slightly more cumbersome than WebPack.

In this case, HTTPS is enabled in the Node service. For example, the HTTPS module is required

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);
Copy the code

In the case of webpack-dev-server, the same principle can be found by reading the source code carefully. See 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);
}
Copy the code

conclusion

This article addresses the following points

  1. Yes in the local environmentmkcertProduction certificate
  2. How to configure certificates in Webpack and how does it work
  3. How to configure the certificate for Node native HTTP Server