TrueWatch ワークショップ:ExpressCart デモ環境構築ガイド

2026年9月21日

TrueWatch Workshop ExpressCart Demo Setup Guide

Truewatch-shop-1.png

🌟 これはMarkmoffat作のexpresscartをベースにしたTruewatchshopアプリです

expresscartのドキュメントは📖こちらをご確認ください。

ℹ️ 目的:
Truewatchshopの目的は、お客様やパートナー向けのトレーニング用サンドボックス環境を提供することです。
このサンドボックスでは、安全かつ実践的な環境でTruewatchを使ったモニタリング、トレーシング、アプリケーションパフォーマンス管理を試し、学ぶことができます。
アプリケーションには計測が組み込まれており、このトレーニングサンドボックスの目的は、データのオンボーディング方法とTruewatchプラットフォームおよびワークフローへの理解を深めることです。

🛠️ 技術スタック

このプロジェクトは以下の技術で構築されています。

  1. Node.js: 🟢 JavaScriptを実行するためのバックエンドランタイム環境。
  2. Express.js: 🚀 アプリケーション構築用のWebフレームワーク。
  3. MongoDB: 🗄️ アプリケーションデータを格納するNoSQLデータベース。
  4. Docker: 🐳 アプリケーションをデプロイするためのコンテナ化プラットフォーム。
  5. Nginx: 🌐 リバースプロキシとして使用するWebサーバー。
  6. Truewatch RUM / APM / LOG: 📊 パフォーマンスとデバッグのためのモニタリング・トレーシングツール。

⚙️ 事前準備

始める前に、以下をご確認ください。

  1. Truewatchアカウント 📝
    truewatch.comでTruewatchアカウントを登録し、モニタリングおよび分析機能を利用できるようにしてください。

  2. インターネットに接続されたLinuxシステム 💻
    安定したインターネット接続を持つLinuxマシン(物理または仮想)を使用してください。

    ヒント: 分離のしやすさとセットアップの簡便さから、Linux VMの使用を推奨します。まだお持ちでない場合は、WindowsマシンにはOracle VirtualBox、MacOSにはOrbStackを使用して仮想環境を作成できます。
    このトレーニングサンドボックスはOrbstackとUbuntu 22.04.5 LTSを使用して作成されています。

    • Orbstackを使用する場合は、インストールガイドをこちらからご確認ください。
    • Virtualboxを使用する場合は、インストールガイドをこちらからご確認ください。

    Ubuntu 22.04.5 LTSでLinux VMを作成してください。

  3. DataKitのインストール 📦
    トレーシングとモニタリングを有効にするため、Truewatchアカウントからデータキットをインストールしてください。
    Datakitの公式インストール方法の詳細はこちらをご確認ください。

    データキットをインストールするには:

    • Truewatchプラットフォームにアクセスし、Truewatchの認証情報でログインします。

    • Integrations > Datakitに移動します。

    • 以下のスクリーンショットの通り、緑色でハイライトされたデプロイスクリプトをコピーします。

datakit-1.png

  • 新しくインストールしたLinuxマシンに移動し、コンソールでデプロイスクリプトを実行します: 
    DK_DATAWAY="https://id1-openway.truewatch.com?token=tkn_xxxxxxxx" bash -c "$(curl -L https://static.truewatch.com/datakit/install.sh)"
  • datakitが動作していることを確認します: 
    ps aux | grep datakit
root         806 11.6  0.3 2036304 34012 ?       Sl   01:59 116:22 /usr/local/datakit/externals/datakit-ebpf run --datakit-apiserver 0.0.0.0:9529 --hostname ubuntu --l7net-enabled httpflow --pprof-host 127.0.0.1 --pprof-port 6061 --netlog-metric --netlog-log --trace-env-list DK_BPFTRACE_SERVICE,DD_SERVICE,OTEL_SERVICE_NAME --enabled ebpf-net,ebpf-trace

  1. Docker 🐳
    コンテナ内でアプリケーションを実行するためにDockerをインストールします。
    Dockerのインストール手順はこちら。

    sudo apt-get update
sudo apt-get install -y git docker.io docker-compose
sudo usermod -aG docker $USER
newgrp docker

    注: 最後の2つのコマンドは、sudoなしでDockerを実行できるように、ユーザーをdockerグループに追加します。反映させるには、一度ログアウトして再度ログインする必要がある場合があります。

  2. Git 🧰
    リポジトリのクローンとソースコード管理のためにGitをインストールします:

    sudo apt-get update
sudo apt-get install -y git

🚀 プロジェクトのセットアップ手順

  1. リポジトリをクローンする:

    git clone https://github.com/TrueWatchTech/expresscart-demo-setup-guide
cd expresscart-demo-setup-guide

  2. 依存関係をインストールし、プロジェクトをビルドする:

    docker-compose build

  3. サービスを起動する:

    docker-compose up -d

  4. テストデータでデータベースを初期化する:

    docker exec -it expresscart npm run testdata

  5. [任意] 商品画像をカスタマイズする:

    • Truewatchshopの管理ページにアクセスします。
    • 以下の認証情報でログインします:
    • Productsに移動します。

