kintone アプリをDocker Expressで表示

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

概要

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

環境

• Windows 10
• Visual source code
• Docker
• node.js, Express, pug
• kintone JavaScript Client

Visual source code

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

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

Docker

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

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　で、ブラウザーに表示されました。