在本地端 CRA 與 Express 開發環境使用 HTTPS

前言

本教學使用mkcert工具，注意只能用於本地端(localhost)使用，且各電腦無法共享憑証需各自設定產生，如有使用 git 請將憑証資料夾.cert加入.gitignore中。

CRA (macOS)

安裝

# 安裝 mkcert
brew install mkcert

# 安裝 nss (有使用Firefox時才需要安裝)
brew install nss

# 設定你的電腦(建立一個CA)
mkcert -install

在 CRA 專案根目錄的命令列下輸入以下指令:

# 建立 .cert 資料夾
mkdir -p .cert

# 建立憑証
mkcert -key-file ./.cert/key.pem -cert-file ./.cert/cert.pem "localhost"

在 CRA 專案根目錄建立一個.env檔案(或已有此檔案則加入)，內容如下:

HTTPS=true
SSL_CRT_FILE=./.cert/cert.pem
SSL_KEY_FILE=./.cert/key.pem

CRA (Windows)

安裝

直接下載安裝執行檔，安裝時會有安全警告，直接跳過安裝即可，之後命令列視窗中應可以輸入mkcert指令測試
用Chocolatey安裝，安裝指令choco install mkcert

在 CRA 專案根目錄的命令列下輸入以下指令:

# 建立 .cert 資料夾
mkdir .cert

# 建立憑証
mkcert -key-file ./.cert/key.pem -cert-file ./.cert/cert.pem "localhost"

在 CRA 專案根目錄建立一個.env檔案(或已有此檔案則加入)，內容如下:

HTTPS=true
SSL_CRT_FILE=./.cert/cert.pem
SSL_KEY_FILE=./.cert/key.pem

Express(Node)

在專案根目錄的命令列輸入以下指令:

# 建立 .cert 資料夾
# macOS
mkdir -p .cert
# Windows(註: 不用加-p)
mkdir .cert

# 建立憑証
mkcert -key-file ./.cert/key.pem -cert-file ./.cert/cert.pem "localhost"

修改www/bin檔案內容如下:

#!/usr/bin/env node

/**
 * Module dependencies.
 */

var app = require('../app')
var debug = require('debug')('express-test:server')
var http = require('http')

// for https
var fs = require('fs')
var https = require('https')

const options = {
  key: fs.readFileSync(`.cert/key.pem`),
  cert: fs.readFileSync(`.cert/cert.pem`),
}
// end for https
/**
 * Get port from environment and store in Express.
 */

var port = normalizePort(process.env.PORT || '3005')
app.set('port', port)

/**
 * Create HTTP server.
 */

// for https
//var server = http.createServer(app);
var server = https.createServer(options, app)
// end for https

/**
 * Listen on provided port, on all network interfaces.
 */

server.listen(port)
server.on('error', onError)
server.on('listening', onListening)

/**
 * Normalize a port into a number, string, or false.
 */

function normalizePort(val) {
  var port = parseInt(val, 10)

  if (isNaN(port)) {
    // named pipe
    return val
  }

  if (port >= 0) {
    // port number
    return port
  }

  return false
}

/**
 * Event listener for HTTP server "error" event.
 */

function onError(error) {
  if (error.syscall !== 'listen') {
    throw error
  }

  var bind = typeof port === 'string' ? 'Pipe ' + port : 'Port ' + port

  // handle specific listen errors with friendly messages
  switch (error.code) {
    case 'EACCES':
      console.error(bind + ' requires elevated privileges')
      process.exit(1)
      break
    case 'EADDRINUSE':
      console.error(bind + ' is already in use')
      process.exit(1)
      break
    default:
      throw error
  }
}

/**
 * Event listener for HTTP server "listening" event.
 */

function onListening() {
  var addr = server.address()
  var bind = typeof addr === 'string' ? 'pipe ' + addr : 'port ' + addr.port
  debug('Listening on ' + bind)
}

以上程式碼主要是改用 https 模組與加上憑証檔案:

var fs = require('fs')
var https = require('https')

const options = {
  key: fs.readFileSync(`.cert/key.pem`),
  cert: fs.readFileSync(`.cert/cert.pem`),
}

//...
var server = https.createServer(options, app)

前言

CRA (macOS)

CRA (Windows)

Express(Node)

參考