expresscart-1.png

  • 「Duckworth Woolfill Jacket」という商品を見つけ、下部のadd image URLをクリックします。Product Image URLウィンドウが表示されます。

expresscart-2.png

  • 新しいブラウザタブを開き、GoogleでDuckworth Woolfill Jacketというキーワードを使って画像URLを検索します。例えば、以下のURLを使用できます:
    https://content.steepandcheap.com/images/items/large/FJR/FJRZ0M5/GRE.jpg。
  • URLをProduct Image URLにコピーし、画像を追加します。
  • 他の商品についても、上記の手順を繰り返して画像URLを更新します。

注: 画像の読み込み時間はRUM統計から確認できます。

📊 インフラモニタリングのセットアップ手順

  1. 事前準備セクションの手順3で示したようにDatakitをインストールします。
    datakitをインストールしたLinuxホストは、メトリクスデータをTruewatchプラットフォームに送信します。
    Truewatchプラットフォームにアクセスして確認します。
    Infrastructure > Hostに移動します。Honeycombをクリックすると、表示がHoneycombビューに切り替わります。

inframon-1.png

ホストが表示されるはずです。マウスをホバーすると、ホストの主要メトリクス(CPU、メモリ使用率、load5)を一目で確認できます。

  1. Datakitのcontainer.confを設定して、コンテナモニタリング(この場合はDocker)を有効にします:

    • Linuxのコンソールから、ディレクトリを*/usr/local/datakit/conf.d/container/に変更します。次にcontainer.conf.sampleをcontainer.conf*にコピーし、Datakitを再起動します: 
      cd /usr/local/datakit/conf.d/container
sudo cp container.conf.sample container.conf
sudo datakit service -R

    Truewatchプラットフォームにアクセスして確認します。
    Infrastructure > Containersに移動します。

inframon-2.png

コンテナの名前をクリックして、Containersビューを確認します

  1. Scenes > New Dashboardに移動します。Template NameにDockerと入力し、Enterを押します。Docker Monitor Viewテンプレートが表示されるので、クリックします。名前を付けて確認をクリックします。

inframon-3.png

  1. 上記の手順を終えると、Docker Monitor Viewが表示されます。以下は例です。左上のフィールド (Host Name、Container Name、Container ID) を使ってフィルターを適用できます。

inframon-4.png

インフラモニタリングは、アプリケーション環境の健全性、パフォーマンス、信頼性を維持するために不可欠です。Truewatchを使用することで、サーバー、コンテナ、ネットワークリソースをリアルタイムで可視化できます。これにより、問題を迅速に検出し、リソース使用状況を最適化し、ユーザーにシームレスな体験を提供できます。

🌐 RUMのセットアップ手順

  1. Truewatchプラットフォームにアクセスし、Truewatchの認証情報でログインします。
    クライアントトークンを作成します:
    Management > Client Token > Createに移動します。新しく作成されたトークンをコピーし、安全な場所に保存してください。次の手順で必要になります。

RUM-5.png

  1. Truewatchコンソールにログインし、Real User Monitoring > Application List > Create Applicationに移動します。

RUM-1.png

  1. App TypeとしてWebを選択します。App Nameフィールドにアプリケーション名を入力し、App Idを指定します。

RUM-2.png

  1. Public DataWay Deploymentを選択し、次にCDN Asynchronous Loadingを選択します。clientTokenセクションに先ほど保存したClient Tokenを入力します。

RUM-6.png

  1. 以下の値(またはお使いのアプリケーションに最も適した値)を入力します:
    • service = frontend
    • env = production
    • version = 1.0.0.0

RUM-7.png

緑色でハイライトされた自動生成スクリプトをコピーし、お好みのエディタに保存します。

  1. 上記のパラメータを使用するようにNginxを計測します:

    • コンソールでexpresscart-demo-setup-guideディレクトリに移動し、nginx/conf.dに移動します

      cd expresscart-demo-setup-guide
cd nginx/conf.d/

    • お好みのエディタでdefault.confを編集し、手順5の自動生成スクリプトの値を貼り付けます。

RUM-8.png

注: sub_filterディレクティブを使用してスクリプトを注入することで、RUMエージェントを自動計測するようにNginxを設定しました。その結果、RUMエージェントがクライアントブラウザに計測されます。この方法を使えば、フロントエンドのHTMLコードを変更する必要はありません。Nginxのsub_filterディレクティブの詳細はこちらをご確認ください。

  1. サービスを停止・起動します:

    docker-compose down
docker-compose up -d

  2. ブラウザを開き、http://localhost:8080にアクセスします。ポート8080で動作しているWebアプリを確認できるはずです。

Truewatch-shop.png

  1. アプリを操作します:

    • ユーザー[email protected]、パスワードtestでログインします。
    • ユーザーが商品をカートに入れる操作をシミュレートします。

  2. Truewatchプラットフォームにアクセスし、RUM > Applicationに移動して、対象のアプリを選択します。
    Analysis Dashboardで統計情報を確認します。

RUM-9.png

Get in touch background

TrueWatchで、オブザーバビリティのその先へ。

デモを申し込む