사내에서 매 주마다 Google Sheets에 주간 보고를 하고있다. 보고서를 작성하지 않는 상황이 빈번하여 왜 그런가 생각해봤다.
필드 엔지니어의 특성 상 고객사로 출근하는 경우가 많고 퇴근 후에는 일이 손에 잡히지 않을 것이다.
근무 중에 모바일로 작성하면 될 것 같지만 개인적으로 아이폰이라 그런지 모바일 환경에서는 줄 칸 바꾸기, 이동하기 등 작성하기가 너무 어려웠다. 구글 폼 입력처럼 텍스트를 제출하면 Google Sheets로 입력되는 간단한 서비스를 만들어보기로 했다.
Google Sheets API 사용하기 위해 먼저 GCP에 접속해서 프로젝트를 생성하고 Google Sheets API 서비스를 사용 신청하자
생성된 프로젝트로 들어와서 API 및 서비스 항목으로 이동하여 API를 사용하기 위한 API키를 발급받고
Sheets API의 쓰기 기능을 사용하려면 Google 계정이 필요하므로 Oauth 클라이언트 ID도 만들어놓자
HTML, CSS, JS는 잘 다루지 못한다. 그래서 Cursor에게 의뢰했다. index.html을 만들어줬고 해당 파일에 css, js 문법을 통째로 넣어서 node.js 기반 2000라인의 싱글 프로그램으로 만들어줬다. 수정의 수정을 반복하면서 나온 UI는 아래와 같다.
목록 조회 버튼을 누르면 Google Sheets API를 통해 해당 시트의 정보를 읽어온 다음 매니저 이름과 사이트 이름을 드랍다운 형태로 보여준다. 보고서 제출 버튼을 누르면 보고서 작성 아래 텍스트 박스에 쓰여진 내용들을 API를 호출하여 Sheets에 입력한다.
해당 프로그램은 Docker Image로 빌드하여 도커 허브에 저장한 다음 사내에서 사용하는 Xen 가상 서버에서 구동했고 로컬에서 실행된 프로그램을 외부로 노출해주는 ngrok 서비스를 이용했다.
ngrok에서 제공한 도메인을 통해 사용자가 접근하는 상황을 간단한 구성도를 그려보면 아래 그림과 같다.
Google Sheets API에서 쓰기 기능을 호출하려면 Google 계정 로그인이 필요하다. 해당 과정에서 리다이렉션이 일어나므로 위에서 만들었던 Oauth Client 설정에서 ngrok에서 제공해준 도메인을 "승인된 JavaScript 원본, 승인된 리디렉션 URI"에 등록하면 잘 동작한다.
후기
1. html에서 바로 API를 호출하므로 API키가 노출될 수 밖에 없었다. 최선으로는 API키의 호출 범위, 서비스 범위를 축소하는 방법으로 해결했다.
2. 원본 Sheets에 테스트를 할 수 없었기에 Sheets ID를 환경 변수로 선언하여 컨테이너를 올릴 때 환경변수를 주어 prod, dev 환경을 구분하여 진행하였다.
3. 도커에 올려서 진행하다보니 코드 수정으로 인한 CI/CD 구성이 필요했다. Git Action을 사용하여 Repository에 Commit이 Push될 경우 Docker Hub Repository에 Push되도록 파이프라인을 구성했다.