계기
'마인크래프트'게임을 어릴때 한번쯤은 해보거나 들어봤을 것이다.
마인크래프트는 채광과 제작을 하는것을 메인으로 건축,사냥,농사,탐험등 자유도가 정말 높은 게임이다.
자유도가 높은만큼 개발 측면에서 봤을때 확장성 또한 높다. 실제로 실제 운영되고 있는 수많은 서버들이 있으며 , 서버의 리소스는 모두 java 코드로 구현 가능하다.
따라서 각자 다른분야에서 IT공부를 하고있는 대학동기 두명과 함께 마인크래프트 서버를 운영해보려고 한다. 이 프로젝트는 백지 상태에서 모든것을 다 만들어야한다. 따라서 게임이 운영되는 전체적인 프로세스를 경험할 수 있고 , 자연스럽게 팀원 모두의 개발 실력이 향상에 도움이 될것이라 생각한다.
목표
우선, 공동 목표는 서버가 잘 운영되는 것이며 그와 동시에 팀원들 개인의 개발 실력 향상이다.
나는 특히 데이터 분야에 관심이 있고, 따라서 DB 운영 및 관리를 주로 맡았다.
지금까지는 local에서 데이터를 불러와서 주로 분석했었다. 이 프로젝트를 통해 실시간으로 쌓이는 정보를 db로 관리하고 SQL, python 언어 등을 통해 정제, 분석하는 과정을 경험하고 싶다. 아마 긴 여정이 될 거 같다..
설계
협업 툴 선정
jira
개발 일정을 관리하기위해 협업 툴이 필요했다. Notion , Slcak , jira등 다양한 협업 툴중 우리팀은 jira를 선택했다.
jira는 요약 기능을 통해 개발 진행 현황을 쉽게 확인할 수 있고 , 이슈 리포팅,기간 설정등 제공하는 다양한 기능들이 유용하다. 무엇보다도 현업에서 많이 사용하는 툴이니 익숙해지기 위해 일정 관리 툴을 jira로 선정하게 되었다.
Discord
Discord 음성, 채팅, 화상 통화 등을 지원하는 인스턴트 메신저이며 흔히 게이밍 메신저의 대명사라고 불린다.
추후 서버를 오픈하면 유저용 디스코드를 어차피 오픈해야 하니 익숙해지자는 취지와, 회의에도 적합한 다양한 기능들이 탑재되어 있어 선정하게 되었다.
파트 설계
프로젝트 첫 회에서 jira를 활용해 설계된 설계도이다. 간단하게 파트별로 설명을 적자면 다음과 같다.
INFRA : 초반에 가장 중요한 파트이다. 메인 서버를 구축하고, 소통 창구인 디스코드를 개발, 각종 연동, 환경구축을 담당한다. 리눅스,Xshell,winscp등을 주로 활용한다.
FRONTEND, BACKEND : 우리 팀은 서버 홍보에 웹사이트를 활용하려고 한다. 그때 웹사이트가 효율적으로 운영될 수 있도록 역할을 하는 파트이다. 또한 할 수 있다면 원하는 플러그인을 직접 만드는 파트도 포함된다. 위에서도 언급했듯이 마인크래프트 리소스는 모두 코드로 구현 가능하다. 플러그인 코드 주 언어는 java이며, 웹 제작을 위해 fastapi, javascripts등이 활용한다.
*플러그인 : 컴퓨터에 추가 프로그램을 설치하여 특정 기능을 수행할 수 있도록 하는 소프트웨어
DB : 실시간의 유저데이터를 DB서버에 저장하고, 효율적으로 데이터를 분석하는 파트이다. 언어는 주로 python, sql등이 활용된다.
QA : 테스트를 담당하는 파트이다. 시간적 여유가 된다면 진행하기로 고려한 파트이며, 모든 서버구축이 완성되었을때 bug test등을 통해 안정적인 서버를 만드는데 역할을한다.
앞서 언급했듯이 나는 위 파트중 주로 DB를 맡았다. 또한 이전에 fast api 및 frontend작업을 해본 경험이 있기 때문에 초반 웹 제작도 맡아서 진행하고있다.
설계한 jira 세부일정을 간단하게 보여주자면 위와같다. 벌써 많다 .......
위 사진은 팀원들의 discord 개발 소통창구이다. 쓸만한 자료들방을 주로 활용해서 자료를 공유하고 각 파트별로 진행사항들을 공유한다. 또한 비대면 회의에서도 discord를 유용하게 사용한다.
앞에서 큰파트를 간단하게 나눴지만 팀원 모두 전문인력이 아니기 떄문 하나의 파트를 완벽하게 담당하기는 어렵다. 따라서 discord를 소통창구를 최대한 많이 활용하고 있으며, 매 회의마다 진행사항 이슈를 서로 공유하고 고민한다.
주에 한번은 무조건 정기회의를 진행하고, 중간중간 이슈가 있을때 유동적으로 회의도 여러번 진행했다. 이제 종강도 했으니 서로 도와가면서 더 열심히 해볼 예정이다 ..!
진행사항
전체 진행사항
한 달 동안 정말 많은 시행착오와 진행 상황이 있었다. 한 번에 정리하려다 보니 무리일 것 같아 내 진행 상황을 을 제외하고는 간단하게 작성하겠다. (앞으로는 일주일 단위로 정리해서 블로그를 쓰겠습니다….) 자세한 내용은 팀원 블로그를 확인할 수 있다
서버 구축
관리자 설정 , DDNS설정 , 포트포워딩 & 방화벽 설정 , SSH & SFTP환경 구축 , iptime WOL 설정등을 통해 서버의 기본 infra 환경 구축 및 외부 제어에 성공했다.
*자세한 내용 : https://velog.io/@toothlessjw/%EA%B2%8C%EC%9E%84-%EC%84%9C%EB%B2%84-%EA%B5%AC%ED%98%84-6
디스코드 개발
seaarch bot 연동 , logs연동 , server-test-status 연동등을 통해 discord에 추가 기능들을 확장시켰다.
* 자세한 내용 : https://velog.io/@toothlessjw/%EA%B2%8C%EC%9E%84-%EC%84%9C%EB%B2%84-%EA%B5%AC%ED%98%84-7
서버 컨셉 정의 및 플러그인 적용
현실성이 많이 반영된 경제 서버 느낌으로 컨셉을 잡았으며 활용할 수 있는 플러그인을 조사하고 적용시켰다.
- 현재 적용된 플러그인 목록 -
에센셜 : 서버 운영필요에 필요한 기본 기능
WordEdit : 건축시 용이
LightEconomy : 경제기반 플러그인
VoLT : 플러그인을 묶어주는 역할
Login : 로그인 플러그인
ViaBackwards : 게임 서버 버전 호환 플러그인
Viaversion : 플러그인끼리 버전 호환 플러그인
* 자세한 내용 : https://velog.io/@toothlessjw/%EA%B2%8C%EC%9E%84-%EC%84%9C%EB%B2%84-%EA%B5%AC%ED%98%84-8
DB 연동 및 웹
플러그인 db서버 연동 , db 네이밍 정의 , db데이터 연결 및 웹 실시간 시각화 , 백업(서버,db) onedrive연동 , 유저 좌표 지도 웹 성공
* db연동 자세한 내용 : https://velog.io/@toothlessjw/%EA%B2%8C%EC%9E%84-%EC%84%9C%EB%B2%84-%EA%B5%AC%ED%98%84-9
* onedrive연동 자세한 내용 : https://velog.io/@toothlessjw/%EA%B2%8C%EC%9E%84-%EC%84%9C%EB%B2%84-%EA%B5%AC%ED%98%84-11
보안 설정
도메인 구입 , 메인서버 2중보안 설정(pem키 & google-OTP)설정 완료
* 자세한 내용 : https://velog.io/@toothlessjw/%EA%B2%8C%EC%9E%84-%EC%84%9C%EB%B2%84-%EA%B5%AC%ED%98%84-12
내 진행사항
lightecomy플러그인,loginscurity에 action들을 게임내에서 수행하면 MYSQL DB에 데이터가 쌓이게 된다. 나는 초반에 이 쌓인 데이터를 다루는 역할을 수행했다.
최종적으로 DB를 실시간으로 연결해 홍보용 웹사이트에 동적 시각화를 제공하는 것을 목표로 잡았고, 다양한 시도를 해보았다.
우선 이전 프로젝트에서 fastapi를 활용해 본 경험이 있으며, 버그가 적고 빠르게 개발할 수 있다는 장점이 있어 웹 backend는 fastapi를 활용했다.
* fast api : 현대적이고, 빠르며(고성능), 파이썬 표준 타입 힌트에 기초한 Python3.6+의 API를 빌드하기 위한 웹 프레임워크
TRIAL1. Tableau
처음에는 DB서버의 데이터를 Tableau 통해 시각화하고 웹사이트에 실시간 시각화를 표시하고 싶었다. 최근에 Tableau교육을 수료했기에 익숙함도 있고 , 클릭 몇번으로 쉽게 대시보드를 구성 할 수 있다는 장점이 있어 선정하게 되었다.
테블로에는 총 3가지 방식으로 실시간 시각화가 가능하다.
테블로서버(Tableau Server) : 기업 내부에서 데이터를 중앙에서 관리하고 고유할 수 있는 플랫폼으로 서버에 접속해 대시보드 공유 가능 (무료 14일 후 유료)
테블로 온라인(Tableau Online) : 클라우드 기반의 서비스로 웹 브라우저를 통해 접속해 시각화 공유 가능 (무료 14일 후 유료)
테블로 퍼블릭 (Tableau Public): : 무료로 제공되는 플랫폼으로 사용자가 만든 대시보드 공개적으로 공유 가능
1)테블로서버(Tableau Server)
우선, 테블로서버 기능부터 시도해 보았다. Tableau 연결에서 MYSQL을 선택하고 서버정보,포트,데이터베이스등,사용자등을 입력하면 db와 실시간으로 연동이 된다.(새로고침을 누르지 않으면 실시간으로 데이터가 잘 안 바뀌는 현상이 있긴함..)
이후 테블로 서버 계정을 만들고 로그인을 하면 내 테블로 서버에 로그인이 된다
연결까지 되었으면 만들기만 남았다. Tablueau desktop 워크시트에서 원하는 시각화를 만들고 통합문서게시,데이터원본게시를 클릭하면 내 테블로 서버에 위와같이 게시가 된다.
이후. html 웹 페이지를 간단히 만들어 scripts로 공유링크를 참조하게끔 하면 위와같이 웹사이트에 잘 나온다. 데이터 변화에 따른 그래프 변화도 문제없이 되었다.
하지만 이 방법에는 두가지 문제가 있다!!.
첫 번째로, Tableau server의 경우 14일만 무료로 이용이 가능하다. 따라서 추가로 이용할 시 비용이 발생하고, 그 비용이 얼마나 나올지 감당이 불가능하다.
두 번째로, 외부 사용자가 웹사이트 접속시 테블로 서버 계정을 로그인하라는 창이 나온다.
특히, 비용 문제보다 두 번째 문제가 더 크다. 유저들이 사용하는 웹사이트인데 테블로 계정이 없으면 시각화를 보지 못하기 때문이다. 이 문제는 tableau online도 마찬가지이므로 결국 무료인 tableau public을 활용해 보기로 했다.
2)테블로 퍼블릭(Tableau Pulic)
테블로 퍼블릭도 마찬가지로 로그인하고 tabluau public에 저장을 누르면 워크시트 및 대시보드 게시가 가능하다.
하지만 데이터 자체를 올리는 기능이 없어 데이터에 새로운 변동이 생기면 그 변동 사항을 실시간으로 시각화에 반영해 주지 못한다. 그래서 생각한 방법이 자동화 프로세스를 만드는거다.
1) python으로 db를 연결해서 데이터를 일정 주기마다 데이터를 불러와 추출하고
2) 추출한 데이터를 워크시트를 만들 수 있는 시각화를 하기 적합한 hyper 확장자 파일로 변환하고
3) 미리만들어 놓은 워크시트에 해당 데이터를 적용하고
4) 만들어진 워크시트 시각화를 pulic에 자동으로 게시한다.
이 거창한 프로세스를 성공시키려고 gpt의 많은 도움을 받으면서 시도를 해봤지만 결국에 실패했고 , 만약에 된다고 하더라도 너무 돌아가는 거 아닌가? 억지로 Tableau를 쓰려고 하는 거 아닐까 ? 라는 생각과 함께 다른 방법을 사용해 보기로 결정했다.
TRIAL2. power bi
Tebleau 다음 떠오르는 방법이 power bi를 활용이었다. tableau와 마찬가지로 클릭 몇번으로 시각화를 구성할 수 있었고 조사해 보니 웹 게시도 크게 어렵지 않은것같았다.
Tebleau와 비슷하게 db정보를 입력해서 불러오고 그래프를 그힌후 게시를 누르면 내 작업영역에 게시할 수 있다.(Tebleau server와 방식이 비슷)
위 사진은 작업영역에 게시된 결과이다. 왼쪽 상단에 파일을 클릭하면 쉽게 웹에 게시를 할 수 있다.
원래는 이 화면이 나와야하지만 ..
나는 위처럼 embed 코드 만들기를 사용하도록 설정이라는 오류 창이 뜬다.
이 오류를 해결하기 위해 다양하게 시도해 보았다.
1) 관리자 찾기
power bi 는 microsoft제품이다. 따라서 조직계정이 있어야 하며, 나는 대학생에 소속 되어있어 학교 계정으로 로그인했다. learn more을 클릭하면 관리자가 관리 권한을 부여 하는 공식 문서 내용이 나오는데 문제는 그 관리자가 누구인지 찾을 수가 없었다.. 누구한테 문의를 드려야 할지도 감이 잡히지 않아 이 방법은 진행할 수 없었다
2) 조직 만들기
https://www.youtube.com/watch?v=hqEDzAajxig 해당 영상을 참고해 회사 조직을 하나 만들어 진행했는데 역시 같은 오류가 발생했다. 또한 이 방법을 사용하면 Azure를 활용해야 하는데 평가판 이후에는 비용이 발생한다. 역시 장기적으로 봤을때 좋은 방법은 아니었다.
TRIAL3. 추출 , 시각화 분리
이제 시각화 Tool 사용은포기하자는 결론에 도달하고 다시 python으로 돌아왔다. 이번에 구상한 방법은 DB에서 데이터 추출 및 업데이트랑 fast api 웹 서버를 분리해서 실행하는 방법이다.
추출부분
위 python 추출 코드를 통해 DB에 접근해 쿼리를 통해 원하는 부분만 추출하고, csv 해당 데이터를 csv 파일로 저장한다. 또한 이 추출 과정은 계속 반복되게 되는데 ,내가설정한 update_interval 초마다 반복하게 되고 기존에 있던 같은 파일명으로 저장함으로써 기존 데이터파일이 덮어지게 된다. 요약하자면 이 파일을 실행시키면 10초마다 데이터를 db에서 불러와 csv로 업데이트 시킨다. 즉 실시간 데이터 업데이트가 가능하다.
fast api(웹 부분)
HTTP GET 요청은 웹 클라이언트가 웹 서버에게 정보를 요청하는 메서드 중 하나이다. 위 코드는 fast api로 app을 애플리케이션을 생성하고 기본 주소인 localhost 8000port에 루트 앤드포인트를 정의한다.
read_root 비동기 함수를 통해 데이터를 읽어와 python matplotlib을 사용해 시각화 하고 시각화한 이미지를 Base64로 인코딩하고 HTML에 템플릿에 전달한다. 이후 jinja2템플릿을 사용하여 HTML 응답을 생성한다. 또한, 추가 비동기 함수를 통해 페이지를 10초마다 새로고침 하도록 유도했다.
요약하자면 페이지를 주기적으로 csv데이터를 읽어와서 시각화 하고 이미지로 저장해 띄워주는거다. 데이터의 변동이 생기면 csv파일이 변동이 생길 거고 데이터 추출 주기와 데이터 페이지 새로고침 주기를 일정하게 하면 가장 최신 db의 파일이 띄워 질 수 있을 것이다.
하지만, 서버를 키는 명령어와 데이터 추출이 동시에 돌아가야 동적으로 가능하다. 따라서 추출은 cmd에서 , 웹 실행은 vs code terminal에서 실행시켜 동시에 진행했다.
위와 같이 같은 가상환경에서 두 파일을 실행시키니 추출, 웹서버, 시각화까지 모두 잘 작동하는것을 확인 할 수 있다. 또한 "GET / HTTP/1.1" 200 OK 는 get이 잘되었다는 즉 연결이 잘 되었다는 표시인데 페이지를 새로 고침하는 10초마다 나오는 것을 확인 할 수 있다. 드디어 괜찮은 결과가 만들어졌다!!!!
하지만 이 방식에도 많은 문제점이 있다.
1) python으로 데이터를 로드하는 방식에서 pandas를 활용하면 느리다.
현재 방식은 데이터를 저장할 뿐만 아니라 그 저장된 데이터를 또 불러온다. 지금이야 상관없지만 나중에 데이터양이 늘어나면 데이터를 불러오는데 시간이 얼마나 걸릴지 예측이 불가능하므로 문제이다.
2) cmd , vs code 두개를 꼭 다켜야만 작동한다.
웹 서버와 , cmd를 동시에 다 키고 있어야만 작동하므로 효율적인 측면에서도 별로다. (난 한방에 하고싶다고 !!)
3) 시각화를 그리고 이미지로 서버에 저장하고 인코딩된 이미지를 불러오는 방식.
이 부분도 이미지이다 보니 차트가 움직이는 것을 동적으로 확인이 불가능하고 , 차트 클릭등이 안되는 단점이 있다.
TRIAL4. fastapi , chart.js 시각화
이제 하나의 실행 방식으로 pandas를 안 쓰면서 동적으로 움직일 수 있는 방법을 생각해 내야 했다. 그래서 python 시각화를 포기하자는 결론에 도달했다.. (익숙함에 python을 하고 싶었지만 동적 시각화는 힘들다...)
이에, javascripts를 활용하기로 결정했다. javascripts를 활용하면 시각화를 동적으로 하는 것 뿐만 아니라 서버로 db 데이터 자체를 보낼수도있다. 왜 웹에는 javascripts가 필수인지 알 수 있을 정도로 뭐가 많다. 시각화는 여러 가지. js방식이 있었지만 새로운 것을 공부해야 했기에 가장 쉬운 chart.js를 선택했다.(이것도어려움....)
우선 , 웹 간단하게라도 틀을 잡아보기 위해 https://html5up.net/ 사이트에서 빈 html 템플릿을 구해왔다.
이후 앞에서 했던 방식과 동일하게 app을 정의하고 db를 가져오는 비동기 함수 정의와, 각종 원래 템플릿 요소가 깨지지 않게 하기 위해 staticfiles를 활용해 정적파일을 서빙한다 . 내 local에 있는 정적으로 파일을 서빙하는 이유는 css,js,image들은 변경이 적고 재사용 가능하므로 어플리케이션의 효율성과 유지보수성을 향상시키는 데 기여한다.
앞서 했던 방식과 비슷하게 get방식으로요청하고 , 해당 요청에 맞는 html 템플릿을 응답으로 시켜준다. 또한 연결된 db 데이터를 클라이언트에게 전송하는 통신에는 websoket이라는 기능을 활용한다. 시각화를 데이터베이스에서 원하는 시각화에 필요한 정보만 json형태로 넘겨주는 부분을 무한루프로 구현하고 이 넘겨주는 주기를 asyncio.sleep(10)로 설정했다.
요약하자면 데이터베이스에서 데이터를 가져와 10초마다 정보를 클라이언트에 보내준다. 다음과 같은 방법을 동일하게 써서 여러 시각화를 구현했다.
이후 메인 페이지 index.html코드를 수정한다
시각화 canvas를 구조를 만들어준다
chart.js를 cdn방식으로 불러오고 websoket을 만든다.
* WebSocket : 은 양방향 통신을 제공하는 특별한 종류의 프로토콜로, 클라이언트와 서버 간에 실시간으로 데이터를 주고받을 수 있게 해줌.
시각화를 그린다. 아직 잘 못한다 ..
데이터를 보내주는 부분이다. 서버로부터 받은 데이터(event)가 발생시 앞서 정의한 차트에 데이터가 잘 보내질 수 있도록 구현하는 코드이다. 실제 데이터를 잘 보내야 차트가 잘 그려진다. 벌써 html 코드가 700줄이라 머리아프다.. 이제 감상하자.
이렇게 실행을 하고 들어가면 !
localhost:8000 port에 잘 웹사이트가 나온다 !
시각화 또한 잘 표시되고, 10초마다 데이터 업데이트 사항을 확인하고 업데이트 된 데이터를 가져온다. 즉, db에 새로운 데이터가 업데이트되면 시각화도 바뀐다. 동적으로 움직이는게 엄청 신기하다. 마지막 라인 차트는 아직 실패..
또한 저번 회의 때 테스트 해봤는데 localhost말고 다른 외부 ip에서 port를 열고 진행해도 외부 접속이 잘 된다!!
고찰 및 앞으로 진행해야할 사항
한 번에 정리하려니 글이 너~~~무 길어졌다. 프로젝트를 한지 한달정도 지났고, 팀원 모두 너무 열정적으로 해줘서 아직까지 너무 순탄하다. 매 회의마다 무언가 결과가 나온다.
물론 난 삽질을 너무 많이 했다. 하지만 또 그게 프로젝트의 묘미가 아니겠는가 ? 성장하고 있다.
나는 앞으로 할일이 더 많아질것같다. 위 사진 가장 밑에 있는 라인차트를 그리는데만 3일을 썼는데 결국 원하는 그래프를 못그렸다.. 어제 데이터를 불러오는 쿼리를 뜯어보니 원인은 찾았는데 수정은 좀 더 고민해 봐야겠다.
또한 팀원이 추가 플러그인을 어제 db에 연동시켰다. towny라는 플러그인인데 컬럼이 100개가 넘는다. 그래서 이번 주 정기회의떄는 다같이 게임에 들어가서 데이터가 어떻게 쌓이는지 확인하고 , 각 컬럼이 뭘 의미하는지 정리하기로 했다. 그래서 최종적으로 원하는 정보만 가져다가 사용할 예정이다.
이제부터는 일주일마다 블로그를 포스팅할 예정이다. 프로젝트를 완성시키고 서버가 안정적으로 돌아가는 그날까지 ~
