LoginSignup
1
0

More than 1 year has passed since last update.

[Kintone]WSL2でVSCodeのLive Serverが反応しない時の対処法

Last updated at Posted at 2022-10-15

会社の支給PCがWindows11で、開発環境の構築に苦戦しています。
今回はKintoneのJavaScript開発用にVSCodeのLive Serverの設定を試みていたのですが、プライベートのMacでは成功するのにWindows端末上のWSL2では動いてくれません。
試行錯誤の末ようやく動くようになりましたので、メモに残しておきます。

なお、今回はKintone開発のデバッグ環境構築を前提として話を進めます。

結論

mkcertのインストール先はwindows。pfxへの変換や証明書の登録など余計なことはしない。

手順

1:Chocolatey (Windows用のパッケージ管理システム)のインストール

まずは公式に従ってWindows版mkcertをインストールします。
https://github.com/FiloSottile/mkcert#installation

$ Set-ExecutionPolicy Bypass -Scope Process -Force; [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072; iex ((New-Object System.Net.WebClient).DownloadString('https://community.chocolatey.org/install.ps1'))

2:mkcertのインストール

chocoコマンドで一発。

$ choco install mkcert

3:インストール先ディレクトリに移動してキーを作成

よくある一般的な方法です。

$ mkcert -CAROOT
C:\Users\pc10h\AppData\Local\mkcert

$ cd C:\Users\pc10h\AppData\Local\mkcert

$ mkcert localhost 127.0.0.1 ::1
Created a new certificate valid for the following names 📜
 - "localhost"
 - "127.0.0.1"
 - "::1"

The certificate is at "./localhost+2.pem" and the key at "./localhost+2-key.pem" ✅

It will expire on 15 January 2025

5:VSCodeに設定

settings.json
(略)
    "liveServer.settings.https": {
      "enable": true,
      "cert": "\\Users\\pc10h\\AppData\\Local\\mkcert\\localhost+2.pem",
      "key": "\\Users\\pc10h\\AppData\\Local\\mkcert\\localhost+2-key.pem"
    },
(略)

タイトルなし.png

以上終わり!

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0