How to enable local HTTPS access for VuePress blog

foreword

In "An article that takes you to build a blog with VuePress + Github Pages" , we used VuePress to build a blog, and the final effect can be viewed: TypeScript Chinese document .

If we run the project locally, the running address is similar to http://localhost:8080/learn-typescript/ and starts with http, which satisfies the needs most of the time, but sometimes, such as compatibility with PWA, it needs to start with https, then how do we use https addresses locally Woolen cloth?

Enable HTTPS

In the official VuePress documentation, we did not find a direct answer, but we can find a answer in StackOverflow, in fact, we can add it directly in config.js :

module.exports = {
  devServer: {
    https: true
  }
}

Let's try it, access the address, an insecure prompt will appear:

We click "Continue to localhost (unsafe)" in "Advanced" to access the page, but the address bar will display an "unsafe":

HTTPS principle

Think about it, we don't have an SSL certificate, how can we judge it as a secure connection?​

So how can we make the browser judge as a secure connection? Let's briefly review the principle of HTTPS:

The first is CA, English full name: Certificate Authority, Chinese translation: digital certificate certification authority, is an authoritative organization responsible for issuing and managing digital certificates, and is a trusted third-party organization. The root certificate issued by the CA will be built in the computer system and browser.

Then there is the process of HTTPS establishment. When the client initiates an HTTPS connection to the server, the server will send its own certificate to the client. The certificate contains the public key, and the client will look for the root of the CA issued by the certificate. If there is a certificate, decrypt and verify the certificate to prevent the certificate from being tampered with. If it passes, the client will generate a random string, encrypt it with the public key in the server certificate, and then send it to the server. The server uses the private key to pair it. This ciphertext is decrypted to obtain a random string, and then the two ends use this random value for encrypted communication.

So for the server, there needs to be two things, one is the server certificate containing the public key, and one is the private key.

For the client, the CA root certificate is required.

mkcert

In order to achieve a local HTTPS connection, we can use the tool mkcert to configure the certificate:

mkcert is a handy tool for creating locally trusted development certificates. It is very difficult to use a certificate issued by a real CA (Certificate Authority) in a local development environment, especially for hosts such as example.net, localhost or 127.0.0.1, which are issued by a real CA certificate is not possible. In such cases, self-signed certificates may be the only option. mkcert can generate self-signed certificates and install a local CA into the system root certificate store.

1. Install mkcert

brew install mkcert

2. Create a local CA

mkcert -install

After generation, on the Mac, we can view this certificate through "Keychain Access":

3. Generate a certificate

mkcert localhost 127.0.0.1

This will generate two certificate files in the current directory: localhost+1-key.pem and localhost+1.pem , where localhost+1.pem is the server certificate and localhost+1-key.pem is the private key.​

4. Modify config.js

Then we copy these two files to the same level directory of the config.js file, and then 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'))
  }
}

5. Rerun the project

Then rerun the project and you will see:

If the certificate appears to be valid but still shows an insecure connection, restart the browser or try opening a private window.

series of articles

The blog building series is the only series of practical tutorials I have written so far. It is expected to be about 20 articles, explaining how to use VuePress to build and optimize blogs, and deploy them to GitHub, Gitee, private servers and other platforms. This article is the 22nd article, the address of the full series of articles: https://github.com/mqyqingfeng/Blog

WeChat: "mqyqingfeng", add me to the only readership of Xianyu.

If there are any mistakes or inaccuracies, please be sure to correct me, thank you very much. If you like or have inspiration, welcome to star, which is also an encouragement to the author.