서론

SNS에서 블로그나 웹사이트 운영하시는 분들을 보면, 그래프로 사이트 통계를 많이 올리시더라구요. 제가 본건 허채영님의 프로필페이지인데, 게시된 사이트 소개들을 보면 통계그래프들이 첨부돼있습니다. 이 사이트들은 Vercel로 호스팅되고 있어서 Vercel에서 제공하는 Analytics로 통계를 구하는것으로 보여요.
하지만 안타깝게도 저는 Vultr VPS로 직접 서버를 관리하고 있고, Vultr는 별도의 통계 서비스를 제공하지 않습니다. 대안으로는 Google 서치콘솔을 이용한 통계를 볼 수 있는데, 여기서 제공하는 정보는 직관적이지가 않아서 보기가 힘듭니다. 그래서 이번에는 오픈소스 통계앱인 umami를 설치해서 제가 운영중인 사이트 통계를 보려고 합니다.

umami란? (by Claude)

umami는 오픈소스 웹 분석 도구로, Google Analytics의 대안으로 많이 쓰입니다. 방문자 수, 페이지뷰, 유입 경로, 기기·브라우저·국가 같은 기본 통계를 대시보드로 보여줍니다.

  • 프라이버시 중심: 쿠키를 쓰지 않고 개인을 식별하는 정보를 수집하지 않아서, 별도의 쿠키 동의 배너 없이 GDPR 같은 규정에 대응하기 쉽습니다.
  • 셀프 호스팅 가능: 직접 서버(Docker 등)에 설치해서 데이터를 내가 소유하고 관리할 수 있습니다. 클라우드 호스팅 버전도 있습니다.
  • 가볍고 단순함: 추적 스크립트가 매우 작아서 페이지 로딩 속도에 거의 영향을 주지 않고, UI도 직관적입니다.
  • 여러 사이트 관리: 하나의 umami 인스턴스에서 여러 웹사이트를 등록해 따로 볼 수 있고, 커스텀 이벤트 추적도 지원합니다.
  • 기술 스택: Next.js로 만들어졌고, 데이터베이스는 PostgreSQL(또는 MySQL)을 사용합니다.

한 줄로 소개하자면 “쿠키 없이 가볍게 쓰는, 직접 설치할 수 있는 프라이버시 친화적 웹 통계 도구” 정도가 됩니다.

설치

전체 흐름은 서버에 umami 설치 -> 호스팅 설정 및 도메인 연결 -> 통계를 볼 사이트에 수집용 스크립트 삽입 순입니다.

서버에 umami 설치

umami를 설치하는 방법은 여러가지가 있는데, 저는 Docker Compose를 이용한 설치를 진행했습니다. Docker Compose를 이용하면 의존성 패키지와 DB가 이미 설치된 이미지를 한번에 내려받아 컨테이너로 띄워주기 때문에 편리합니다.
서버에 Docker가 없다면 Docker부터 설치합니다.

curl -fsSL https://get.docker.com | sudo sh
sudo usermod -aG docker $USER   # 재로그인 필요

그리고 umami 이미지를 내려받고 컨테이너를 실행하기위해 docker-compose.yml 파일을 작성해줍니다.

mkdir ~/umami && cd ~/umami
vim docker-compose.yml

docker-compos.yml에 들어갈 내용은 아래와 같습니다. 비밀번호를 넣는 부분이 두군데인데, 동일하게 작성해야합니다.

services:
    umami:
        image: ghcr.io/umami-software/umami:postgresql-latest
        ports:
            - "3000:3000"
        environment:
            DATABASE_URL: postgresql://umami:비밀번호@db:5432/umami
            APP_SECRET: 랜덤문자열 # openssl rand -hex 32 로 생성
        depends_on:
            db:
                condition: service_healthy
        init: true
        restart: always
    db:
        image: postgres:15-alpine
        environment:
            POSTGRES_DB: umami
            POSTGRES_USER: umami
            POSTGRES_PASSWORD: 비밀번호
        volumes:
            - umami-db-data:/var/lib/postgresql/data
        restart: always
        healthcheck:
            test: ["CMD-SHELL", "pg_isready -U $${POSTGRES_USER} -d $${POSTGRES_DB}"]
            interval: 5s
            timeout: 5s
            retries: 5

volumes:
    umami-db-data:

파일을 작성했으면 같은 위치에서 docker compose 명령을 실행합니다.

docker compose up -d
docker compose logs -f umami   # 로그 확인

이렇게 하면 umami가 실행중인 상태가 됩니다. umami는 3000번 포트를 사용하기 때문에, 3000번 포트 방화벽을 해제해주고, http://서버IP:3000으로 접속 가능합니다. 저는 바로 도메인 연결을 진행해서 IP를 통한 접속은 확인하지 않았습니다.

도메인 연결 + HTTPS 적용

umami 접속을 위한 도메인은 stats.rammie-blog.xyz로 블로그 주소의 서브도메인 형태로 생성했습니다. 발급한 도메인을 이용하여 ngnix에 리버스 프록시 설정을 추가해주었습니다.

# /etc/nginx/sites-available/umami
server {
    server_name stats.rammie-blog.xyz;
    location / {
        proxy_pass http://127.0.0.1:3000;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
}

설정 파일을 생성하면 sites-enabled 위치에 심볼릭 링크를 생성하고 nginx reload를 수행합니다.

cd /etc/nginx/sites-enabled/
sudo ln -s /etc/nginx/sites-availabe/umami
sudo nginx -t # 테스트로 오류가 없는지 확인
sudo systemctl reload nginx

https 적용을 위해 SSL 인증서를 발급합니다.

sudo certbot --nginx -d stats.rammie-blog.xyz

ufw으로 3000번 포트를 해제하지 않았다면 이미 외부에서의 접근은 차단되겠지만, docker-compose.yml 파일에서도 port 설정을 변경하여 IP를 통한 외부 접근을 하지 못하게 할 수 있습니다.

    ports:
        - “127.0.0.1:3000:3000"

이제 웹 브라우저에서 stats.rammie-blog.xyz로 접속하면, 제가 설치한 umami에 접속할 수 있습니다.

관리계정 설정

처음 umami에 접속하면 로그인 화면이 나타납니다. 초기 ID는 admin, 비밀번호는 umami 입니다. 로그인하자마자 비밀번호부터 변경해줍니다.

사이트에 umami 스크립트 삽입

통계수집을 위해 umami가 발행하는 스크립트를 사이트에 삽입해주어야 합니다. umami 페이지에 로그인하고 보면 왼쪽 메뉴에 Websites 항목이 있습니다. 여기에서 Add website를 눌러 데이터를 수집하고싶은 사이트 이름과 주소를 기입합니다.
새로 추가된 사이트 설정창을 들어가면 <script>로 시작하는 Tracking code가 보입니다. 이 코드를 목표사이트 헤더 부분에 넣어야합니다.
Hugo blog의 경우 layouts/partials/ 위치에 extended_head.html 파일을 생성해서 <script> 코드를 넣어주면 됩니다.

결과

제가 관리중인 웹사이트 세개를 umami에 연결했습니다. umami-websites 각 사이트 통계 페이지를 들어가면 기간별로 방문자가 얼마나 있었는지 직관적으로 확인할 수 있습니다. umami-blog 국가별 방문자가 얼마나 왔는지도 볼 수 있고, 지도를 통해 어느 지역에서 방문자가 많았는지도 보여줘서 재미있네요. 방문자 규모가 커지면 유용한 데이터가 많을 것 같습니다. umami-blog