TrueWatch 워크숍: ExpressCart 데모 설정 가이드

🌟 이것은 Markmoffat의 expresscart를 기반으로 한 Truewatchshop 앱입니다

expresscart 문서는 📖 여기에서 확인하세요.

ℹ️ 목적:
Truewatchshop의 목적은 고객과 파트너를 위한 교육용 샌드박스 환경을 제공하는 것입니다.
이 샌드박스를 통해 사용자는 안전한 실습 환경에서 Truewatch를 사용하여 모니터링, 트레이싱, 애플리케이션 성능 관리를 탐색, 실험, 학습할 수 있습니다.
애플리케이션은 이미 계측(instrument)되어 있으며, 이 교육용 샌드박스의 핵심은 데이터를 온보딩하고 Truewatch 플랫폼과 워크플로우에 익숙해지는 방법입니다.

🛠️ 기술 스택

이 프로젝트는 다음 기술을 사용하여 구축되었습니다:

1. Node.js: 🟢 JavaScript를 실행하기 위한 백엔드 런타임 환경입니다.
2. Express.js: 🚀 애플리케이션을 구축하기 위한 웹 프레임워크입니다.
3. MongoDB: 🗄️ 애플리케이션 데이터를 저장하기 위한 NoSQL 데이터베이스입니다.
4. Docker: 🐳 애플리케이션 배포를 위한 컨테이너화 플랫폼입니다.
5. Nginx: 🌐 리버스 프록시로 사용되는 웹 서버입니다.
6. Truewatch RUM / APM / LOG: 📊 성능 및 디버깅을 위한 모니터링 및 트레이싱 도구입니다.

⚙️ 사전 요구 사항

시작하기 전에 다음 사항을 준비했는지 확인하세요:

1. Truewatch 계정 📝
   모니터링 및 분석 기능을 사용하려면 truewatch.com에서 Truewatch 계정을 등록하세요.

2. 인터넷에 연결된 Linux 시스템 💻
   안정적인 인터넷 연결이 가능한 Linux 머신(물리 또는 가상)을 사용하세요.

   팁: 격리와 손쉬운 설정을 위해 Linux VM 사용을 권장합니다. 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을 설치하세요.
   공식 Datakit 설치에 대한 자세한 내용은 여기에서 확인하세요.

   Datakit을 설치하려면:

   • Truewatch 플랫폼으로 이동하여 Truewatch 자격 증명으로 로그인하세요.

   • Integrations > Datakit으로 이동하세요.

   • 아래 스크린샷과 같이 초록색으로 강조 표시된 Deploy Script를 복사하세요.

• 새로 설치한 Linux 머신으로 이동하여 콘솔에서 Deploy Script를 적용하세요:

  DK_DATAWAY="https://id1-openway.truewatch.com?token=tkn_xxxxxxxx" bash -c "$(curl -L https://static.truewatch.com/datakit/install.sh)" 

  Copy

• 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 

  Copy

4. Docker 🐳
   애플리케이션을 컨테이너에서 실행하려면 Docker를 설치하세요.
   Docker 설치 안내는 여기에서 확인하세요.

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

   Copy

   참고: 마지막 두 명령은 사용자를 docker 그룹에 추가하여 sudo 없이 Docker를 실행할 수 있게 합니다. 이를 적용하려면 로그아웃 후 다시 로그인해야 할 수 있습니다.

5. Git 🧰
   저장소를 클론하고 소스 코드를 관리하려면 Git을 설치하세요:

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

   Copy

🚀 프로젝트 설정 단계

1. 저장소 클론:

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

   Copy

2. 의존성 설치 및 프로젝트 빌드:

   docker-compose build

   Copy

3. 서비스 시작:

   docker-compose up -d

   Copy

4. 데이터베이스에 테스트 데이터 채우기:

   docker exec -it expresscart npm run testdata

   Copy

5. [선택 사항] 제품 이미지 커스터마이징:

   • Truewatchshop 관리자 페이지로 이동하세요.
   • 다음 자격 증명으로 로그인하세요:
     • 사용자 이름: [email protected]
     • 비밀번호: test
   • Products로 이동하세요.

