메로그

신규 프로젝트를 진행하게 되었는데, 이번 기회에 최신 React 버전을 직접 사용해보고 싶었다.또한 빠른 배포와 자동화된 워크플로우를 위해 AWS S3를 활용한 정적 사이트 배포와 GitHub Actions를 이용한 CI/CD 구성까지 함께 적용해보기로 했다.최근에는 간단한 CI/CD 환경을 누구나 쉽게 구성할 수 있는 도구들이 잘 갖춰져 있어서,이번 글에서는 React v19 버전 + AWS S3 + GitHub Actions 조합으로 프로젝트를 어떻게 세팅했는지따라하기 쉽게 정리해보려 한다.진행하는 프로젝트는 간단한 Admin 페이지로, SEO 최적화가 필요 없는 SPA(single-page application) 형태이기 때문에 React로 구성하는 데 부담이 없었다.사용기술우선 본격적인 진행에 앞..

github actions 란? Github Actions는 Github에서 제공하는 CI/CD 도구입니다. 이를 이용하면 코드의 변경사항이 있을 때마다 자동으로 빌드하고 배포할 수 있습니다. 사용방법 Github 레포지토리에서 Actions 탭을 클릭합니다. "Set up a workflow yourself" 버튼을 클릭합니다. 원하는 언어와 빌드 도구를 선택합니다. .yml 파일을 수정하여 원하는 빌드 및 배포 설정을 추가합니다. 또는 루트 디렉토리에서 .github/workflows/deploy.yml 을 만듭니다. 소스 root 에서 .github/workflows 밑에 deploy.yml 파일을 만들어 줍니다. 아래와 같이 만들게 되면, 우분투, 노드 체크아웃 및 설치 => 노드모듈을 설치 =>..