Github Actions, AWS Codedeploy 배포 자동화(1)

-

최근 거의 3일 내내 매달렸던 배포 자동화에 드디어 성공했다.
다음번에 삽질을 최대한 줄이고자 간단하게나마 과정을 남겨두려고 한다.

이번 글에선 AWS 콘솔에서의 세팅

다음 글에선 실제 연동 과정을 포스팅한다.


준비물

  1. 배포할 프로젝트의 Git repository (Nodejs 웹 프로젝트를 기준으로 작성됨)

  2. AWS S3 버킷

  3. EC2 인스턴스(서버로 사용될)


전체적인 흐름

프로젝트를 Git에 커밋하고 서버에서 배포되기까지의 대략적인 흐름은 위와 같다.
(제대로 이해했다면)
내용상으론 되게 간단한데 각 단계마다 서로 연결하는 과정에서 애를 많이 먹었다.


1. EC2 에 IAM 역할 등록

IAM 이란? : Identity and Access Management 의 약자로 AWS 에서 제공하는 서비스들간의 접근 권한을 관리해주는 서비스이다.

위 흐름도를 보면 EC2 인스턴스에서 Codedeploy 서비스를 이용해 S3 에 접근하게 되는데, 따라서 Codedeploy, S3 두 서비스에 대한 접근 권한이 필요하다.
이제 직접 IAM 역할을 만들고, EC2 에 등록해보자.


1) 새 IAM 역할 만들기


AWS 에서 서비스 탭 -> IAM -> 역할 만들기


2) EC2 개체 선택


EC2 인스턴스에 등록할 IAM 를 만드는 것이므로 EC2 를 선택하고 넘어가자.


3) 정책 설정



S3 와 Codedeploy 에 대한 모든 권한을 얻어오자.


4) 태그 설정 - 필수x


없어도 무관하고, 생성 후에 수정할 수 있으니 건너뛰자.


5) 검토 및 생성


역할의 이름을 설정하고, 생성해주자.


6) 기존 인스턴스에 IAM 역할 등록


서버로 사용할 EC2 인스턴스에 IAM 역할을 등록해주자. (EC2가 없다면 만들어주자)



IAM 역할을 위에서 만든 역할로 바꿔주면 끝!
이제 EC2 에서 AWS S3, Codedeploy 에 접근할 수 있게 되었다!!


2. Codedeploy Agent 사용자 생성

AWS 를 처음 시작하게 되면 기본적으로 루트 사용자로 작업을 진행하게 되는데, AWS 에선 모든 작업에서의 루트 사용자 사용을 지양한다.
따라서 Codedeploy 작업을 할 새로운 사용자를 생성해 주는 것이 바람직하므로 새로 사용자를 생성하고, 위에서와 같이 IAM 역할을 부여해보자.


1) IAM 사용자 및 그룹 추가

AWS가 처음이라면 그룹이나 사용자 모두 아무것도 없을 것이다.
AWS 서비스 탭 -> IAM -> 사용자 로 들어가서 사용자를 새로 만들어주자.


사용자 이름을 지정해주고, 우리는 나중에 AWS CLI 를 사용할 것이므로 프로그래밍 방식 엑세스에 체크하자.


IAM 권한을 사용자에게 직접 부여하거나 그룹에 부여한 뒤 사용자를 추가하는 등 여러가지 방법이 있을 수 있는데, 이 글에선 그룹에 권한을 부여하고 사용자를 추가하는 방식으로 했다.


2) 그룹에 정책 설정


EC2 에 정책을 설정할 때와 마찬가지로 S3, Codedeploy 모두 FullAccess 로 설정해주자.


3) 엑세스 키 받기 - 주의!!

사용자가 정상적으로 만들어지면 위와 같이 엑세스 키, 비밀 엑세스 키를 받으라는 창이 뜨는데, 
주의할 점은 이 페이지에서 두 키를 다운로드 받거나 복사하지 않으면 다신 키를 볼 수 없다!
그러니 꼭 안전한 곳에 저장해두자.
물론 이전 키를 삭제하고 다시 받을 수는 있다.


새로 만들어진 사용자와 부여받은 정책을 확인할 수 있다.


3. Codedeploy 생성 및 역할 등록


이제 Codedeploy 서비스를 이용할 사용자가 만들어졌으니 다음은 Codedeploy Application을 만들 차례이다.
 

1) Codedeploy 역할 생성

Codedeploy Application 을 만들기 전에 앞서 했던 것과 같이 Codedeploy 용 IAM 역할을 만들어 줘야 한다.
Codedeploy 용 역할을 선택한다.



Codedeploy 용 역할은 하나밖에 없으므로 자동 선택된다.


이름을 지정해주고 만들어주자.


2) Codedeploy Application 및 배포 그룹 생성

AWS 서비스 탭 -> CodeDeploy -> 애플리케이션 -> 애플리케이션 생성 을 눌러 Codedeploy Application을 만들자.


이름을 정하고, 컴퓨팅 플랫폼은 EC2/온프레미스로 선택


Codedeploy Application을 만들었으면 배포 그룹을 지정해 주어야 한다.
이후에 Github Actions와의 연동을 끝내면 Commit 을 감지하고 해당 그룹으로 자동으로 배포를 수행하게 된다.


배포 그룹의 이름을 정하고, 앞에서 만들어둔 IAM 역할을 부여하자.



EC2 인스턴스를 태그 값으로 고유하게 식별해 등록할 수 있다. 
EC2 인스턴스의 태그가 없다면 태그를 새로 등록해주자.


