kintone アプリをDocker Expressで表示

kintone アプリをDocker Express で表示してみます。
少し kintone プラグインから離れて試してみました。

# 概要

以前、[azure app service で kintone アプリデータ公開その１](https://qiita.com/rex0220/items/c38939eea69e0eff37a3) で、Express を試しました。
今回は、Docker 環境で試してみます。いろいろな環境を構築するのに Docker が便利です。
kintone 顧客アプリのデータをExpress で表示します。
処理内容は、azure で行ったものを流用ですが、kintone SDK を変えています。

# 環境

- Windows 10
- Visual source code
- Docker
- node.js, Express, pug
- [kintone JavaScript Client](https://developer.cybozu.io/hc/ja/articles/900000767263#quickstart-nodejs)

# Visual source code

Docker の拡張機能が便利そうなので入れてみます。

![2021-12-09_20h42_48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100572/b48abe66-e801-0f9a-e85f-c88fe695265c.png)

Docker 環境、コマンドが VSCode から管理できます。
docker-component を起動できます。

![2021-12-09_20h44_54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100572/6711591f-a914-f649-fcaf-7a4f28019b5e.png)

# Docker

使用する Docker のフォルダー構成です。
node.js, Express, pug, kintone JavaScript Client をインストールしておきます。

![2021-12-09_21h02_43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100572/4a88b87f-15b2-37fa-2978-906c9d2799cd.png)


docker-compose.yml で、環境変数、アプリ等を設定します。

```docker-compose.yml
version: '3'
services:
    app:
        # 起動イメージ
        image: node:16
        # 環境変数
        environment:
            - DEBUG=app:*
        tty: true
        env_file: ./app.env
        # ホスト側のポート：コンテナのポート
        ports:
            - '3000:3000'
        # ホスト側のsrcをコンテナのappにマウント
        volumes:
            - ./src:/app
        # 起動時のカレントフォルダ
        working_dir: /app
        # 起動後に実行するコマンド
        command: npm run dev
```

kintone アクセス用のDOMAIN、USERNAME, PASSWORD を環境変数ファイルに設定します。

```app.env
KINTONE_DOMAIN=https://subdomain.cybozu.com
KINTONE_USERNAME=XXXXXXXXX
KINTONE_PASSWORD=XXXXXXXXX
```

# Express の設定

customer.js で、kintone 顧客アプリのデータを表示します。

- 顧客アプリの表示処理：
    - 環境変数からkintone アクセス用データを取得
    - kintone JavaScript Client で、レコード取得
    - 顧客データ用のテンプレートで、レコード表示

```customer.js
var express = require('express');
var router = express.Router();
const { KintoneRestAPIClient } = require('@kintone/rest-api-client');

/* GET customers listing. */
router.get('/', function (req, res, next) {

    // クライアントの作成
    const client = new KintoneRestAPIClient({
        baseUrl: process.env.KINTONE_DOMAIN,
        auth: {
            username: process.env.KINTONE_USERNAME,
            password: process.env.KINTONE_PASSWORD
        }
    });
  
    const finfos = [ 
        { label: '会社名', fcode: '会社名'},
        { label: '担当者名', fcode: '担当者名' },
        { label: 'メールアドレス', fcode: 'メールアドレス' }
    ];
    const fields = finfos.map((finfo) => {
        return finfo.fcode;
    });

    // リクエストパラメータの設定
    const APP_ID = 549;
    const params = {
        app: APP_ID,
        query: 'order by $id',
        fields: fields
    };

    // レコードの取得
    client.record.getRecords(params).then((resp) => {
        console.log(resp.records);
        res.render('customer', {
            title: '顧客一覧',
            finfos: finfos,
            records: resp.records
        });
    }).catch((err) => {
        console.log(err);
    });

});

module.exports = router;
```

顧客データ表示のテンプレート

```customer.pug
extends layout

block content
  h1= title

  table(class="xp-customer-list")
    thead
      each finfo in finfos
        th #{finfo.label}
    tbody
      each rec in records
        tr
          each finfo in finfos
            td #{rec[finfo.fcode].value}
```

# 表示結果

localhost:3000/customer　で、ブラウザーに表示されました。

![2021-12-09_21h13_43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100572/87498de7-3025-7755-0b9c-e16396ee1465.png)