Python plotly dash 로 admin 페이지 개발

회사에서 주로 데이터 엔니지니어링, 백엔드 등의 업무를 하지만, 자주 웹개발 요청을 받는다. 전문 웹 개발을 하기 보다는 백엔드 개발자로서 쉽고, 빠르게 개발하는 것을 목표로 한다.

• 데모 페이지: https://wefree-tistory.fly.dev/
• 소스 코드: https://github.com/windbird123/dash-admin

방향

• plotly dash 로 개발해 javascripts 를 최소한으로 사용한다.
• admin 화면을 구성하고, URL 주소로 컨텐츠를 쉽게 공유할 수 있도록 한다.
• 내 tistory 블로그 글을 분석하는 차트도 넣어본다.
• https://fly.io/ 에 배포해 누구나 살펴볼 수 있도록 한다.

 

dash 로 개발

• dash-bootstrap admin template 
• dash multi-page 가이드 문서
• wefree tistory dash 개발 정리

 

Secrets 관리

tistory OAuth API 사용을 위해서는 secret key 를 관리해야 한다. 이는 소스코드 등에 공개되어서는 안된다. fly.io 에 배포시에는 fly.io 에서 제공해 주는 secrets 기능을 사용했다. secret key 를 환경변수로 입력받기 위해 python dotenv 도 사용해 봤다.
 
 

fly.io 에 배포

참고 자료

• fly.io speedrun 문서
• python flask app 배포 샘플
• python flask app 배포 설명

정리

• flyctl 설치 후
• 아래의 command 사용

  fly auth login

  # 배포할 소스 디렉토리에서
  fly launch
  fly deploy
  
  # 모니터링
  fly status
  fly apps list
  fly apps restart
  
  # console terminal
  flyctl ssh console
  
  # secrets
  fly secrets set DATABASE_URL=postgres://example.com/mydb

• 배포 후
  • https://fly.io/dashboard 에서 app 확인이 가능하다.
  • 배포시 에러가 발생한다면 모니터링 페이지에서 로그 확인이 가능하다. 예) https://fly.io/apps/wefree-tistory/monitoring
  • 한번 배포가 되면 이후에는 fly launch 없이 바로 fly deploy 로 배포 가능하다. 

 

wefree tistory 블로그 통계

tistory 에서는 기본적인 통계 기능(조회수 등)을 제공하지만, 시간 단위(예: 월단위) 로 내가 어느 정도로 열심히 글을 작성했는지는 보여주지는 않는다. tistory open api 를 사용하면 작성된 블로그 글 목록을 가져올 수 있으니, 내 블로그(https://wefree.tistory.com/) 의 월별 작성된 글의 수를 차트로 보여주도록 한다.
 

App Secrets

관리페이지: https://www.tistory.com/guide/api/manage/list

OAuth 2.0

tistory open api 는 OAuth 2.0 으로 인증한다. 서버에서 주기적으로 알아서 (예: 1회/일) 인증후 데이터를 갱신하도록 하는것이 가장 좋을 테지만.. 인증 후 아래 화면처럼 access 를 허용할지를 묻는 화면이 떠서 UI 없이 개발하는데는 노력이 많이 필요할 것 같다. 

여기서는 관리자가 UI 에서 버튼을 클릭해 tistory 에 로그인 후 데이터를 가져오도록 개발한다.
 

블로그 글 분석 관련 주요 API

• 전체 Blog Post 개수를 위한 API 

• Blog Post 단위 정보 수집을 위한 API 
  • 한번에 10개 목록을 가져 올 수 있다. (page 파라미터를 지정해 호출)
  • 전체 목록을 가져오기 위해서는 전체 글 개수를 확인 후 page param 을 변경해 가면서 호출
• 카테고리 API 
  • 상위 / 하위 category 로 구분되지만, 여기 통계에서는 상위 category 기준으로 처리한다.

 

Javascript 라이브러리를 Dash 에서 사용하기

• https://wefree.tistory.com/335 참고

 

후기

장점

• python 의 간결함과 이미 갖춰진 web components 로 순식간에 개발할 수 있다. (nicegui 를 이용하면 더 간결하게 작성할 수 있어 보이는데, 이정도만 되어도 훌륭하다.)
• 멋진 charts, table 을 단 몇줄 만에 구현할 수 있다.
• python 의 pandas dataframe 을 바로 사용할 수 있어 분석 App 만들기가 너무 쉽다. 

단점

• 외부 javascripts library 와 연동해야 한다면 복잡할 것 같다.
  • dash component 로 만들어야 한다면 복잡하겠지만 
  • clientside callback 을 이용한다면 쉽게 연동할 수 있을 것 같다. 그러나 복잡한 경우도 있었다. - 내 블로그 글 참고
• Dash 로 chrome extension 을 개발할 수는 없다.