배포의 성공 여부를 정하는 규칙을 지정해 주어야 한다.
여러 개의 배포 대상이 있을 때, 지정한 일정 비율 이상이 배포되었다면 성공, 아니라면 실패로 판단한다.
우리는 EC2 인스턴스 하나밖에 없으니 AllAtOnce 를 선택해주자.


로드밸런서를 사용하지 않으므로 로드 밸런싱은 꺼주자.


+ S3 버킷 생성

이제 남은 건 버전별로 프로젝트가 저장될 S3 버킷인데, 정말 간단히 만들면 된다.
AWS 서비스 탭 -> S3 -> 버킷 만들기 -> 이름 지정 -> 다음 -> 다음 -> 다음...
배포 자동화를 해보는게 목표이므로 아무 설정도 지정하지 않고 만들었다.


여기까지 진행했다면 이제 지긋지긋한 AWS 콘솔에서의 작업은 모두 끝났다.
다음 글에서 Github 와 S3 , S3 와 EC2 를 연결하여 프로젝트가 자동으로 배포되게 해보자!

댓글

댓글 쓰기

이 블로그의 인기 게시물

HTML - input file 버튼 꾸미기

-
이미지
 이번 글에선 HTML 에서 기본적으로 제공하는 input 태그의 file 속성일 때의 모양을 바꿔보려고 한다. 열심히 구글링을 해본 결과 보안상의 문제로 직접 input 태그에 변경을 가할 수는 없다고 한다. 따라서 input 태그에 속성을 넣는 게 아닌 약간의 편법?을 이용해서 업로드 버튼처럼 보이게 만들어야 한다. 먼저, 파일의 이름을 출력할 가짜 input 태그를 넣자. <input type= "text" id= "file_route" disabled= "disabled" value= "파일 선택" > value 에 안내 문구를 넣었고, disabled를 지정했기 때문에 커서를 옮겨도 아무 것도 할 수 없다. 잘 생성됐다. 이제 오른쪽 버튼과 "선택된 파일 없음" 문구를 없애고 새 버튼을 만들어야 하는데 label과 style 속성을 잘 활용해서 없애보자. <input type= "text" id= "file_route" disabled= "disabled" value= "파일 선택" > <label for= "upload_file" style= "border: solid 1px black;" > 업로드 </label> <input type= "file" id= "upload_file" accept= "image/*" required= true style= "position:absolute; clip:rect(0, 0, 0, 0);" > label 태그는 for 속성으로 연결한 id의 태그와 자신(라벨)을 연결해 준다. 즉, "업로드" 를 클릭해도 input 태그를 클릭한 것...
자세한 내용 보기

HTML - 이미지 미리보기(jQuery 없이)

-
이미지
 최근에 웹 클론 코딩을 하면서 이미지 미리보기 기능을 구현해야 됐는데 구글링해서 나온 대부분이 제이쿼리를  이용한 코드여서 찾는데 애를 좀 먹었다. 이 글에선 제이쿼리를 쓰지 않고 이미지 미리보기를 구현해보려고 한다. 먼저, 기본으로 제공되는 input 태그와 미리보기를 하기 전 기본 이미지를 띄워보자. <img src= "고양이.jpg" id= "img_section" style= "width: 400px; height: 400px;" > <br> <input type= "file" id= "upload_file" accept= "image/*" required= true value= "업로드" > src 는 본인이 원하는 기본 이미지 경로로 설정해주면 된다. (어차피 나중에 src 속성을 바꿔서 이미지가 변경됨!) id , style 등등 나머지 속성을 지정해주자. 아직은 이미지와 input 버튼만 만들었기 때문에 파일을 아무리 업로드해도 아무 변화가 없다. 이제 동적으로 img 태그의 src 를 바꿔주는 스크립트를 작성해보자. <img src= "고양이.jpg" id= "img_section" style= "width: 400px; height: 400px;" > <br> <input type= "file" id= "upload_file" accept= "image/*" required= true value= "업로드" > <script> const reader = new FileReader(); reader.o...
자세한 내용 보기

BOJ - DNA 유사도(2612)

-
문제(링크) LCS 알고리즘 응용문제입니다. dp[i][j] = i, j 지점에서 나올 수 있는 최대 유사도 공백을 추가할 때, 현재 유사도가 음수가 되버리면 그 지점부터 다시 시작하는게 이득입니다. 따라서 lcs 알고리즘과 비슷하게 문자가 같지 않다면 왼쪽, 왼쪽 위, 위 값의 최댓값을 현재 값으로 가져오는데 해당 값에 공백을 추가한 값, 즉, -2 를 한 값을 가져오고 최종 값이 음수가 되면 0으로 바꿔줘야 합니다. 문자가 같다면 lcs 알고리즘에서 처럼 +3을 해줍니다. dp 배열을 완성했다면 유사도가 최대인 점을 찾습니다. 최대인 점으로부터 가로, 세로, 대각선을 체크하면서 시작 점을 찾아가는데, 가로, 세로는 +2 , 대각선은 -3 으로 찾아가면서 0이 될때까지 찾아가고, 역으로 시작점부터 끝점까지 출력하면 됩니다. #include<iostream> #include<algorithm> #include<math.h> #include<string> #include<vector> #include<stack> #include<queue> #include<map> using namespace std; #define FIO ios_base::sync_with_stdio(false); cin.tie(NULL) #define pii pair<int, int> #define pdd pair<double, double> #define pic pair<int, char> #define ll long long #define vi vector<int> #define vl vector<long long> #define vc vector<char> #define vii vector<pii> #define IMAX 2000000001 #define LM...
자세한 내용 보기