webpack-plugin-kintone-plugin で環境ごとのビルド設定をする

当社では Kintone プラグインをいくつか開発していますが、kintone.proxy で外部の Web API をコールするときに環境によってエンドポイントを変更する必要がありました。このように、プロダクションやステージングなどの環境ごとに設定を変更するとき、その都度ソースコードを修正してビルドするのは面倒な上ミスする可能性もあります。これを解決するため、環境ごとにビルド設定を用意してみました。

※今回の記事は、Kintone プラグインを作成するための最低限の知識があることを前提としています。

webpack-plugin-kintone-plugin

はじめは plugin-packer で環境ごとのビルド設定ができないか試行錯誤していましたが、どうにもできそうになくて白目になっていました。色々と調べていたら webpack-plugin-kintone-plugin を使えば実現できそうだったため試してみました。

webpack-plugin-kintone-plugin は webpack と一緒に plugin-packer を動かすための CLI ツールです。webpack-plugin-kintone-plugin についての詳細やインストール手順はこちらを参照してください。

ゴール

ゴールは以下のように、コマンドの引数で環境ごとのビルドをすることです。環境ごとの設定ファイルを用意し、ビルド時のコマンドによって適切な設定ファイルを読み込むことで実現します。

npm run dev
npm run prod

環境設定ファイル

env ディレクトリに <環境名>.js ファイルを配置します。それぞれの中身は以下の通りです。

dev.js

export default {
  apiRoot : "https://dev-xxxxxx"
}

prod.js

export default {
  apiRoot : "https://prod-xxxxxx"
}

プラグインのソースコード

環境設定ファイルで設定した環境変数を読み込みます。これで userEnv.apiRoot のように環境変数として扱えます。

desktop.js (必要に応じてmobile.jsなども同様に)

import userEnv from 'userEnv';
jQuery.noConflict();

(function($, PLUGIN_ID) {
...

コマンドの設定

script を以下のように修正します。NODE_ENVの部分でビルド時に使用する設定ファイルを指定しています。この例では cross-env を使用しています。

package.json

"scripts": {
  "start": "node scripts/npm-start.js",
  "upload": "kintone-plugin-uploader dist/plugin.zip --watch --waiting-dialog-ms 3000",
  "develop": "webpack --mode development --watch",
  "build": "webpack --mode production",
  "lint": "eslint src",
  "dev": "cross-env NODE_ENV=dev webpack --mode development",
  "prod": "cross-env NODE_ENV=prod webpack --mode production"
}

webpack の設定

webpack の設定ファイルを作成します。environmentとresolveの部分でコマンドから読み込む設定ファイルを特定しています。

webpack.config.js

const path = require('path');
const KintonePlugin = require('@kintone/webpack-plugin-kintone-plugin');
const environment = process.env.NODE_ENV || 'dev';

module.exports = {
  entry: {
    desktop: './src/js/desktop.js'
  },
  output: {
    path: path.resolve(__dirname, 'src', 'webpack'),
    filename: '[name].js'
  },
  resolve: {
    alias: {
      userEnv$: path.resolve(__dirname, `env/${environment}.js`),
    },
  },
  plugins: [
    new KintonePlugin({
      manifestJSONPath: './src/manifest.json',
      privateKeyPath: './private.ppk',
      pluginZipPath: './dist/plugin.zip'
    })
  ]
};

プラグインパッケージング用の設定ファイル

プラグインパッケージング用の設定ファイルを作成します。こちらを参考に必要な項目を設定します。

manifest.json

{
  "manifest_version": 1,
  "version": 1,
  "type": "APP",
  "desktop": {
    "js": [
      "https://js.cybozu.com/jquery/3.3.1/jquery.min.js",
      "webpack/desktop.js"
    ],
    "css": [
      "css/51-modern-default.css",
      "css/desktop.css"
    ]
  },
  "icon": "image/icon.png",
  "name": {
    "en": "xxxxxx-plugin"
  },
  "description": {
    "en": "xxxxxx-plugin-description"
  }
}

ビルド

コマンドを実行して確認します。環境ごとの設定ファイルを読み込んでビルドされたことが確認できました。

npm run dev

> xxxxxx-plugin@0.1.0 dev
> cross-env NODE_ENV=dev webpack --mode development

----------------------
Success to create a plugin zip!
Plugin ID: xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
Path: ./dist/plugin.zip
----------------------
asset desktop.js 4.42 KiB [compared for emit] (name: desktop)
runtime modules 670 bytes 3 modules
cacheable modules 344 bytes
  ./src/js/desktop.js 299 bytes [built] [code generated]
  ./env/dev.js 45 bytes [built] [code generated]
webpack 5.72.0 compiled successfully in 280 ms

npm run prod

> xxxxxx-plugin@0.1.0 prod
> cross-env NODE_ENV=prod webpack --mode production

----------------------
Success to create a plugin zip!
Plugin ID: xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
Path: ./dist/plugin.zip
----------------------
asset desktop.js 208 bytes [emitted] [minimized] (name: desktop)
orphan modules 45 bytes [orphan] 1 module
./src/js/desktop.js + 1 modules 344 bytes [built] [code generated]
webpack 5.72.0 compiled successfully in 430 ms