快速搭建基于HTTPS的本地开发环境

　　奇技指南
　　本文作者李松峰，资深技术图书译者，翻译出版过40余部技术及交互设计专著，现任360奇舞团高级前端开发工程师，360前端技术委员会委员、W3CAC代表。
　　本文首发于奇舞周刊。
　　快速搭建基于HTTPS的本地开发环境
　　为什么本地开发要使用HTTPS？
　　因为有很多WebAPI必须在HTTPS环境下才可以使用。比如，ClipboardAPIandevents（https：www。w3。orgTRclipboardapis）中的navigator。clipboard对象是通过扩展Navigator接口定义的：partialinterfaceNavigator｛
　　〔SecureContext，SameObject〕readonlyattributeClipboardclipboard；
　　｝；
　　在此，partial的意思就是扩展Navigator接口，给它增加一个Clipboard类型的只读成员属性clipboard。〔SecureContext，SameObject〕中的两个关键字是扩展属性（extendedattribute），在这里修饰接口成员clipboard。SecureContext表示navigator只能在安全上下文中暴露clipboard属性，SameObject表示每次访问navigator。clipboard必须都返回相同的值。（参见：https：heycam。github。iowebidlSecureContext和https：heycam。github。iowebidlSameObject。）
　　关于安全上下文，W3C的SecureContexts文档（https：w3c。github。iowebappsecsecurecontexts）中有详细解释。根据MDN，全站HTTPS和通过http：localhost交付的网页是安全的。可以通过window。isSecureContext属性来检测当前上下文是否安全。if（window。isSecureContext）｛
　　navigator。clipboard。writeText（Writethistoclipboard！）。then（okgt；true，errgt；false）
　　｝
　　另外还有一个重要原因，就是有时候HTTP的本地请求可能会被HTTPS服务器拒绝。
　　无论如何，我们在开发实践中都有可能碰到将本地Web服务HTTPS化的需求。这时候，我们可以创建自己私钥并签名一个根证书，并在开发环境中配置安装和信任自己的根证书。然后再通过这个根证书和私钥签发相应域名的SSL证书。
　　好吧，开始干吧。1、生成自签名的根SSL证书
　　首先生成一个RSA2048加密的私钥，保存为localCA。key。生成过程中，会提示输入密码（passphrase），以后在使用生成的私钥签发证书时都要输入这个密码。opensslgenrsades3outlocalCA。key2048
　　接下来用这个私钥生成一个根SSL证书，保存为localCA。pem。有效期为1825天（5年）。opensslreqx509newnodeskeylocalCA。keysha256days1825outlocalCA。pem
　　在此期间，会提示输入：CountryName（2字母）：国家地区StateorProvinceName（全称）：省市自治区LocalityName：所在地OrganizationName：组织单位OrganizationalUnitName：部门CommonName：常用名称，根证书的名称
　　2、配置本地环境信任自签名根证书
　　打开macOS中的钥匙串访问应用：
　　1、文件gt；导入项目，选择localCA。pem，打开（需要输入密码）
　　2、双击导入的证书，在信任中选择始终信任
　　3、退出当前窗口（需要输入密码），此证书已标记为受所有用户信任
　　3、签发域名SSL证书
　　首先，创建域名SSL证书的私钥，ext的意思在这里表示泛域名，可以随意命名opensslgenrsaoutext。yourdomain。com。key2048
　　然后，用这个密钥创建一个CSR（CertificateSigningRequest，证书签名请求）文件opensslreqnewkeyext。yourdomain。com。keyoutext。yourdomain。com。csr
　　在创建证书之前，还要创建一个配置文件，将其命名为ext。yourdomain。com。ext，包含如下内容：authorityKeyIdentifierkeyid，issuer
　　basicConstraintsCA：FALSE
　　keyUsagedigitalSignature，nonRepudiation，keyEncipherment，dataEncipherment
　　subjectAltNamealtnames
　　〔altnames〕
　　DNS。1。yourdomain。com
　　注意这里的。yourdomain。com，表示SSL证书可用于泛域名。
　　最后，为。yourdomain。com域名签发SSL证书opensslx509reqinext。yourdomain。com。csr
　　CAlocalCA。pemCAkeylocalCA。key
　　CAcreateserialoutext。yourdomain。com。crt
　　days1825sha256extfileext。yourdomain。com。ext
　　把生成的证书和私钥文件复制到相应目录ext。yourdomain。com。crtext。yourdomain。com。key
　　假设使用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，
　　hot：true
　　｝，
　　配置HOST文件：127。0。0。1dev。yourdomain。com
　　127。0。0。1test。yourdomain。com
　　重启服务：
　　再换一个子域名：
　　注意，。yourdomain。com只限一级泛子域名，即dev。yourdomain。com或test。yourdomain。com是可以的，而dev。h5。yourdomain。com则不可以！（如果有二级泛子域名需求，可以单独生成比如。h5。yourdomain。com这样证书。）
　　参考资料https：deliciousbrains。comsslcertificateauthorityforlocalhttpsdevelopmenthttps：medium。freecodecamp。orghowtogethttpsworkingonyourlocaldevelopmentenvironmentin5minutes7af615770eec