为什么本地需要 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也可用了。