VSCode Remote Containers で kintone のカスタマイズ開発環境を整える
（数年ぶりにこちらに記事書きます）
ここ数年の kintone カスタマイズ開発にはエディタとして VSCode、開発環境として Docker を使っていたのですが、昨年リリースされた VSCode Remote Containers の Extension がこれにまたマッチしていい感じだったので、kintone カスタマイズ用に整理した kintone-customization を GitHub に上げてみました。
VSCode Remote Containers とは
まず VSCode Remote Containers のおさらいです。Docker コンテナに VSCode からアクセスできる VSCode Extension です。設定等の情報は公式で詳しい情報を確認できます。
Docker コンテナの volume マウントでファイルがローカルと同期しており、ファイル操作はローカルで作業するのと Docker コンテナ中で作業するのには変わらず、実行できるコマンド等が ローカルか Docker コンテナ中かで異なってくるといった感じです。新たに準備するのではなくて既存のコンテナに対しても VSCode からアクセスして開発を進めるといったことも可能です。
（公式ページにあるイメージです）
新しく始める時の設定方法は 3 通りあるのですが、.devcontainer というディレクトリ中に、Dockerfile と devcontainer.json を作るのが基本になります。それぞれ、ベースになる Docker コンテナの設定と VSCode Remote Containers を通してアクセスするための設定ファイルです。今回もこの方法で必要ファイルを揃えました。
kintone-customization での始め方
手順は次のとおりです。
- ローカル PC に Docker をインストールする（バージョン等の条件はこちら）
- VSCode に VSCode Remote Containers をインストールする（こちらからもインストールできます）
- kintone-customization をダウンロードする
- VSCode の左下のクイックアクションをクリックする
（緑の「> <」みたいなところです）
- Remote-Containers: Open Folder in Container を選択し、ダウンロードした kintone-customization フォルダ（ .devcontainer を含む階層）で Open する
- コンテナが起動し、コンテナ中で作業する（初めての時にはイメージのビルドが走るので少し時間がかかりますが、一度イメージができてしまうと次からはすぐに立ち上がります）
Docker コンテナが立ち上がると、VSCode で kintone-customization の中身が volume マウントされて左の File Explorer に現れ、Terminal も コンテナ中で実行できるようになりまます。
閉じるときは、始めた時に押した左下の緑ボタンから Close Remote Connection を選択します。
kintone-customization の中身
今回の kintone-customization の基本部分はこんな感じです。
- Dockerfile: Amazon Linux 2 をベースに Node.js と Python 3 が実行できるイメージ
- devcontainer.json: 8443, 8080, 443, 80 ポートを開放、この Remote Container でのみ利用する VSCode Extension をインストール
kintone のカスタマイズと言えば JavaScript ですので Node.js、AWS Lambda を使ったバッチ処理を開発するケースも想定して Python がベースで入るようにしました。また、開発用のローカル Devserver のためにポートを幾つか開放しています。そして、本コンテナアクセス時のみ利用する VSCode Extension が幾つか入るようになっています（詳しくは GitHub やソースをご覧ください）
最後に、今回サンプルとして最上位階層に汎用的な package.json を置き、ES5、ES6、TypeScript の 3 種類で sample-project を今回入れてみたので、フォルダ階層や Webpack の設定等参考にして頂ければ幸いです。
Docker 自体をちょっとした検証からガッツリ開発・サービス提供に利用されている方も多いと思いますが、VSCode を開発に利用されている方はその恩恵にもあずかれるので一度試されてみてはいかがでしょうか。
