search
LoginSignup
0

posted at

updated at

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

会社の支給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

以上終わり!

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
What you can do with signing up
0