使用webpack搭建本地https开发环境

使用webpack搭建本地https开发环境

 

为什么本地需要 https 环境?

:因为 Facebook 的 Javascript SDK 只能在 https 环境中运行,为了开发方便,本地搭建https开发环境。

 

本次使用webpack devserver搭建本地https开发环境,查询webpack配置后得知,还有两个问题需要我们解决,域名 和 证书

一、域名:域名可以用配置hosts解决,hosts配置一条记录指向127.0.0.1即可。

notepad C:\Windows\System32\drivers\etc\hosts
127.0.0.1 jydeng.dev

二、证书:证书我们使用mkcert签发。

1、安装mkcert(使用Chocolatey安装,Chocolatey是Windows上的包管理工具,用Windows做开发的同学尽快安装一下)

choco install mkcert

2、使用mkcert生成根证书

mkcert -install

3、创建目录存放域名证书和私钥

D:
mkdir ca
cd ca

4、生成所需域名对应的本地证书,例如 jydeng.dev

mkcert jydeng.dev

5、拷贝证书到项目目录下

6、配置devServer开启 https (这一部分不了解的同学,参考一下webpack文档中devServer那一章)

 devServer: {
    host: "jydeng.dev",
    port: 80,
    disableHostCheck: true,
    https: {
      key: fs.readFileSync(path.resolve(__dirname, "./https/jydeng.dev-key.pem")),
      cert: fs.readFileSync(path.resolve(__dirname, "./https/jydeng.dev.pem")),
    },
  }

解决了以上两个问题,启动webpack即可,会发现证书已经生效,Facebook SDK也可用了。

使用webpack搭建本地https开发环境

 

使用webpack搭建本地https开发环境

上一篇:8.Kubernetes 的微服务架构设计


下一篇:js50行代碼實現輪播效果