How to Quickly Set Up a Local HTTPS Development Environment

Local development often needs HTTPS because many Web APIs (e.g., navigator.clipboard) only work in a secure context; browsers treat https://localhost and window.isSecureContext as secure, and some HTTP requests may be rejected by HTTPS servers.

First, generate a self‑signed root CA using OpenSSL: openssl genrsa -des3 -out localCA.key 2048 Then create the root certificate (valid for 5 years):

openssl req -x509 -new -nodes -key localCA.key -sha256 -days 1825 -out localCA.pem

Import localCA.pem into macOS Keychain Access, set it to "Always Trust", and confirm the trust status.

Next, create a wildcard domain certificate. Generate a private key for the domain: openssl genrsa -out ext.yourdomain.com.key 2048 Create a Certificate Signing Request (CSR):

openssl req -new -key ext.yourdomain.com.key -out ext.yourdomain.com.csr

Prepare an extension file (e.g., ext.yourdomain.com.ext) with the following content:

authorityKeyIdentifier=keyid,issuer
basicConstraints=CA:FALSE
keyUsage = digitalSignature, nonRepudiation, keyEncipherment, dataEncipherment
subjectAltName = @alt_names
[alt_names]
DNS.1 = *.yourdomain.com

Sign the CSR with the root CA to obtain the wildcard certificate:

openssl x509 -req -in ext.yourdomain.com.csr \
  -CA localCA.pem -CAkey localCA.key \
  -CAcreateserial -out ext.yourdomain.com.crt \
  -days 1825 -sha256 -extfile ext.yourdomain.com.ext

Copy the generated ext.yourdomain.com.key and ext.yourdomain.com.crt to your project and configure Webpack devServer:

devServer: {
  proxy: { '*': 'http://127.0.0.1:9360' },
  port: 443,
  https: {
    key: fs.readFileSync(path.join(__dirname, 'ext.yourdomain.com.key')),
    cert: fs.readFileSync(path.join(__dirname, 'ext.yourdomain.com.crt'))
  },
  host: 'dev.yourdomain.com',
  allowedHosts: ['dev.yourdomain.com'],
  watchContentBase: true
}

Add host entries to your /etc/hosts file:

127.0.0.1 dev.yourdomain.com
127.0.0.1 test.yourdomain.com

After restarting the services, the local site can be accessed via https://dev.yourdomain.com. Note that the wildcard *.yourdomain.com only covers one level (e.g., dev.yourdomain.com or test.yourdomain.com); deeper subdomains like dev.h5.yourdomain.com require a separate certificate.