TrueWatch
เริ่มต้นใช้งาน

TrueWatch Workshop: คู่มือตั้งค่าแอปเดโม ExpressCart

21 ต.ค. 2568

TrueWatch Workshop ExpressCart Demo Setup Guide

Truewatch-shop-1.png

🌟 นี่คือแอป Truewatchshop ที่พัฒนาต่อยอดจาก expresscart โดย Markmoffat

ดูเอกสารประกอบของ expresscart 📖 ที่นี่

ℹ️ วัตถุประสงค์:
Truewatchshop จัดทำขึ้นเพื่อเป็นสภาพแวดล้อม sandbox สำหรับการฝึกอบรมลูกค้าและพาร์ตเนอร์
Sandbox นี้ช่วยให้ผู้ใช้สำรวจ ทดลอง และเรียนรู้เกี่ยวกับการมอนิเตอร์ การทำ tracing และการจัดการประสิทธิภาพแอปพลิเคชันด้วย Truewatch ในสภาพแวดล้อมที่ปลอดภัยและได้ลงมือปฏิบัติจริง
แอปพลิเคชันได้รับการติดตั้ง instrumentation เรียบร้อยแล้ว โดย sandbox สำหรับการฝึกอบรมนี้มุ่งเน้นการนำเข้าข้อมูลและทำความคุ้นเคยกับแพลตฟอร์มและเวิร์กโฟลว์ของ Truewatch

🛠️ Tech Stack

โปรเจกต์นี้สร้างขึ้นด้วยเทคโนโลยีต่อไปนี้:

  1. Node.js: 🟢 สภาพแวดล้อมรันไทม์ฝั่งแบ็กเอนด์สำหรับรัน JavaScript
  2. Express.js: 🚀 เว็บเฟรมเวิร์กสำหรับสร้างแอปพลิเคชัน
  3. MongoDB: 🗄️ ฐานข้อมูล NoSQL สำหรับจัดเก็บข้อมูลแอปพลิเคชัน
  4. Docker: 🐳 แพลตฟอร์มคอนเทนเนอร์สำหรับ deploy แอปพลิเคชัน
  5. Nginx: 🌐 เว็บเซิร์ฟเวอร์ที่ใช้เป็น reverse proxy
  6. Truewatch RUM / APM / LOG: 📊 เครื่องมือมอนิเตอร์และ tracing สำหรับตรวจสอบประสิทธิภาพและดีบัก

⚙️ สิ่งที่ต้องเตรียมก่อนเริ่มต้น

ก่อนเริ่ม โปรดตรวจสอบว่าคุณมีสิ่งต่อไปนี้:

  1. บัญชี Truewatch 📝
    ลงทะเบียนบัญชี Truewatch ที่ truewatch.com เพื่อใช้งานฟีเจอร์มอนิเตอร์และการวิเคราะห์

  2. ระบบ Linux ที่เชื่อมต่ออินเทอร์เน็ต 💻
    ใช้เครื่อง Linux (เครื่องจริงหรือเครื่องเสมือน) ที่เชื่อมต่ออินเทอร์เน็ตได้อย่างเสถียร

    เคล็ดลับ: เราแนะนำให้ใช้ Linux VM เพื่อความแยกเป็นสัดส่วนและตั้งค่าได้ง่าย หากยังไม่มี คุณสามารถใช้ Oracle VirtualBox สำหรับเครื่อง Windows หรือ OrbStack สำหรับ MacOS เพื่อสร้างสภาพแวดล้อมเสมือน
    Sandbox สำหรับการฝึกอบรมนี้สร้างด้วย Orbstack และ Ubuntu 22.04.5 LTS

    • หากเลือกใช้ Orbstack ดูคู่มือการติดตั้งได้ที่นี่
    • หากเลือกใช้ Virtualbox ดูคู่มือการติดตั้งได้ที่นี่

    สร้าง Linux VM ด้วย Ubuntu 22.04.5 LTS

  3. ติดตั้ง DataKit แล้ว 📦
    ติดตั้ง DataKit จากบัญชี Truewatch ของคุณเพื่อเปิดใช้งาน tracing และการมอนิเตอร์
    ดูข้อมูลเพิ่มเติมเกี่ยวกับการติดตั้ง Datakit อย่างเป็นทางการที่นี่

    วิธีติดตั้ง Datakit:

    • ไปที่ แพลตฟอร์ม Truewatch แล้วเข้าสู่ระบบด้วยข้อมูลรับรอง Truewatch ของคุณ

    • ไปที่ Integrations > Datakit

    • คัดลอก Deploy Script ที่ไฮไลต์เป็นสีเขียวตามภาพสแนปช็อตด้านล่าง

datakit-1.png

  • ไปที่เครื่อง Linux ที่เพิ่งติดตั้งใหม่ แล้วรัน Deploy Script ในคอนโซล: 
    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

    หมายเหตุ: สองคำสั่งสุดท้ายจะเพิ่มผู้ใช้ของคุณเข้ากลุ่ม docker เพื่อให้รัน Docker ได้โดยไม่ต้องใช้ sudo คุณอาจต้องออกจากระบบแล้วเข้าสู่ระบบใหม่

  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. ติดตั้ง dependencies และบิลด์โปรเจกต์:

    docker-compose build

  3. เริ่มต้นเซอร์วิส:

    docker-compose up -d

  4. เพิ่มข้อมูลทดสอบลงในฐานข้อมูล:

    docker exec -it expresscart npm run testdata

  5. [ไม่บังคับ] ปรับแต่งรูปภาพสินค้า:

