반응형 Projects64 [OpenRoadmaps] Github Actions를 통한 CI/CD 구축하기 테스트 코드와 AWS를 통한 배포환경이 준비되었으니 이제 CI/CD를 구축할 수 있다. CI/CD의 간단한 정의는 다음과 같다. CI (Continuous Integration): 레포지트로의 코드가 변경될 때, 자동으로 빌드와 테스트를 해준다. CD (Continuous Deployment): CI를 통과한 변경사항을 적용하여 자동으로 배포한다. Github Actions에서는 push, pull request 등 다양한 변경사항과 cron 등의 스케줄에 대해 테스트, 빌드 배포 등의 workflow 자동화를 지원한다. 이를 사용해 CI/CD를 적용했고, 이에 대해 정리해보려 한다. 전체 workflow 파일은 Github에서 확인할 수 있다. GitHub - DevJaewoo/OpenRoadmaps .. 2023. 3. 8. [OpenRoadmaps] 10. SSL 인증 + NginX Proxy 적용기 EC2에 배포한 후 Elastic IP에 가비아에서 구입한 도메인을 연동했다. IP는 어차피 nslookup 하면 볼 수 있어서 가리진 않았다. NginX 설치 및 HTTPS 리다이렉트 적용 프록시를 적용하기 위해 NginX를 설치하자. sudo apt-get install nginx NginX를 설치하면 /etc/nginx 폴더와 /var/log/nginx 가 생기는데, 각각 NginX를 설정하고, 로그를 남기는 역할을 한다. .conf 파일을 /etc/nginx/conf.d 폴더에 넣어두면, NginX가 켜질 때 설정을 읽어 적용한다. /etc/nginx/openroadmaps.conf 파일을 생성하고, HTTP로 온 요청을 HTTPS로 리다이렉트 해주는 코드를 작성하자. server { listen.. 2023. 3. 1. [OpenRoadmaps] 9. Docker 빌드 + AWS 배포하기 우선 기능 구현은 잠시 보류하고, CI / CD를 위한 배포부터 먼저 하기로 했다. 배포 구상도는 다음과 같다. Backend는 EC2에, Frontend는 S3에 배포하고, NginX를 통해 SSL 인증과 사용자의 요청에 따른 프록시 작업을 수행한다. /api 경로로 들어오는 요청은 Spring 컨테이너로 보내주고, 나머지는 S3으로 보내주게 설정했다. HTTP 요청이 들어올 경우 HTTPS로 리다이렉트 시켜주도록 설정했다. Docker 빌드 Backend는 Docker 이미지로 빌드해서 배포했다. Docker-Compose로 묶은 채로 배포하고 싶었지만, 이미지를 빌드할 때 환경변수를 설정해야 하는데, Docker 이미지는 이를 plain text로 저장한다. 이런 값들은 노출되면 큰일나기 때문에, .. 2023. 2. 13. [OpenRoadmaps] 블로그 카테고리 Unique Constraint 오류 해결 Intro 웹사이트 개발 중 아래와 같이 카테고리가 생성되지 않는 버그가 발생했다. 찾아보니 다른 사용자가 같은 이름의 카테고리를 생성했을 경우 발생하는 문제로, @UniqueConstraint에 name과 client_id를 같이 묶어줬어야 했는데 name으로만 묶어줘서 발생한 것이었다. @Entity @Getter @NoArgsConstructor(access = AccessLevel.PROTECTED) @Table(uniqueConstraints = { @UniqueConstraint(name = "unique_category_name", columnNames = {"name"}), }) public class Category extends BaseTimeEntity { ... } columnNam.. 2023. 2. 6. [OpenRoadmaps] 8. 블로그 글 작성, 글 뷰어 기능 개발 블로그 글 작성 기능 개발 Mantine의 Tiptap 기반 Rich Text Editor와 uiwjs의 React Markdown Editor 중 어떤걸 쓸지 고민 끝에 더 많은 기능을 지원하는 Mantine을 사용하기로 했다. 공식 문서를 보고 아래와 같이 Tiptap에서 지원하는 모든 기능을 툴바에 넣었다. Mantine에서 기능을 전부 지원해주기 때문에, 컴포넌트를 갖다 쓰는것만으로도 다양한 기능을 지원하는 편집기를 만들 수 있었다. 로드맵 항목에서 [이 주제로 글 작성하기] 버튼을 누를 시 해당 로드맵 항목을 주제로 글을 업로드하는 기능을 구현했다. 버튼 클릭 시 아래와 같이 현재 로드맵 ID를 파라미터로 넘겨주고, 포스트 작성 컴포넌트에서 받아오도록 작성했다. /blog/posts/new?ro.. 2023. 2. 5. [OpenRoadmaps] 7. 로드맵 뷰어 기능 개발 Intro 이전에 로드맵 관련 API를 만들었는데, 로드맵 뷰어 기능을 개발하며 추천 / 로드맵 항목 공부 체크 기능이 들어가며 API에 추천 수, 추천 상태, 공부 완료가 추가되어야 했다. 기능을 구현하며 고민한게 2가지가 있다. 고민1: 추천 수 조회 방법 사용자가 중복 추천하지 못하도록 하거나 추천을 취소하기 위해 아래와 같이 Client - Roadmap 간의 매핑 테이블을 만들었다. 그런데 추천 수를 가져오려면 매번 테이블 전체를 읽어 추천의 개수를 세어야 하는데, 풀 스캔을 해야 하기 때문에 추천 수가 쌓이면 쌓일수록 성능이 떨어질 것 같았다. 매핑 테이블 없이 로드맵 테이블에 likes 컬럼 하나를 추가해 관리하면 count 쿼리를 날릴 필요 없이 추천 수를 바로 읽으면 되어 성능이 훨씬 낫.. 2023. 2. 5. [OpenRoadmaps] 6. 로드맵 에디터 기능 구현 Intro 백엔드 API 구현이 완료돼서 사용자가 로드맵을 만들고 업로드할 수 있는 에디터를 만들었다. 이 프로젝트를 하며 가장 구현하기 힘들었다. 소스코드는 Github에 업로드 되어있습니다. GitHub - DevJaewoo/OpenRoadmaps Contribute to DevJaewoo/OpenRoadmaps development by creating an account on GitHub. github.com UI 구성 편집기 UI는 아래와 같다. 로드맵 항목 리스트: 편집 영역의 로드맵 항목들을 확인하고 선택할 수 있다. 로드맵 편집 영역: 이 영역에서 로드맵을 만들 수 있다. 로드맵 편집 모드 선택: 아이콘을 선택해 편집 모드를 변경한다. 로드맵 편집 아이콘 클릭 이벤트를 수신하게 했고, up.. 2023. 1. 27. [OpenRoadmaps] 5. 로드맵 API 구현 및 테스트 Intro 로드맵 기능은 사용자가 로드맵 편집기를 통해 트리 형태로 자신만의 로드맵을 만들고, 다른 사람이 만든 로드맵을 보고, 로드맵의 각 항목을 따라 공부할 수 있게 해주는 기능이다. 프론트엔드에서 로드맵을 생성하고 조회하기 위해 백엔드에서 로드맵 관련 API를 만들었다. 구현한 API 목록은 다음과 같다. 로드맵 생성 로드맵 검색 로드맵 조회 로드맵 추천 로드맵 항목 공부 완료 구현한 코드를 일일이 설명하진 않을거고, 개발하면서 짚고 넘어가야 된다고 생각되는 것들을 정리해보도록 하겠다. 소스코드는 Github에 업로드 되어있습니다. GitHub - DevJaewoo/OpenRoadmaps Contribute to DevJaewoo/OpenRoadmaps development by creating a.. 2023. 1. 5. [OpenRoadmaps] 4. 테스트 환경 구성 및 테스트 항목 Intro 클라이언트 기능을 구현했으니 테스트코드를 작성해야 한다. Entity, DTO, Repository, Service, Controller 항목을 테스트했으며, 각 항목별 사용한 기술은 아래와 같다. 공통: JUnit5, AssertJ Entity / DTO: - RepositoryTest: DataJpaTest ServiceTest: Mockito ControllerTest: RestAssured 테스트 항목 별로 무엇을, 어떻게 테스트했는지 정리해보도록 하겠다. Entity JUnit5의 jupiter보다 더 직관적인 테스트코드를 작성하게 해주는 AssertJ를 사용했다. Entity 테스트코드에서 테스트한 항목은 다음과 같다. 정적 팩토리 메서드 연관관계 편의 메서드 정적 팩토리 메서드 테.. 2023. 1. 5. 이전 1 2 3 4 ··· 8 다음 반응형
