背景

最近接入云游戏，发现他们sdk初始化前需要判断window.crypto.subtle来做加密计算，不然会无法加密。本地开发过程中使用koa搭建http服务器。发现window.crypto.subtle返回undefined，在MDN发现要使用window.crypto.subtle是有前提条件的：

Secure context:This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.

意思就是要用https才能使用（手动狗头）

注意不要使用mdn-cn，这句Secure context直接被翻译官给忽略了！（神坑！！！）

所以被逼无奈着手解决开发环境开启https服务器的“开心”旅程~

一、koa http服务

为了快速搭建静态服务器，我这里采用koa，操作步骤非常简单

新建文件夹，并初始化工程

cnpm init -y

安装依赖（避免全局安装）

cnpm install koa koa-static --save

// 0.导入需要的资源包
const Koa = require('koa');
const app = new Koa();
const serve = require('koa-static');

// 1.主页静态网页 把静态页统一放到public中管理
const home   = serve(path.join(__dirname));

// 3.分配路由
app.use(home); 
app.listen(3000);

项目下运行node server，当然你也可以在 package.json 添加对应script，并运行它。
浏览器访问localhost:3000即可

二、生成证书

要想完成https的搭建，肯定少不了证书。但是证书都是和域名相关联的，证书申请也非常麻烦，所以我们可以用 mkcert —— 一个简单的零配置工具，可以使用您喜欢的任何名称制作本地可信赖的SSL开发证书。

window 用户需要提前安装包管理工具 —— Chocolatey

Chocolatey安装过程

window下打开PowerShell，找不到的话应该是在C:\Windows\System32\WindowsPowerShell\v1.0。用管理员权限打开，不然会提示权限问题。
输入安装页面的command code，回车即可

Set-ExecutionPolicy Bypass -Scope Process -Force; [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072; iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))

输入下面命令能看到版本号，表示安装成功：

choco

安装mkcert

在PowerShell里输入choco install mkcert

安装CA

使用mkcert -install自动在系统根存储中创建并安装本地CA

我没有操作这个命令，暂时不知道什么作用

生成证书

针对测试域名a.b.cn生成证书，多个域名用空格分隔mkcert a.b.cn

命令运行成功后，会在C:\Windows\System32\下生成对应的证书文件a.b.cn-key.pem和a.b.cn.pem。

三、koa https服务

在项目的根下新建文件夹static 存放已经生成的两个证书。

现在我们来改造一下我们的服务：

安装依赖cnpm i -S https fs koa-sslify

https 用于启动https服务
fs用于获取读取证书文件
koa-sslify 用于将http请求强制转换为https请求

修改server.js

const Koa = require('koa');
const app = new Koa();
const serve = require('koa-static');
const path = require('path');
const https = require('https');
const fs = require('fs');
const enforceHttps = require('koa-sslify').default;

app.use(enforceHttps());

const home = serve(path.join(__dirname));
app.use(home);

const options = {
  key: fs.readFileSync('./static/a.b.cn-key.pem'),
  cert: fs.readFileSync('./static/a.b.cn.pem')
}
https.createServer(options, app.callback()).listen(3000, () => {
  console.log('-----server on 3000--------')
})

注意：const enforceHttps = require('koa-sslify').default;要加default，不然会报错enforceHttps不是function。

运行server.js访问https//a.b.cn:3000即可

a.b.cn不要忘了绑定本地的host： 127.0.0.1 a.b.cn

四、注意事项

mkcert 生成的证书仅限测试，切记在生产环境使用！！！

写了就忘实战系列——搭建本地https静态资源服务

背景