如何在MacOS上建立Local HTTPS Server & 使用Custom Domain存取網站 with Node.js

林罡北

13 min readJun 3, 2023

How to Create Local Https Server & Local Custom Domain on MacOS with Node.js

為什麼會有這篇文章

身為前端工程師，網頁正在開發或測試時，偶爾會有一些需求(常見的情況是整合第三方服務的時候)，某個功能或是串接的服務只能在https的環境或是指定的網域下才能正常使用

導致開發時，沒辦法在local就確定服務是否有串接成功，可能必須要上alpha, beta甚至production

不只有你，我也遇到了哈哈哈
所以花一些時間整理成這篇文章
記錄一下讓自己以後能夠無腦按照文章做

誰適合這篇文章

如果你用MacOS & Node.js、不熟悉openssl，平常只會起local開發用的http web server，找了很多文章弄ssl都失敗

想要無腦的讓http前面加上s，甚至還有客製化網域
那這篇文章很適合你

這篇文章，沒有任何技術說明，全是過程
我不會跟你講什麼是openssl、什麼是Root CA
技術細節大家可以自己去Google或是看看最下面的Reference

過程中只會講解主要的流程，不會講技術細節
目標就是大家照著做，就可以有lcoal https server & custom doamin

Let’s Go！

Prepare

安裝Homebrew

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

安裝openssl

brew install openssl

建立專案&對應的資料夾

project
├── server
│   ├── ssl
│   ├── index.js // entry of node.js server

Step 1. 新增openssl config

在ssl資料夾底下新增openssl.cnf檔案，直接複製貼上下面的內容
然後改一下O、OU、emailAddress

組織名稱跟部門名稱還有email都可以自己隨便寫，不存在也沒關係

[req]
default_bits = 2048
prompt = no
default_md = sha256
distinguished_name = dn

[dn]
C=TW # 國別
ST=Taiwan # 國名
L=Taipei # 城市
O=CryptoInform # 組織名稱
OU=Dev # 組織底下的部門名稱
emailAddress=dev@cryptoinform.app # 聯絡用email
CN = localhost

新增完之後，資料夾結構會變這樣子：

project
├── server
│   ├── ssl
│   │   ├── openssl.cnf
│   ├── index.js // entry of node.js server

Step 2. 建立 self-signed root certificate

在ssl資料夾底下，執行下面2個指令

openssl req -x509 -nodes -new -sha256 -days 390 -newkey rsa:2048 -keyout "RootCA.key" -out "RootCA.pem" -config openssl.cnf
openssl x509 -outform pem -in "RootCA.pem" -out "RootCA.crt"

其中可以看到，第一行有一個參數是 -days 390 ，意義是390天之後會過期，因為2020/09/01之後，產生的SSL/TLS certificates的有效期限最多是397天(13個月)，超過就會出現Error，所以如果要自己改，記得數字不要超過397

Detail Here: https://stackoverflow.com/a/65239775.

執行結果：

執行指令完之後，資料夾結構會變這樣子：

project
├── server
│   ├── ssl
│   │   ├── openssl.cnf
│   │   ├── RootCA.crt
│   │   ├── RootCA.key
│   │   ├── RootCA.pem
│   │   ├── RootCA.srl
│   ├── index.js // entry of node.js server

Step 3: 定義certificate支援的domains/subdomains

在ssl資料夾底下，新增一個vhosts_domains.ext 檔案，然後複製貼上下面的內容
然後改一下DNS.1、DNS.2，有需要的話也可以新增DNS.3 、DNS.4 …，改成你希望支援https的domain

以下圖為例的話，這個certificate支援下面的網域

dev.cryptoinform.app
localhost

也就是說你可以透過https在local訪問這些網域！

authorityKeyIdentifier=keyid,issuer
basicConstraints=CA:FALSE
keyUsage = digitalSignature, nonRepudiation, keyEncipherment, dataEncipherment
subjectAltName = @alt_names
[alt_names]
DNS.1=dev.cryptoinform.app # 1st domain with https
DNS.2=localhost # 2nd domain with https

執行完之後，資料夾結構會變這樣子：

project
├── server
│   ├── ssl
│   │   ├── openssl.cnf
│   │   ├── RootCA.crt
│   │   ├── RootCA.key
│   │   ├── RootCA.pem
│   │   ├── RootCA.srl
│   │   ├── vhosts_domains.ext
│   ├── index.js // entry of node.js server

Step 3. 新增certificate

一樣，在ssl資料夾底下，接著執行下面2個指令

openssl req -new -nodes -newkey rsa:2048 -keyout localhost.key -out localhost.csr -config openssl.cnf
openssl x509 -req -sha256 -days 1024 -in localhost.csr -CA RootCA.pem -CAkey RootCA.key -CAcreateserial -extfile vhosts_domains.ext -out localhost.crt

執行結果：

新增完之後，資料夾結構會變這樣子：

project
├── server
│   ├── ssl
│   │   ├── localhost.crt
│   │   ├── localhost.csr
│   │   ├── localhost.key
│   │   ├── openssl.cnf
│   │   ├── RootCA.crt
│   │   ├── RootCA.key
│   │   ├── RootCA.pem
│   │   ├── RootCA.srl
│   │   ├── vhosts_domains.ext
│   ├── index.js // entry of node.js server

Step 4. 在Node.js Server中載入certificate

這是index.js 的內容
主要就是在啟動Node.js Server時載入certificate，並且把req/res轉送給Next.js處理

const https = require('https');
const next = require('next');
const fs = require('fs');

const PORT = 443
const app = next({ dev: process.env.NODE_ENV !== 'production' });
const handle = app.getRequestHandler();

const httpsOptions = {
  key: fs.readFileSync('./ssl/localhost.key'),
  cert: fs.readFileSync('./ssl/localhost.crt'),
};

app.prepare().then(() => {
  https
    .createServer(httpsOptions, (req, res) => {
      handle(req, res);
    })
    .listen(PORT);
  console.log(`> Server started on https://localhost:${PORT}`);
});