KO EN

AWS CodeDeploy와 Github Action을 이용해 EC2에 Nuxt3 배포하기 - 설정

by Lovefield

Server /

안녕하세요 Lovefield입니다.

이번 글은 CI/CD에 대한 내용을 다룹니다. 작업을 완료한 Nuxt3를 AWS EC2에 배포해야하는 과정에 대해서 제가 사용한 방법입니다. CI/CD를 구축하기 위해서 Github Action과 AWS CodeDeploy를 사용합니다. 부득이하게 내용이 많아져 파트를 분리해 작성했으며 이번 글에서는 설정 위주로 설명합니다.

1. ACCESS Key 발급

article01-ko.png

먼저 CLI로 접근이 가능하도록 ACCESS Key를 발급해야합니다. 우측 상단 유저 메뉴에서 "보안 자격 증명"을 선택해 이동합니다.

article02-ko.png

액세스 키 만들기를 눌러 진행합니다.

article03-ko.png

우리는 CLI를 사용할 예정입니다. 대안 항목을 선택하고 다음을 눌러줍니다. 옵션 항목인 태그는 적을 필요가 없으므로 넘어가줍니다.

article04-ko.png

생성된 Key들은 Github Secrets에 설정해야합니다.

article05.png

Github Action을 작성할 저장소의 "Settings > Secrets and variables > Actions"에서 Repository secrets를 등록해줍니다. 저의 경우 빌드할때 env 파일이 필요해서 env정보를 담은 secret도 생성해두었습니다.

2. AWS IAM(Identity and Access Management) 설정

IAM 에서 CodeDeploy가 사용할 역할을 생성해야합니다.

article06-ko.png

AWS 서비스를 사용하는 유형으로 CodeDeploy를 지정해 역할을 생성해줍니다. 권한은 자동으로 잡혀있으므로 이름을 잘 설정해 생성합니다.

article07-ko.png

인스턴스의 IAM도 수정해야합니다. "작업 -> 보안 -> IAM 역할 수정" 을 통해 인스턴스의 IAM을 변경해줍니다. 변경 페이지에서 인스턴스의 역할로 변경 가능한건 AWSClud9SSMInstanceProfile 밖에 없습니다. IAM에서 AWSClud9SSMInstanceProfile를 찾아 권한 정책에 AmazonS3FullAccess를 추가해줍니다. 빌드된 파일에 접근할 권한이 필요하기 때문입니다.

3. AWS CodeDeploy 설정

article08-ko.png

CodeDeploy 에서 배포 명령을 수행할 어플리케이션을 생성해야합니다. 이름을 GihubAction으로 지어주고 어플리 케이션을 생성합니다.

article09-ko.png

어플리케이션이 생성되었다면 어플리케이션 하위에 배포 그룹을 생성해야합니다. Nuxt3를 배포할 예정이니 그룹 이름은 FrontEnd로 명명하겠습니다. 서비스 역할에 IAM에서 생성했던 Github-action 역할을 선택해줍니다.

article10-ko.png

배포가 될 인스턴스를 지정해야합니다. 키는 Name으로 하면 인스턴스를 만들때 사용했던 이름을 이용해서 선택 할 수있습니다.

article11-ko.png

CodeDeploy Agent 설정과 배포 구성에 대해서는 위와같이 설정하시면 됩니다. 로드 벨런서 부분은 서버 이중화가 되어있는 경우 사용하시면 됩니다. 지금 저희는 되어있지 않기에 별도로 설정하지 않았습니다.

4. S3 버킷 생성

article12-ko.png

S3에서 배포에 사용될 파일들을 저장할 버킷을 생성합니다. 해당 버킷에 앞으로 Build된 파일들이 업로드 될 예정입니다.AWS와 GitHub에서 사용할 설정들은 전부 끝났습니다. 글의 양이 많아진 관계로 다음 글에서 이어서 작성하도록 하겠습니다.

Author

Lovefield

Lovefield

Web Front-End developer

하고싶은게 많고, 나만의 서비스를 만들고 싶은 변태스러운 개발자입니다.

로그인

디코에 오신 것을 환영해요!
전문가들의 수많은 아티클 창고 🤓