preface

In “A blog with VuePress + Github Pages”, we build a blog with VuePress and see what the final TypeScript Chinese document looks like.

Project if we are in the local operation, the operation address like http://localhost:8080/learn-typescript/, starting with HTTP, which meet the needs in most of the time, but sometimes, such as compatibility PWA, you need to begin with HTTPS, So how do we use HTTPS addresses locally?

Open the HTTPS

In the official VuePress document, we didn’t find a direct answer, but we can find an answer in StackOverflow, which can be added directly to config.js:

module.exports = {
  devServer: {
    https: true}}Copy the code

Let’s try it. If you access the address, there will be an unsafe message:

We click “Continue to Localhost (unsafe)” in “Advanced” to access the page, but the address bar will show an “unsafe” :

HTTPS principle

If we don’t have an SSL certificate, how can we judge it as a secure connection?

So how do you tell the browser that it’s a secure connection? Here’s a quick review of how HTTPS works:

First of all, CA is a trusted third-party Authority responsible for issuing and managing digital certificates. The root certificate issued by the CA is embedded in computer systems and browsers.

Then the HTTPS, the process of building when the client to the server by an HTTPS connection, the server will sent to the client certificate, the certificate contains the public key, the client will look for whether there is the certificate issued by the CA root certificate, if you have, again to decrypt the certificate for verification, to prevent the certificate been tampered with, if passed, The client generates a random string, encrypts it with the public key in the server certificate, and sends it to the server. The server decrypts the ciphertext with the private key, and then obtains the random string. The two ends use the random value for encrypted communication.

So for a server, you need two things, a server certificate that contains the public key and a private key.

For clients, a CA root certificate is required.

mkcert

For local HTTPS connection, we can use mkcert to configure the certificate:

Mkcert is a handy tool for creating local trust development certificates. Using certificates issued by a real CA in a local development environment is very difficult, especially for hosts like Example.net, localhost, or 127.0.0.1, It is impossible to use a certificate issued by a real CA. In such cases, a self-issued certificate may be the only option. Mkcert can generate a self-issued certificate and install the local CA into the root certificate library.

1. Install mkcert

brew install mkcert
Copy the code

2. Create a local CA

mkcert -install
Copy the code

Once generated, the certificate can be viewed on the Mac via keychain access:

3. Generate a certificate

Mkcert localhost 127.0.0.1Copy the code

Pem and localhost+1.pem, where localhost+1.pem is the server certificate and localhost+1-key.pem is the private key.

4. Change the config. Js

Then we copy these two files to the same directory as the config.js file and modify 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'))}}Copy the code

5. Rerun the project

Then rerun the project and you should see:

If the certificate is valid but still shows an insecure connection, restart your browser or try opening a privacy window.

series

Blog building series is the only practical series I have written so far. It is estimated to be about 20 articles, explaining how to use VuePress to build and optimize a blog and deploy it to GitHub, Gitee, private server and other platforms. This is the 22nd article in a series at github.com/mqyqingfeng…

Wechat: “MQyqingfeng”, add me Into Hu Yu’s only readership group.

If there is any mistake or not precise place, please be sure to give correction, thank you very much. If you like or are inspired by it, welcome star and encourage the author.