랜덤 유머 링크 사이트 만들기
재밌는 곳으로 보내줘
이번 주말에는 랜덤 이동하는 유머 사이트를 만들어봤습니다.
기능은 2개 뿐입니다.
링크 등록, 랜덤 이동
링크는 누구나 등록할 수 있습니다. 만든지 얼마 되지 않아서 일단 저랑 친구들이 웃긴 링크나 유튜브 주소 등을 올려뒀습니다. 랜덤 이동을 누르면 저장된 리스트 중 아무 곳으로 이동할 수 있습니다. 링크 중엔 후방주의해야하는 링크도 조금 섞여있으니 공공장소에선 주의해주세요.
제작과정
제작은 무척 간단하게 만들었습니다. 사용한 프레임워크는 Vue, Express, Nuxt로 제작했습니다. create-nuxt-app을 사용해서 빠르게 골격을 만들 수 있었습니다. Nuxt는 제가 사용해본적이 많지 않아서 라우팅 잡을 때 꽤나 애를 먹었습니다. 처음엔 graphql만 사용하려고 했는데 기능도 몇 개 되지 않아서 REST API로 만들었습니다.
컴포넌트 라이브러리로 Vuetify를 사용해봤는데 이 역시 익숙하지 않아서 어려웠습니다. 하지만 확실히 구글 스타일에 최적화된 라이브러리라서 원하는 스타일을 구현하는데 좋았습니다.
데이터 베이스는 MLab에서 무료로 제공하는 Mongodb를 서버를 사용했습니다. 500mb까지 무료로 사용할 수 있으니 거의 수 십 만개의 링크가 등록할 수 있을 것 같습니다.
서버와 배포는 AWS Elastic Beanstalk를 사용했습니다. 개인적으로 가장 애용하는 서비스인데 자동으로 스케일을 조정해줄 뿐만 아니라 특별히 서버관리를 해줄 필요가 없다는게 최고인 것 같습니다.
도메인은 무료로 구해서 쓸까 하다가 이왕이면 제대로된 걸 쓰려고 godaddy에서 구입했습니다. 제가 알기론 고대디가 가장 저렴한 도메인으로 알고 있었는데, AWS에서 route53에 도메인 등록을 하는 것과 가격이 똑같다는 걸 결제 후에야 알았습니다.(최초 결제는 고대디가 할인을 해줘서 더 쌉니다.)
아마존 서버와 연결하기 위해 route53을 사용했습니다. 네임서버를 연결해주고, 이미 만든 elastic beanstalk 엡과 연결하면 간단하게 연결할 수 있었습니다.
https 역시 지원하기 위해 인증서를 발급받았습니다. AWS는 certification manager라는 좋은 인증 서비스가 있습니다. 인증서를 받고, 인증서를 연결할 레코드를 route53에 바로 추가할 수 있었습니다.
해당 인증서를 사용하기 위해선 로드밸런서를 통해서 http를 https로 바꿔줄 필요가 있습니다. 매번 느끼지만 이전 세대인 클래식 로드밸런서가 가장 잘 작동되고, 최신 버전인 애플리케이션 로드밸런서는 이상하게 작동이 안되서 애를 먹었습니다.
위와 같이 모두 만든 후에 관리자 페이지도 만들어봤습니다.
링크를 확인할 수 있는 버튼하고, 보여지는 상태를 조정할 수 있는 버튼을 넣어봤습니다.
간만에 앱을 만들다보니 클라우드 서비스 이용했던 기억이 많이 흐릿해졌다는 걸 느꼈습니다. 이번 주에는 틈틈이 웹앱 제작에 들어가는 세밀한 부분을 설명하는 글을 올려보도록 하겠습니다.
