전체 글221 Next.js App 배포하기 - 3. 지속 배포(CD) 구축 Github Action을 통하여 main브랜치에 PR이 merge 되면 자동으로 빌드 후 배포를 진행하도록 구축하였습니다. main 브랜치에 merge가 되면 매번 ec2 instance에 들어가서 git pull -> npm run -> build pm2 start까지 하는 작업을 줄여보고자 했습니다. Github Action에서 제공하는 탬플릿을 사용하여 간편하게 CD를 구축할 수도 있지만, 이번에는 .yml 파일을 사용하여 스크립트 형식으로 CD를 구축해 보았습니다. EC2 인스턴스에 인바운드 규칙으로 ip를 제한해 놓았기 때문에 github action이 실행될 ip를 추가하고 제거하는 작업이 포함되어 있습니다. 구축 방법간단합니다. 프로젝트 root에 .github/workflows 폴더 내.. 2025. 1. 25. Next.js App 배포하기 - 2. Https 세팅 Https 세팅보안을 위해 https 세팅을 해줘야 합니다.저 같은 경우 도메인이 원래 있었기 때문에(Flutter Web의 도메인), 도메인 생성, ssl 적용 관련 절차는 생략하고 ELB 연결하는 절차만 기술하도록 하겠습니다. 1. 대상그룹ELB를 생성하기 전에 Target Group이 필요합니다. ec2 목록에서 대상그룹 탭으로 들어가 대상그룹 생성을 합니다.필요하다면 상태검사 경로를 입력합니다. (해당 경로가 유효한지 주기적으로 확인합니다.)대상 유형을 인스턴스를 선택하고 ec2 인스턴스를 연결합니다. 포트는 80 포트를 선택합니다. 2. ELB이제 ELB를 생성하여 80포트로 들어오는 요청들을 443포트로 리다이렉트 시키고, 443 포트로 들어오는 요청을 방금 생성한 대상그룹으로 리다이렉트 .. 2025. 1. 19. Next.js App 배포 - 1. EC2에 배포하기 Flutter Web 코드를 Next.js로 마이그레이션 하는 작업을 진행중입니다. 어느 정도 작업이 끝나서 Next.js App을 배포하는 과정을 기록합니다. 이번 프로젝트는 AWS EC2에 배포하기로 했습니다. 기본세팅1. 인스턴스 스펙 설정Ubuntu 최신버전(24.04 LTS)을 사용하였습니다.t2.micro 인스턴스로 생성합니다. (나중에 스펙이 좀 더 필요하면 올리면 됩니다.) 2. key pair 설정key pair를 생성하거나, 기존에 있는 것을 사용하면 됩니다. 이 key는 이후 ec2 인스턴스에 접속할 때 사용합니다. 3. 보안그룹 설정보안 그룹의 경우 어떤 경로에 대해 접근을 허용할지 선택합니다. 저같은 경우 80(HTTP), 443(HTTPS), 22(SSH)에 대해 접근을 허용.. 2025. 1. 19. PR 요청 후 Rebase and merge버튼으로 합치기 과정중 발생한 회사에서 처음으로 PR 요청을 하고나서 리뷰 폭탄(....)을 열심히 고친 후 dev 브랜치에 합치게 되었다. 팀원분이 rebase 후에 merge를 하면 된다고 하신다. 근데 PR 버튼에 보니까 Rebase and Merge라는 메뉴가 보인다. 이걸 쓰라는건가....? 라는 생각이 들었지만 일단 조사해보기로 했다. 취업 전 그룹 프로젝트를 할 때는 PR 후 바로 merge를 진행했었는데, rebase는 들어만 봤지 정확히 어떻게 하는지 까지는 알 지 못하는 상태였다. 이왕 이렇게 된거 merge와 rebase에 대해 간략하게 정리하고 내가 처한 오류에 대해 알아보고자 한다. Merge and Rebase 개념 작업한 branch를 dev나 main branch에 합칠 때 자주 사용되는 두가지 개념이다... 2023. 12. 11. Javascript Class로 배열 만들어보기 객체와 배열 자바스크립트의 배열은 객체를 기반으로 만들어져 있고, typeof로 타입을 출력해보면 object라고 나온다. 배열의 형식을 보면 key가 0과 양의 정수로 이루어져 있는 객체라고도 할 수 있다. 배열이 객체와 다른점 중 꽤 중요한 부분이 '순회가 가능하다.', 즉 이터러블이라는 것이다. 그렇다면 key가 0과 양의 정수로 이루어져 있고, 이터러블 프로토콜을 만족하도록 Class를 작성하면 배열 비슷하게 사용할수 있지 않을까 라는 생각이 들어서 만들어 보기로 했다! 이터러블이란? 이터러블은 ES6에서 도입된 개념으로 '순회가능한' 자료구조를 만들기 위해 ECMAScript 사양에 정의하여 미리 약속한 규칙이다. 이터러블 프로토콜을 만족하는 객체를 이터러블이라고 한다. 이터러블 프로토콜 - S.. 2023. 10. 13. 프로젝트 컴포넌트 with 캐러셀 UI 프로젝트 컴포넌트 구현 프로젝트 부분은 틀을 하나 만들어서 컨텐츠만 넣으면 재사용 할 수 있게 만들고 싶었다. 데이터 부분은 다음과 같은 형식으로 작성했다. ProjectBox라는 컴포넌트를 만들어서 위 형식의 데이터를 넣으면 각각의 프로젝트가 렌더링 되도록 코드를 작성했다. ProjectBox 컴포넌트는 크게 세 부분으로 나뉘는데, 상단의 이미지 캐러셀 박스, 하단 왼쪽의 프로젝트 info, 하단 오른쪽의 프로젝트 description 이다. 이미지 캐러셀 구현 이전 프로젝트에서 캐러셀을 한 번 만들어본 적이 있어서 그걸 기반으로 코드를 작성했다. 캐러셀 페이지는 상태로 관리하는데, 좌우 버튼을 누르면 상태를 변경한다. ** 무한 캐러셀 효과를 위해 페이지가 1번이거나 마지막인 경우 transition.. 2023. 10. 7. 이전 1 2 3 4 ··· 37 다음
