CI/CD

React CI/CD 구축 해보기 3(EC2 + Github Actions + CodeDeploy)

React CI/CD 구축 마지막 포스팅입니다 이번에는 S3에 배포된 빌드파일을 EC2인스턴스에 배포하는 방법을 알아보도록 하겠습니다 Github Actions Workflow 수정 저번에 작성한 워크플로우에 CodeDeploy 관련한 부분을 추가해 줍니다 name: Master # Workflow 이름 on: # Event 감지 push: branches: - master # 브렌치 지정 jobs: build: runs-on: ubuntu-18.04 steps: - name: Checkout source code. # 저장소 Check out uses: actions/checkout@v2 - name: Cache node modules # node modules 캐싱 uses: actions/cache..

React CI/CD 구축 해보기 2(EC2 + Github Actions + CodeDeploy)

저번 CI/CD 구축 - EC2 설정에 이어서 이번에는 CodeDeploy 설정 및 GitHub Actions를 사용해서 AWS S3에 업로드를 해보도록 하겠습니다 CodeDeploy란? Amazon EC2 인스턴스, 온프레미스 인스턴스, 서버리스 Lambda 함수 또는 Amazon ECS 서비스로 애플리케이션 배포를 자동화하는 배포 서비스입니다 즉 AWS 서비스에 애플리케이션을 자동으로 배포해 주는 도구입니다 저희는 이런 CodeDeploy를 EC2와 Github Actions와 연결해서 배포를 진행할 예정이고 우선 CodeDeploy 설정부터 진행해 보도록 하겠습니다 CodeDeploy IAM 설정 저희가 S3에 업로드한 파일을 CodeDeploy가 접근해서 EC2에 배포를 해주게 됩니다 이때 Cod..

React CI/CD 구축 해보기 1(EC2+Github Actions + CodeDeploy)

이번에는 create-react-app으로 만들어진 프로젝트를 EC2서버에 자동 배포하는 방법에 대해 알아보도록 하겠습니다 내용이 조금 길어서 주요 작업 별로 구분을 하였으며 오늘은 EC2에 CodeDeploy Agenet 설치 및 권한 설정에 대해 알아보겠습니다 CI/CD 란? CI/CD라는 단어는 개발을 하다 보면 많이 들어본 단어입니다 CI/CD란 애플리케이션 개발 단계부터 배포 단계까지 모든 단계를 자동화를 통해 효율적이고 빠르게 사용자에게 배포할 수 있는 환경을 의미하며 DevOps 엔지니어들의 핵심 업무입니다 여기서 CI 란 새로운 코드 변경사항이 정기적으로 빌드 및 테스트되어 공유 저장소에 통합하는 것을 의미합니다(지속적인 통합) CD 란 개발자의 변경사항이 저장소를 넘어 고객의 실제 환경까..

React StoryBook 배포 해보기

이번에는 저번에 만들었던 Storybook 프로젝트를 배포해보도록 하겠습니다 작업된 내용은 아래 프로젝트에서 확인가능하십니다 https://github.com/jungHyeonS/React-stroybook GitHub - jungHyeonS/React-stroybook: react-stroybook-study react-stroybook-study. Contribute to jungHyeonS/React-stroybook development by creating an account on GitHub. github.com 스토리북을 배포하는 방법은 일반적인 리액트 프로젝트처럼 정적 앱으로 내보내는 방법과 스토리북 관리자가 만든 무료 배포 서비스인 Chromatic을 이용한 방법이 있습니다 이번 포스팅에..