webpack-dev-server配置https

2021-04-23 04:26

阅读:790

标签:png   mat   交互   ack   NPU   string   根证书   运行   drivers   

前情

最近在做一个浏览器通知的交互需求,但是查阅官方文挡,浏览器通知需要在https环境下才能工作,于是就研究怎么在开发环境下配置一个https服务器

STEP1 安装Chocolatey

Chocolatey是Windows上的包管理工具,使用它可以使用命令行安装程序,使用管理员权限打开cmd,再运行如下代码,一路确认允许即可安装成功

@"%SystemRoot%\System32\WindowsPowerShell\v1.0\powershell.exe" -NoProfile -InputFormat None -ExecutionPolicy Bypass -Command "iex ((New-Object System.Net.WebClient).DownloadString(‘https://chocolatey.org/install.ps1‘))" && SET "PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin"

STEP2 安装mkcert

mkcert是用来生成证书的软件,使用下列命令安装mkcert,同样要用管理员权限运行cmd

choco install  mkcert -y

STEP3 生成根证书

mkcert -install

STEP4 生成域名证书

先要指定生成的域名本地证书的存放目录,此处我以D盘下ca目录,生成test.dev域名证书做演示,详细命令行如下

D:
mkdir ca
cd ca
mkcert test.dev

STEP5 拷贝证书目录到项目下

把上面生成test.dev-key.pem和test.dev.pem拷贝到项目目录下,此处我是在项目根目录下新建https存放

STEP6 配置devServer开启https

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

STEP7 修改host

我平时习惯用switchhost来管理电脑的host,也可以手动修改C:\Windows\System32\drivers\etc\hosts

127.0.0.1 test.dev

STEP8 启动webpack-devserver

浏览器打开test.dev,就可以看到已经是运行在https环境下了。

技术图片

webpack-dev-server配置https

标签:png   mat   交互   ack   NPU   string   根证书   运行   drivers   

原文地址:https://www.cnblogs.com/xwwin/p/14687841.html


评论


亲,登录后才可以留言!