kintoneアプリ開発でVSCodeのLive Serverプラグインを利用してローカルのjsを読み込む

kintoneアプリ開発でVSCodeのLive Serverプラグインを利用してローカルのjsを読み込む

kintoneアプリ開発でVSCodeのLive Serverプラグインを利用してローカルのjsを読み込む

前提

項目	内容
OS	Windows

「kintoneアプリでjsを@kintone/customize-uploaderモジュールを使用してアップロードする」の続きです。npm scriptsからjsファイルをアップロードすることができるようになりましたが、ローカルの修正をそのままwatchしてすぐ反映、kintoneアプリで動作確認出来たらすごく便利です。

VSCodeのLive Serverプラグインとmkcertというツールを使用すれば実現できてしまいます。

mkcertのexeをダウンロードします。

https://github.com/FiloSottile/mkcert/releases/
以下コマンドを実行します。

mkcert -install

「はい」をクリックして、C:\Users\<User>\AppData\Local\mkcert配下にCA証明書と秘密鍵が作成されます。

次に証明書と秘密鍵を作成します。

mkcert-v1.4.4-windows-amd64.exe localhost 127.0.0.1 ::1

２つのpemファイルが作成されます。

localhsot+2-key.pem
localhsot+2.pem

VSCode(Live Server)の設定

VSCodeを起動し、ワークスペースのsettings.jsonを編集します。(ctrl + ,)

settings.jsonは以下のようになります。

{
    "liveServer.settings.https": {
        "enable": true,
        "cert": "C:\\Users\\takahashi-h5\\Downloads\\localhsot+2.pem",
        "key": "C:\\Users\\takahashi-h5\\Downloads\\localhsot+2-key.pem",
        "passphrase": ""
    }
}

passphraseに””を設定します。これでVSCode右下の「Go Live」をクリックします。

少しすると「https://127.0.0.1:5500/」のURLで以下の画面が起動します。

ブラウザ上でbundle.jsがある場所に移動して、URLをコピーします。コピーしたURLをkintoneアプリに貼り付けてアプリを更新します。

npm scripts修正

package.jsonのnpm scriptsのnpm run devに–watchを付けて、修正があるたびにbundle.jsが作成されるようにします。

"scripts": {
  "dev": "webpack --mode development --watch",
  "prod": "webpack --mode production",
  "upload": "babel-node --presets @babel/env -r dotenv/config uploader.js"
},

これで何か修正するたびにwebpackが実行され、ローカルのbundle.jsが作成されます。

kintoneアプリはlocalhostのbundle.jsを参照しているので、bundle.jsをアップロードせずともそのまま動作確認することが可能になります。