• 제품 **"Duckworth Woolfill Jacket"**을 찾아 하단의 add image URL을 클릭하세요. Product Image URL 창이 나타납니다.

• 새 브라우저 탭을 열고 Duckworth Woolfill Jacket 키워드로 Google에서 이미지 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 View로 변경하세요.

호스트가 표시됩니다. 마우스를 올리면 호스트의 주요 지표(CPU, MEM 사용량, load5)를 한눈에 확인할 수 있습니다.

2. 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

     Copy

   Truewatch 플랫폼으로 이동하여 이를 확인하세요.
   Infrastructure > Containers로 이동하세요.

컨테이너 이름을 클릭하여 Containers 뷰를 살펴보세요

3. Scenes > New Dashboard로 이동하세요. Template Name에 Docker를 입력하고 엔터를 누르세요. Docker Monitor View 템플릿이 나타나면 클릭하세요. 이름을 지정하고 확인을 클릭하세요.

4. 위 단계를 완료하면 Docker Monitor View로 이동합니다. 아래는 예시이며, 왼쪽 상단의 필드 *(Host Name, Container Name, Container ID)*를 사용하여 필터를 적용할 수 있습니다.

인프라 모니터링은 애플리케이션 환경의 상태, 성능, 안정성을 유지하는 데 필수적입니다. Truewatch를 사용하면 서버, 컨테이너, 네트워크 리소스에 대한 실시간 가시성을 확보할 수 있습니다. 이를 통해 문제를 신속하게 발견하고, 리소스 사용을 최적화하며, 사용자에게 원활한 경험을 제공할 수 있습니다.

🌐 RUM 설정 단계

1. Truewatch 플랫폼으로 이동하여 Truewatch 자격 증명으로 로그인하세요.
   클라이언트 토큰을 생성하세요:
   Management > Client Token > Create로 이동하세요. 새로 생성된 토큰을 복사하여 안전한 곳에 저장하세요. 다음 단계에서 필요합니다.

2. Truewatch 콘솔에 로그인하여 Real User Monitoring > Application List > Create Application으로 이동하세요.

3. App Type으로 Web을 선택하세요. App Name 필드에 애플리케이션 이름을 입력하고 App Id를 지정하세요.

4. Public DataWay Deployment를 선택한 다음 CDN Asynchronous Loading을 선택하세요. 앞서 저장한 Client Token을 clientToken 섹션에 입력하세요.

5. 다음 값을 입력하세요(또는 애플리케이션을 가장 잘 설명하는 값을 입력하세요):
   • service = frontend
   • env = production
   • version = 1.0.0.0

초록색으로 강조 표시된 자동 생성 스크립트를 복사하여 원하는 편집기에 저장하세요.

6. 위 매개변수를 사용하도록 Nginx를 계측하세요:

   • 콘솔에서 expresscart-demo-setup-guide 디렉터리로 이동한 다음 nginx/conf.d로 이동하세요

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

     Copy

   • 원하는 편집기로 default.conf를 편집하고, 5단계의 자동 생성 스크립트 값을 붙여넣으세요.

참고: sub_filter 지시어를 사용하여 스크립트를 삽입함으로써 RUM 에이전트를 자동으로 계측하도록 Nginx를 구성했으며, 그 결과 클라이언트 브라우저에 RUM 에이전트가 계측됩니다. 이 방법을 사용하면 프런트엔드 HTML 코드를 수정할 필요가 없습니다. Nginx sub_filter 지시어에 대한 자세한 내용은 여기에서 확인하세요.

7. 서비스를 중지했다가 시작하세요:

   docker-compose down
   docker-compose up -d

   Copy

8. 브라우저를 열고 http://localhost:8080으로 이동하세요. 포트 8080에서 실행 중인 웹 앱을 확인할 수 있습니다.

9. 앱과 상호작용하세요:

   • 사용자 [email protected], 비밀번호 test로 로그인하세요.
   • 사용자가 제품을 선택하여 장바구니에 담는 과정을 시뮬레이션하세요.

10. Truewatch 플랫폼으로 이동하여 RUM > Application으로 이동한 다음 앱을 선택하세요.
    Analysis Dashboard에서 통계를 확인하세요.