expresscart-1.png

  • ค้นหาสินค้า "Duckworth Woolfill Jacket" แล้วคลิก add image URL ที่ด้านล่าง หน้าต่าง Product Image URL จะปรากฏขึ้น

expresscart-2.png

  • เปิดแท็บเบราว์เซอร์ใหม่และค้นหา URL รูปภาพบน Google ด้วยคีย์เวิร์ด Duckworth Woolfill Jacket ตัวอย่างเช่น คุณสามารถใช้ URL นี้:
    https://content.steepandcheap.com/images/items/large/FJR/FJRZ0M5/GRE.jpg
  • คัดลอก URL ไปวางใน Product Image URL แล้วเพิ่มรูปภาพ
  • ทำซ้ำขั้นตอนข้างต้นกับสินค้าอื่นเพื่ออัปเดต URL รูปภาพ

หมายเหตุ: คุณสามารถตรวจสอบเวลาโหลดรูปภาพได้จากสถิติ RUM

📊 ขั้นตอนการตั้งค่า Infra Monitoring

  1. ติดตั้ง Datakit ตามที่แสดงใน ขั้นตอนที่ 3 ของส่วน สิ่งที่ต้องเตรียมก่อนเริ่มต้น
    โฮสต์ Linux ที่ติดตั้ง datakit จะส่งข้อมูลเมตริกไปยังแพลตฟอร์ม Truewatch
    ตรวจสอบได้โดยไปที่แพลตฟอร์ม Truewatch
    ไปที่ Infrastructure > Host คลิก Honeycomb เพื่อเปลี่ยนมุมมองเป็น Honeycomb View

inframon-1.png

คุณจะเห็นโฮสต์ของคุณ เลื่อนเมาส์ไปวางเพื่อดูเมตริกหลักของโฮสต์โดยสังเขป (CPU, MEM Usage, load5)

  1. เปิดใช้งานการมอนิเตอร์คอนเทนเนอร์ ในที่นี้คือ Docker โดยกำหนดค่า Datakit container.conf:

    • ไปที่คอนโซล 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 ของคุณ
    สร้าง client token:
    ไปที่ Management > Client Token > Create คัดลอก token ที่สร้างขึ้นใหม่และเก็บไว้ในที่ปลอดภัย คุณจะต้องใช้ในขั้นตอนถัดไป

RUM-5.png

  1. เข้าสู่ระบบคอนโซล Truewatch แล้วไปที่ Real User Monitoring > Application List > Create Application

RUM-1.png

  1. เลือก Web เป็น App Type ป้อนชื่อแอปพลิเคชันในช่อง App Name และระบุ App Id

RUM-2.png

  1. เลือก Public DataWay Deployment จากนั้นเลือก CDN Asynchronous Loading ป้อน Client Token ที่คุณบันทึกไว้ก่อนหน้านี้ในส่วน clientToken

RUM-6.png

  1. ป้อนค่าต่อไปนี้ (หรือค่าที่อธิบายแอปพลิเคชันของคุณได้ดีที่สุด):
    • service = frontend
    • env = production
    • version = 1.0.0.0

RUM-7.png

คัดลอกสคริปต์ที่สร้างอัตโนมัติ ซึ่งไฮไลต์เป็นสีเขียว แล้วบันทึกไว้ในโปรแกรมแก้ไขที่คุณถนัด

  1. ติดตั้ง instrumentation ให้ Nginx ใช้พารามิเตอร์ข้างต้น:

    • ไปที่ไดเรกทอรี expresscart-demo-setup-guide บนคอนโซลของคุณ แล้วไปที่ nginx/conf.d

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

    • แก้ไข default.conf ด้วยโปรแกรมแก้ไขที่คุณถนัด แล้ววางค่าจากสคริปต์ที่สร้างอัตโนมัติในขั้นตอนที่ 5

RUM-8.png

หมายเหตุ: เรากำหนดค่า Nginx ให้ติดตั้ง RUM agent อัตโนมัติโดยแทรกสคริปต์ผ่านไดเรกทีฟ sub_filter ส่งผลให้ RUM agent ถูกติดตั้งในเบราว์เซอร์ของไคลเอนต์ ด้วยวิธีนี้ คุณไม่จำเป็นต้องแก้ไขโค้ด HTML ของฟรอนต์เอนด์ ดูข้อมูลเพิ่มเติมเกี่ยวกับไดเรกทีฟ sub_filter ของ Nginx ที่นี่

  1. เริ่มและหยุดเซอร์วิส:

    docker-compose down
docker-compose up -d

  2. เปิดเบราว์เซอร์แล้วไปที่ http://localhost:8080 คุณจะเห็นเว็บแอปของคุณทำงานบนพอร์ต 8080

Truewatch-shop.png

  1. ลองใช้งานแอปของคุณ:

    • เข้าสู่ระบบด้วยผู้ใช้ [email protected] และรหัสผ่าน test
    • จำลองการที่ผู้ใช้เลือกสินค้าใส่ตะกร้า

  2. ไปที่แพลตฟอร์ม Truewatch ไปที่ RUM > Application แล้วเลือกแอปของคุณ
    ดูสถิติได้ภายใต้ Analysis Dashboard

RUM-9.png

Get in touch background

ก้าวข้ามขีดจำกัดของ Observability ไปกับ TrueWatch วันนี้

ขอรับเดโม