들어가면서

3월달에 만든 청약알리미 서비스를 좀더 고도화 하기 위해서 이것저것 기술들을 공부하고 이를 접목시킬 공부를 했다. 결론적으론 예산을 줄이고 서비스를 안정적으로 할 수 있게 되었지만 아직 SEO적용이나 신규 로직 적용 부분에 있어서 공부를 해야할 부분이 많다.

전체 아키텍쳐

원래 이 프로젝트는 기본적으로 MSA기반 서비스를 희망한다.

일단 비용적인 측면에서 고려할 점이 많았다. 사이드 프로젝트 특성상 초기에 유입되는 트래픽이 바이럴이 많이 일어나지 않는 한 최대한 저비용으로 서비스를 운영하고 싶었고, 아키텍쳐 구성하는 작업보단 비즈니스 로직에 좀더 집중하고 싶었다.

실제로, nginx에서 ssl구성하면서 SSL 인증서 문제로 좀 골머리를 앓다가 위와 같이 설계를 바꿨다.

프론트엔드

프론트엔드는 처음엔 NUXT를 전반적으로 사용할 생각이었지만, VERCEL 위에서 이를 올렸을때 기존 CSR에서 돌아가던 라이브러리들이 안돌아가는 건들이 있었다. (여기서도 생각보다 시간을 많이 잡아먹었다.) 특히 이 프로젝트에서 가장 중요한 캘린더 관련 라이브러리들이 동작하지 않아서 다른 캘린더를 적용해봤지만, 생각보다 원하는 디자인이 나오지 않아서 CSR로 구성하는 것을 선택한다.

github page 내 도메인 설정

github page 내 커스텀 도메인을 설정할 수 있다. 여기서 나는 가비아에서 구매한 도메인 설정에 github page설정을 추가하여 myhomealarm.xyz를 검색하면 해당 페이지가 뜨도록 설정했다.

og:meta 태그 설정

카카오톡과 같은 메신저에서 링크를 공유할때 자동으로 이미지나 글 내용들을 공유하는 메타 태그 설정이다. 이 설정을 통해 검색엔진이 해당 링크에 포함된 메타정보를 읽고 검색창에 띄워준다. vue-meta와 같은 라이브러리를 사용하면 좀더 다이나믹한 방식으로 메타 태그를 설정할 수 있다.

카카오톡의 경우, 메타태그를 설정하고 반나절정도 지나고 나서 적용 됨을 확인했다. (심지어 녹스도 됨)

      <meta property="og:title" content="청약알리미" />
      <meta property="og:type" content="website" />
      <meta property="og:description" content="부린이를 위한 청약 알리미 서비스">
      <meta property="og:site_name" content="Home Apply">
      <meta property="og:locale" content="en_US">
      <meta property="og:url" content="https://myhomealarm.xyz"/>
      <meta property="og:image" content="https://raw.githubusercontent.com/RumbleKAT/MyHome/master/title.png" /> 
      <meta property="og:article:author" content="rumblekat" />

백엔드

Vercel을 사용하면 nuxt기반으로 동작하는 백엔드를 만들 수 있다. 물론 next.js나 여러가지 지원한다. vercel의 장점은 hobby 무료계정을 이용해도 충분히 괜찮은 서비스를 만들수 있다는 것이다. 상업적인 목적을 위한다면 pro 계정을 신청하면 20$ 정도에 양질의 서비스를 호스팅할 수 있다.

vercel의 장점은 모든 API를 람다형식으로 호스팅해주는 것이다. 물론 그로 인해 시간제한이나, 인메모리로 뭔가 하려면 redis와 같은 DB가 필요할수 있으나, 충분히 트래픽이 많은 API의 경우 vercel에서 처리하면되서 만족한다.

또한, 개발환경변수 설정이나 에러 로깅과 같은 기능들을 제공하고 github를 연동한 CI/CD도 제공하여 꽤 직관적인 면모를 가지고 있다.

Nuxt.js

Nuxt3는 아직 불완전한 프레임워크이다. 좀더 개선할 부분이 많고 아직 당연하게 돌아갈거같은데도 안돌아가는 부분도 몇개 있었다. 그렇지만, Nuxt.js 내부의 Nitro 서버 엔진은 매우 빨랐다. 그리고 Express와 미세한 차이정도 있어서 서버를 적용하는 데 어려움이 없었다.

GoormIDE Container

vercel만으론 사실 DB 역할을 할만한 서버가 없었다. 그래서 괜찮은 친구를 찾던 중 GoormIDE에서 무료로 10GB크기의 컨테이너를 빌려주는 것을 적용해봤다. 엄청 놀랬던 점은 nodejs 뿐만 아니라 여러 다른 언어들도 지원해줘서 간단한 MVP 모델을 만들땐 이러한 컨테이너를 이용하는 것도 괜찮겠다는 판단이 들었다.

특히 포트포워딩을 이용하면, 인텔리제이와 연결할수 있어서 원격으로 DB 데이터를 조회하거나 조작할수 있다.

그리고 배치잡을 걸 서버도 만들수 있어서 좋았다. 백그라운드로 켜기를 수행하면, docker나 forever가 필요없어도 자동으로 백그라운드로 수행할 수 있다. 또, github repository랑 연결해서 배포하는데 편리했다.

해결해야 하는 문제점

아직 SEO를 해결을 못했다. sitemap, robots.txt등 추가를 했는데도 구글 검색엔진에서 검색이 되지않는다.
캐시 적용문제. OpenAPI 특성상 일일 천회정도 호출이 가능하다. 아직은 트래픽이 없어서 캐시를 적용하지 않았지만, 추후에 배치로 청약 정보를 가져오면 이를 캐시로 넣고 캐시 기반으로 조회를 할 예정이다.