[개인기록] gps 기반 출퇴근 시스템 간편 구현 일지(2)

지난 기록

gps 기반 출퇴근 시스템을 만들겠다고 일요일 저녁에 마음을 먹고 백엔드 서버 구성을 마친 뒤 월요일 저녁에 다시 손을 댔을 때, 조금만 더 하면 MVP 완성인데라는 생각에 결국 새벽에 MVP는 구현해냈다.

웹페이지 및 Geolocation API 연동

월요일에 진행한 내용은, 백엔드 서버는 구성해서 프로세스를 띄워두었으니 프론트 웹페이지를 만들고 로컬 서버와 통신 테스트를 한다. 단순한 fake 로그인 기능을 만들고 버튼 클릭 시 출근 api를 호출하게 하였다. 이후 Geolocation API를 연동해 출근지 기준 위도와 경도를 설정한 뒤에 허용 범위에 따라 출근 로직을 수행하게 만들었다.

중간에 fake 로그인 기능을 만들면서 users 스키마 변경이 조금 있었고 백엔드 orm domain 로직에 수정이 있었다. AuditingAware 기능도 붙여 최소한의 auditing 기능을 넣었다.

이제 로컬에서는 프론트와 백이 모두 정상 동작하는 것을 볼 수 있었다.

서버 배포

우선은 웹서버로 nginx를 두고 정상적으로 호스팅되는지 확인했다. 이후 react app을 build 해서 SPA 빌드파일 경로를 root 요청에 대하여 서버에서 호스팅 할 수 있게 설정하기 위해 nginx 설정 세팅을 하니 정상적으로 페이지가 표출되었다. 이 때까지는 public cloud의 외부IP에 http 요청 정도를 보내서 확인했는데, 문제가 발생하기 시작했다.

Geolocation API 미동작

Chromium 프로젝트의 security 권고사항에 의해 chromium.org 사이트의 'prefer secure origins for powerful new features' 제안으로 api 호출이 제한되었다. http 통신이 보안에 취약하니 사용자의 개인위치가 노출되는 privacy 침해에 대한 제한이 있는 것이었다. https 통신이 필요하여 오랜만에 ssl 설정을 하게 되었다. letsencrypt로 간단하게 구현하였고, 이 과정에서 도메인을 구매해야 했다.

도메인 구매가 어렵진 않았지만.. 가장 정신적인 스트레스를 많이 받았다..ㅋ 가비아에서 저렴한 도메인(.shop)을 구매하려고 했는데, 배치가 돌았나.. 설정 시간의 텀으로 인해 정상적으로 연결되지도 않았고 구매하려고 하는데 계속 결제에 필요한 보안 모듈 설치하라고 나와서... 별거 아닌데 좀 짜증이 났다..ㅎ;(간편결제 시대의 편안함에 너무 젖어 있었나..) 결국 무통장입금으로 처리했는데 이미 짜증이 날대로 나버린 상태라 적용 시간을 기다리지 못한 탓에.. 결국 GCP에서 구매를 해버렸다. 그런데 구매하자마자 dns 세팅이 완료되었다는 문자를 받았다.(나란 사람..)

도메인에 공개IP 연결하고 ssl 설정에 따른 nginx 설정도 다시 하여 정상적으로 호스팅 되는 것을 확인했고, geolocation api도 정상 동작하는 것을 확인할 수 있었다.

도메인을 연결했더니 이제 해당 cors 에러가 났다.(아 맞다 cors..) 이미 예전에 겪어봤기 때문에 allow-origin 설정 바꿔주고, 하는 김에 api endpoint도 nginx에서 location routing 될 수 있게 8080포트로 연결시켜줬다. 이 과정에서 컨트롤러 요청 mapping url 규칙을 /api prefix로 변경했다.

MVP 완성

fake 로그인 후 버튼 누르면 위치 정보 받아서 서버에 출근 요청 후 데이터베이스에 write 하는 것까지 목표가 모두 달성되었다. 

이제 시작

제일 어려운 관문이 남아 있다. 보임자들을 설득하는 시간.. mvp 가져가서 가능성을 보여드리고 이제 디벨롭 해볼테니 한 번 해락해줄래?? 라고 설득하는 과정이다. 엊그제 담당 매니저님에게 말씀드렸는데 팀장님, 다른 매니저님들과 함께 상의를 해보겠다고 하셨다. 이후 하루만에 피드백을 주셨는데, 과연 결과는..