webpack-dev-server配置https

前情

最近在做一個瀏覽器通知的交互需求，但是查閱官方文擋，瀏覽器通知需要在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環境下了。