乐趣区

关于https:在本地开发调试环境使用-HTTPS

作者 LeanCloud weakish

原则上,本地开发调试环境和线上生产环境的差别越小越好。因为目前大多数站点(无论是间接供用户拜访的网站还是提供后端 API 的站点)应用的都是 HTTPS,所以在本地开发调试环境也应用 HTTPS 很有必要。

它不仅有助于尽早发现和 HTTPS 相干的一些问题(比方代码中不小心申请了 HTTP 资源,因为本地调试阶段应用 HTTP 协定,所以没有发现,上线后因为混合内容被浏览器阻塞,网站显示异样甚至不能失常工作),也有助于防止一些客户端的限度(比方通过局域网拜访站点,测试站点的 service worker 性能)。

其实在本地配置 HTTPS 十分快捷不便,有现成的成熟工具能够应用。大抵分两步:

  1. 生成证书。
  2. 批改我的项目的启动服务。

生成证书

咱们将应用 [mkcert] 这个零配置的命令行工具生成证书。

首先装置 mkcert。macOS 下能够应用 Homebrew 装置,其余零碎请参考 mkcert 的文档:

brew install mkcert
brew install nss

其中,nss 是可选的,如果不应用或者不须要测试 Firefox,那么能够不装置 nss

接着咱们创立一个目录来寄存证书,比方 ~/.cert

mkdir -p ~/.cert

主动生成证书:

mkcert -key-file ~/.cert/key.pem -cert-file ~/.cert/cert.pem "localhost"

让零碎信赖生成的证书:

mkcert -install

因为须要在零碎中装置本地 root CA,所以运行上述命令会申请 sudo 权限。只有首次生成证书时须要运行这个命令,后续通过 mkcert -key-file 生成的证书会主动被零碎信赖。

批改我的项目的启动服务

许多框架都提供了简直是开箱即用的 HTTPS 反对,比方在启动命令时加上相应的命令行参数或是环境变量,或者在启动服务的代码中进行简略的配置。上面就以前端开发比拟风行的 [http-server]、React、[Express] 为例(三者正好对应了前述三种形式),介绍如何在本地开发调试时启动 HTTPS 服务。

http-server

纯动态我的项目能够通过 [http-server] 进行调试,要切换至 HTTPS 模式,只需加上三个命令行参数:

npx http-server -S -C ~/.cert/cert.pem -K ~/.cert/key.pem

React

通过 Create React App 创立的 React 我的项目,只需在启动服务时指定几个环境变量就能够切换至 HTTPS 模式:

npx create-react-app example
cd example
HTTPS=true SSL_CRT_FILE=$HOME/.cert/cert.pem SSL_KEY_FILE=$HOME/.cert/key.pem npm start

为了省去每次启动都须要在后面加上这几个环境变量的麻烦,能够间接批改 package.jsonscripts.start 项:

"start": "HTTPS=true SSL_CRT_FILE=$HOME/.cert/cert.pem SSL_KEY_FILE=$HOME/.cert/key.pem react-scripts start",

这样,当前只需运行 npm start 即可启动 HTTPS 服务。

Express

相比上述两个我的项目,[Express] 略微麻烦一点点,须要简略批改启动服务代码。

首先咱们创立我的项目目录并装置 expressjs:

mkdir example
cd example
npm init -y
npm i express

而后编写以下简略的启动 HTTPS 服务的示例代码:

const express = require('express')
const app = express()
const https = require('https')
const fs = require('fs')
const os = require('os')
const path = require('path')
const port = 3000

app.get('/', (req, res) => {res.send('Hello World!')
})

https.createServer({key: fs.readFileSync(path.join(os.homedir(), '.cert/key.pem')),
    cert: fs.readFileSync(path.join(os.homedir(), '.cert/cert.pem'))
}, app).listen(port, () => {console.log(`Example app listening at https://localhost:${port}`)
})

能够看到,和 Express 官网上的 Hello World 示例代码相比,咱们另外引入了 https 包,并通过 createServer 办法创立了 https 服务,并指定了证书门路为之前生成的本地证书。

反向代理

线上生产环境常见的一种架构是在 HTTP 服务前加一层反向代理,HTTPS 加解密在反向代理层面实现。如果我的项目的生产环境应用这一架构,那么为了最大限度地与生产环境保持一致,本地开发调试时也能够采取相似的架构,比方应用 [Caddy] 充当反向代理服务器。

macOS 下 Caddy 能够通过 Homebrew 装置,其余零碎请参考 Caddy 文档:

brew install caddy

失常启动 HTTP 服务后,只需一行命令即可加上反向代理(这里假设服务的端口是 3000):

caddy reverse-proxy --from localhost --to localhost:3000

通过 https://localhost 即可拜访服务:

Caddy 会主动生成证书,获取零碎信赖,无需另行生成证书,也无需批改我的项目的启动服务。

结语

为了保障本地开发调试环境和线上生产环境尽可能统一,在本地也应用 HTTPS 很有必要。这里介绍了两种在本地开发调试阶段应用 HTTPS 的办法,施行起来都十分快捷不便,能够依据我的项目的具体情况和集体偏好选用。当然,除了在这两种解决问题的计划中抉择,也能够抉择间接毁灭问题,在线上环境进行调试。许多 serverless 云服务都提供线上调试性能,比方 LeanCloud 的云引擎提供和生产环境简直齐全一样的准备环境,能够主动获取我的项目 git 仓库的更新并部署到准备环境,调试实现、测试通过后能够一键公布至生产环境,免去在本地搭建环境、配置工具的麻烦。

退出移动版