React 프로젝트를 Github Action을 이용하여 AWS S3로 자동배포하는 방법에 대해 간략하게 정리하는 글이다.
우선적으로 배포할 프로젝트의 Github Repository(원격저장소)가 생성이 되어있고 AWS 계정이 있다는 전제하에 진행을 한다.
1. Workflow 생성
Github Action을 이용하여 자동 배포를 위한 workflow를 생성하기 위해 해당 repository 상단 탭에 Action 탭을 클릭하여 workflow를 생성하는 화면으로 들어온다. 현재 배포하려는 React 프로젝트는 npm 으로 build하기 때문에 Node.js 에서 Configure 를 클릭한다.
Configure에서 workflow를 작성하면 되는데 기본적인 workflow가 작성이 되어있다. 위 workflow를 간단하게 설명하면
- name : 해당 workflow의 이름을 의미
- on > push > branches : main branch에 push되었을 때 아래의 jobs를 수행
- jobs > build > runs-on : 실행환경이 ubuntu임을 의미
- ....> strategy > matrix > node-version : 해당 노드 버전에서 하위 steps가 진행됨.
- steps > run : 실행되는 명령어를 의미, if-present : 빌드 스크립트가 있을 때만 실행됨을 의미
인데 여러 노드 버전에서 수행될 필요는 없으므로 16.x 를 제외하고 모두 지우고 node-modules를 설치할때 npm ci -> npm i로 수정해주었다. 작성을 완료하고 상단의 Commit changes를 클릭하여 node.js.yml을 커밋한다.
2. AWS S3 버킷생성
앱 배포를 하기 위해서 AWS S3 버킷을 생성해야 한다.
AWS(https://aws.amazon.com)로 접속하여 로그인 후 상단 검색창에서 s3를 검색하여 클릭 -> 버킷만들기 클릭한다.
버킷 이름을 작성한 후 AWS Region 을 서울로 설정하고 버킷을 생성한다.
버킷을 만든 후에는 해당 버킷을 클릭하여 상단의 속성탭으로 들어간 뒤 웹 사이트 호스팅을 설정하기 위해 정적 웹사이트 호스팅 편집을 클릭한다. 정적 웹사이트 호스팅을 활성화 하고 웹사이트의 인덱스 페이지를 설정해준다.
설정을 완료하면 웹사이트에 접속할 수 있는 엔드포인트가 부여되지만 현재 S3에 React 프로젝트를 올리지 않기도 했지만 버킷 정책 설정도 안해줬기 때문에 들어가면 403 에러가 표출된다.
3. AWS S3 버킷 설정 및 어플리케이션 배포
우선적으로 웹에서 액세스 할 수 있도록 퍼블릭 액세스 차단을 비활성화한다.(default: 활성화 )
현재 배포하려는 프로젝트는 React 로 만들어진 간단한 웹 어플리케이션이므로 모든 차단을 비활성화해도 무관하여 모두 비활성화 했지만 프로젝트의 규모나 성격에 따라 AWS 공식 홈페이지에서 레퍼런스를 충분히 숙지후 권한 및 차단 설정 진행을 권고한다.
퍼블릭 액세스 설정을 마친 후에는 바로 아래의 버킷 정책을 넣어줘야 하는데 S3 버킷 정책에 관해 AWS에서 제공하는 userguide를 참고하여 작성하였다.
(참고 url: https://docs.aws.amazon.com/AmazonS3/latest/userguide/WebsiteAccessPermissionsReqd.html)
마찬가지로 해당 설정은 모든 사용자에 대해 읽기액세스 권한을 부여하는 예제 이므로 참고하여 작성.
버킷 정책을 작성하고 다시 엔드포인트로 들어가보면 403 forbidden 에러에서 404 Not Found로 변경된 것을 확인할 수 있다.
3. yml 파일 완성
소스코드를 S3에 자동으로 배포하기 위해 이전에 만들어 두었던 yml 파일에서 해당 내용 설정을 작성해주어야 한다.
S3에 배포하기 위한 설정은 s3-action 레퍼런스(참고 url: https://github.com/awact/s3-action)를 참고하여 작성하였다.
npm 으로 프로젝트 빌드를 하게 되면 build 폴더안에 생성되기 때문에 SOUREC_DIR을 './build' 로 수정, AWS_REGION은 버킷을 생성할때 설정해 주었던 REGION을 입력한다.
나머지 하위 세가지 항목(AWS_S3_BUCKET, AWS_ACCESS_KEY_ID, AWS_SECRET_ACCESS_KEY) 는 환경변수로 값을 넣어주어야한다. AWS_S3_BUCKET의 경우 버킷의 이름만 넣어주면 되지만 AWS_ACCESS_KEY_ID, AWS_SECRET_ACCESS_KEY 의 경우 AWS에서 제공하는 IAM을 사용하여 넣어주려 한다.
IAM 이란 ?
AWS 리소스에 대한 엑세스를 안전하게 제어해주는 서비스로 IAM을 사용하여 리소스를 사용하도록 인증(로그인) 및 권한 부여된 대상을 제어한다. 현재 우리가 AWS에 가입하여 사용하고 있는 계정은 Root 사용자로 AWS의 서비스 및 업로드한 리소스에 대한 모든 접근 권한을 가지고 있다. 어떤 작업이든 모든 작업에 Root사용자를 사용하는 방법 보안적으로 좋지 않으므로 IAM 사용자를 생성하여 사용하는 것이 바람직하다.
IAM 사용자를 만드는 방법은 우선 AWS 로그인하여 상단검색바에 IAM 을 검색하여 클릭한뒤 왼쪽 탭에서 사용자를 클릭 -> 사용자만들기를 클릭하여 사용자를 추가한다. 사용자 이름을 입력후 권한 설정으로 넘어가서 직접 정책 연결 -> 권한 정책에서 s3를 검색하여 AmazoneS3FullAccess 체크한 후 사용자를 생성을 완료한다.
이후 yml 파일에서 AWS_ACCESS_KEY_ID, AWS_SECRET_ACCESS_KEY 를 입력하기 위해 액세스 키를 만들어야 한다.
만들어진 IAM 사용자 이름을 클릭하여 상단 보안 자격 증명 > 액세스키 만들기 > 기타 > 설명 태그 생략 > 액세스키 만들기를 클릭하면 액세스키와 비밀 액세스키가 만들어지는데 .csv로 따로 저장하지 않을 경우 다시 확인할 수 없으니 주의해야 한다.
환경변수로 넣어줘야 하는 버킷 이름과 생성된 액세스키, 엑세스 시크릿 키는 github repository 상단 탭에 Settings > secretes and variable 에서 New repository secrete 을 클릭하여 이름과 값을 넣어준다.
마지막으로 github repository > action 에서 workflow를 선택한 후 Re-run all jobs 를 클릭하면 정상적으로 배포가 된다.
Maxtrix: build 영역을 클릭하면 우측과 같이 빌드 과정도 보이게 된다. 모든 과정이 끝나고 AWS S3 로 들어가서 버킷상태 및 엔드포인트로 접속을 해보면 정상적으로 배포된 것을 확인할 수 있다.
