[토이프로젝트] pubg-stats-dashboard, pubg-api

NextJS와 NestJS를 이용해 배틀그라운드 스탯검색과 매치분석 사이트를 만들었다.

AI를 이용해 만들었고, 덕분에 생각보다 빠른 시간 내에 완성을 했다.

프론트는 디자인 쪽에 많은 도움을 받았고, 백엔드는 배그 API로부터 얻는 결괏값을 처리하는데 도움을 받았다.

특히 매치에 대한 API는 1개의 매치에 너무 많은 데이터가 들어있어서 인터페이스를 만드는 것과 데이터 처리를 너무 수월하게 처리할 수 있었다.

 

처음 배그 API를 이용해 만들었던 프로젝트(https://github.com/smw0807/pubg_your.stat)는 프론트로만 처리해서 만들었었다.

이걸 만들당시 플레이어 스탯 정보 조회와 채팅 기능을 만들면서 많은 시간을 사용해 매치 API 사용은 포기했었다.

이번에 시간이 좀 생겨서 매치 API를 위주로 사용하는 프로젝트를 만들어보고자 시작했다.

 

https://github.com/smw0807/pubg-stats-dashboard

GitHub - smw0807/pubg-stats-dashboard: PUBG 전적 분석 대시보드

https://github.com/smw0807/pubg-api

GitHub - smw0807/pubg-api: PUBG API

현재 작업된 깃 주소이고, 모두 배포된 상태이다.

 

무료 배그 API키를 사용하고 있는데, 1분당 10회 요청수 제한이 있다.

그래서 플레이어 스탯 검색할 때 한 번에 3개의 요청이 필요하고, 랭크와 일반 2개를 조회하면 플레이어 1명당 6개의 요청이 들어간다.

우선은 랭크 스탯만 조회하도록 했고, 제한에 대한 부분은 제한 해제 요청을 해놨다.

매치의 경우 제한이 없어서 한 번에 많은 요청을 할 수 있었다.

 

처음 플레이어 검색 API를 사용할 때 아래와 같은 정보를 받을 수 있다.

플레이어에 대한 스탯 정보를 검색하려면 저 id를 얻어야 한다.

그리고 최근 매치에 대한 id들을 받을 수 있다.

 

현재 시즌 id를 구하는 API를 통해 값을 얻고, 플레이어 id와 함께 시즌 스탯 정보를 얻을 수 있다.

그리고 최근 매치 id들을 조회해서 검색한 플레이어의 게임정보들을 구현한 화면이다.

 

매치 분석 버튼을 누르면 오는 화면.

 

킬 리더보드 카드를 눌렀을 때 보여지는 화면이다.

 

매치 id를 통해 조회한 데이터에는 플레이어 별로 해당 매치에서 달성한 다양한 정보들이 있다.

덕분에 이러한 데이터들을 볼 수 있도록 구성했다.

 

프론트는 버셀을 통해 쉽게 배포를 했고, 백엔드는 CI/CD를 git actions와 aws ec2에 구성하는데 너무 오랜 시간이 걸리긴 했다.

name: CI

on:
  push:
    branches: ['deploy']

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v3
      - name: Login Dockerhub
        env:
          DOCKER_USERNAME: ${{secrets.DOCKER_USERNAME}}
          DOCKER_PASSWORD: ${{secrets.DOCKER_PASSWORD}}
        run: docker login -u $DOCKER_USERNAME -p $DOCKER_PASSWORD

      - name: Build the Docker image
        run: docker build -t pubg-api .
      - name: taging
        run: docker tag pubg-api smw0807/pubg-api:1.0.0
      - name: Push to Dockerhub
        run: docker push smw0807/pubg-api:1.0.0

CI는 deploy 브랜치에 푸시를 하면 도커에 로그인해서 이미지를 빌드해 내 도커허브에 푸시하도록 했다.

 

name: CD

on:
  workflow_run:
    workflows: ['CI']
    types:
      - completed

jobs:
  deploy:
    if: ${{ github.event.workflow_run.conclusion == 'success' }}
    runs-on: self-hosted

    steps:
      - name: DockerHub Login
        env:
          DOCKER_USERNAME: ${{ secrets.DOCKER_USERNAME }}
          DOCKER_PASSWORD: ${{ secrets.DOCKER_PASSWORD }}
        run: docker login -u $DOCKER_USERNAME -p $DOCKER_PASSWORD

      - name: Pull latest image
        run: docker pull smw0807/pubg-api:1.0.0

      - name: Stop and remove old container
        run: |
          docker stop pubg-api || true
          docker rm pubg-api || true

      - name: Run new container
        run: |
          docker run -d \
            --name pubg-api \
            --env-file /home/ubuntu/app/.env \
            --restart always \
            -p 3000:3000 \
            smw0807/pubg-api:1.0.0

CD는 이제 self-hosted를 내가 구성한 EC2 인스턴스 연결해서 도커 허브에 로그인 후 이미지를 다운로드하고 도커를 실행하도록 했다.

이 CD 작업이 계속 빌드가 안 돼서 많은 시간을 허비했었는데

오랜 삽질 후에 Runners의 상태가 위 사진처럼 활성화되어 있지 않고, 꺼져있는 걸 너무 늦게 알아채서 겨우 해결했었다.

이 프로젝트를 진행하면서 가장 힘들었던 부분은 이 부분이었던 것 같다.

당연히 연결된 줄 알고 계속 빌드가 안될 때 GPT에도 물어보고, 구글링도 엄청 했었는데 좀 허무하기도 했다.

EC2에 접속해서 연결되도록 제대로 처리하니 한 번에 해결됐다.

 

현재 무료 API키를 사용하고 있어서 배포만 해놓은 상태이다.

제한 해제 요청을 한 게 수락이 돼서 제한이 좀 풀리면 사이트를 홍보해 볼 생각도 하고 있다.

어느 정도 수요가 있으면 꾸준히 업데이트를 해볼까 생각중...

 

---

2025-07-01 내용추가

 

펍지 측으로부터 내가 사용 중인 API 키의 요청수 제한을 올려줬다는 답장을 받았다.

그래서 생각하고 있던 배그 공식카페에 홍보차 게시글을 올렸다.(링크)

생각보다 좋게 봐주시는 분들이 있어서 좋았다.

 

버셀에서 제공해주는 요청응답에 대한 데이터 로그를 확인해봤는데 

생각보다 이용해주는 분들도 꽤 됐다.

 

이제 피드백 받은 것들과 확인해봐야하는 것들을 차근차근 해볼 생각이다.