업브렐라 (11) 썸네일형 리스트형 CloudFront 403 / 404 에러 해결 1. 문제 정의 업브렐라 프로젝트를 배포했음에도 불구하고 구글에서 검색되지 않는 문제가 있었습니다. 색인이 생성되지 않는 페이지를 확인해보니 아래의 페이지들에 문제가 있었습니다. 2. EC2 VS CloudFront 개발 서버의 경우, 인프라 구축의 비용을 줄이기 위해 EC2 + Nginx + React 로만 배포했습니다. 개발 서버의 웹 페이지 응답을 보면 정상적인 것을 확인할 수 있습니다. 똑같은 페이지이지만, 배포 서버의 경우 404 에러가 발생하는 것을 알 수 있습니다. 404 에러가 발생했지만, 페이지는 정상적으로 보여지기 때문에 더욱 원인을 찾기 어려웠습니다. 3. 문제 원인 이러한 문제는 클라이언트 사이드 라우팅을 사용하는 React 애플리케이션의 특성과 CloudFront의 동작 방식 간에.. Upbrella 버그 수정기 1. 문제 정의 운영상에 심각한 버그가 발생했다. 협업지점에 대여 가능한 우산이 없을 경우 협업지점 소개 페이지에 로딩이 되지 않는 것이다. 어디갔어…. 해당 기능 담당자가 현재 바쁘기 때문에 코드를 분석해보기로 결정했다. 2. 문제점 @Override public List findAllStoresByClassification(long classificationId) { QStoreMetaWithUmbrellaCount storeMetaWithUmbrellaCount = new QStoreMetaWithUmbrellaCount( storeMeta, umbrella.id.countDistinct().as("rentableUmbrellasCount") ); return queryFactory .select(.. 안전하게 비밀번호 생성하기 - HOTP 1. 문제 정의 업브렐라 보관함은 네트워크 통신이 없는 상태에서 비밀번호를 생성해야 합니다. 이에 대한 해결책으로 HOTP를 사용하여 비밀번호를 생성하기로 결정하였습니다. 2. OTP (One - Time - Password) OTP는 무작위 번호 약속 알고리즘에 따라 (시간 혹은 카운터에 따라) 변경되는 추정할 수 없는 비밀번호 생성을 이용하는 보안 시스템입니다. 비밀번호가 1회용이라 노출되어도 재사용이 불가능하며, 비밀번호를 숨겨진 알고리즘을 이용하여 생성해내므로 서버와의 접속 없이도 생성이 가능하여 중간 과정에서 패킷이 유출되는 위험을 없앨 수 있습니다. OTP는 크게 HMAC을 기반으로 하는 HOTP와 시간을 기반으로 하는 TOTP로 나뉘게 됩니다. 2 - 1 TOTP (Time Based - O.. 협업지점 조회 성능 개선, N+1 해결 1. 문제 정의 기존 코드는 개발 일정을 맞추기 위해 성능의 이슈를 감안하더라도 기능 완성에 초점을 두었습니다. 또한 프론트엔드와의 개발 일정이 맞지 않아 기능을 개발한 후 바로 최적화할 수 없는 상황이었습니다. 현재는 양 측이 모두 개발이 완료된 상황이라 코드를 분석해보니 많은 문제점을 발견할 수 있었습니다. 기존 코드 public List findAllStores() { return queryFactory .selectFrom(storeDetail) .join(storeDetail.storeMeta, storeMeta).fetchJoin() .join(storeMeta.classification, classification).fetchJoin() .join(storeMeta.subClassificat.. 캐시를 통한 성능 최적화 이 포스팅은 제가 작성한 UPbrella 프로젝트의 기술 블로그에 작성한 캐시를 통한 성능 최적화 포스팅을 옮겨온 것입니다. 1. 문제 정의 업브렐라 서비스의 특성 상 협업지점의 CUD는 자주 일어나지 않지만, 조회 API는 자주 호출되고 있습니다. 협업지점 조회 API는 여러 테이블이 조인을 하고, 자주 호출되는데 이것이 매번 호출되면 DB의 부하 증가로 이어지게 됩니다. 이를 개선하기 위한 방법으로, Read Replica 와 Redis 중 고민을 하였는데, 서비스의 규모가 작고, 데이터가 적다는 점을 고려하여 Redis를 이용하여 DB 데이터를 캐싱하기로 결정하였습니다. 2. Redis 2 - 1. Redis 설치 아래의 명령어를 통해 redis를 설치해줍니다. sudo apt install red.. Loki를 통한 로그 모니터링 이 포스팅은 제가 작성한 UPbrella 프로젝트의 기술 블로그에 작성한 Loki를 통한 로그 모니터링 포스팅을 옮겨온 것입니다. 1. 문제 정의 업브렐라 서버팀은 ELK를 사용하여 로그 모니터링을 하려고 했습니다. 하지만 무거운 ELK를 감당하기에는 서버 비용이 부담이 들었고, 비교적 가볍게 실행할 수 있는 Grafana를 로그 모니터링 툴로 선택하게 되었습니다. 2. Grafana 2 - 1 Grafana란? Grafana는 오픈 소스로 제공되는 대시보드 및 시각화 플랫폼입니다. 이번 포스팅을 통해 Loki와 Promtail로 수집한 데이터를 Grafana로 시각화하는 방법에 대해서 알아보겠습니다. 2 - 2 Grafana 설치 wget으로 Grafana를 다운받고, 압축을 해제해줍니다. wget h.. nGrinder 자동화 이 포스팅은 제가 작성한 UPbrella 프로젝트의 기술 블로그에 작성한 nGrinder 자동화 포스팅을 옮겨온 것입니다. 1. 문제 정의 nGrinder를 사용해서 부하테스트를 하는 이유는 지난 게시글를 통해 알아보았습니다. 하지만 매번 배포를 할때마다 개발자가 nGrinder 서버를 띄워서 테스트 하는건 자원의 낭비라고 생각해서 자동화하기로 결정하였습니다. 2. nGrinder 자동화 도입 2-1 설정하기 java 11 과 docker가 설치되었다고 가정하고 진행하겠습니다. 도커로 ngrinder를 pull 하고 실행해줍니다. sudo docker pull ngrinder/controller:3.5.5-p1latest 버전이 아닌 3.5.5-p1을 명시해준 이유는 3.5.6 이상부터는 Script E.. JPA Repository는 Entity만을 조회해야 할까? 이 포스팅은 제가 작성한 UPbrella 프로젝트의 기술 블로그에 작성한 JPA Repository는 Entity만을 조회해야할까?를 옮겨온 것입니다 1. 문제 정의 대여 기록을 관리하기 위해서는 여러 테이블과의 조인이 필요합니다. 문제는 여기서 발생하는데요, 기존의 업브렐라 개발팀은 개발 속도 및 편의를 위해 JPA Repository에서 Entity만 조회하였습니다. 하지만 이는 성능에 많은 영향을 미치고 있었습니다. 2. 대여 기록 분석 대여 기록은 여러 테이블을 조인하는데 비해 적은 수의 데이터를 반환하고 있습니다. 코드를 먼저 살펴보겠습니다. @Override public List findAll(HistoryFilterRequest filter, Pageable pageable) { return.. nGrinder 적용기 이 포스팅은 UPbrella 프로젝트의 기술 블로그에 작성한 nGrinder 적용기 포스팅을 옮겨온 것입니다. 1. 문제 정의 업브렐라 서비스를 출시하기 전, 업브렐라 서비스의 안정성을 확인하기 위해 QA팀을 통해 부하 테스트를 했습니다. 하지만, 전문적인 QA팀이 없는 업브렐라 팀에서 새로운 버전이 나올때 마다 부하테스트를 직접 하기에는 어려움이 있기에, 업브렐라 개발팀은 부하테스트를 도입하기로 결정했습니다. 2. nGrinder 도입 2 - 1. 부하 테스트란? 부하 테스트는 시스템의 성능을 검증하기 위한 테스트 방법 중 하나로, 시스템이 예상되는 사용자 부하 혹은 트래픽 하에서 제대로 작동하는지, 그리고 기대하는 성능 지표를 충족하는지 확인하는 것을 주 목적으로 합니다. 부하 테스트의 주요 특징과 .. WireMock 적용기 이 포스팅은 UPbrella 프로젝트의 기술 블로그에 작성한 WireMock 적용기 포스팅을 옮겨온 것입니다. 안녕하세요, 저는 업브렐라에서 백엔드 개발을 담당하고 있습니다. 업브렐라에서 부하테스트를 할 때, 외부 API 의존성을 어떻게 해결하였는지 적어보려 합니다. 1. 문제 정의 업브렐라 서비스는 로그인한 유저만 사용할 수 있기 때문에, 로그인 하는 과정은 필수적입니다. 하지만 kakao oauth 로그인을 통해서만 접근이 가능하기 때문에 nGrinder 부하 테스트는 시작부터 어려움에 봉착하고 말았습니다. 이를 해결하기 위해 wiremock 이라는 mock server를 도입하기로 결정하였습니다. 2. WireMock 2 - 1. WireMock이란? Flexible API Mocking for T.. 이전 1 2 다음