CodeSeries를 활용한 CI/CD 구성 (Frontend Pipeline)

 

 

구성도

Frontend CI/CD Pipeline

• CodeCommit에 Dev, Prod 브랜치 생성 (two-branch 전략)
  • dev 환경은 dev 브랜치에서 개발 및 검증 진행. 이후 master 브랜치에 병합하여 prod 환경 배포 예정
• 환경별(Dev,Prod) 프론트, 백엔드 파이프라인 구성 (총 4개)  -- 이 페이지에서는 프론트 파이프라인만 설명하겠음!!
• CodeBuild는 buildspec.yml(dev-buildspec.yml과 prd-buildspec.yml)을 통해 빌드 및 테스트 진행
• CodePipeline에서 배포 단계는 각 환경별 S3 버킷으로 정적 웹사이트 배포 

* CodePipeline은 승인자의 허가에 의해 진행된다.

 

 

이 글 내용은 Frontend CI/CD Pipeline 구성을 진행하는 내용이다.

Backend CI/CD Pipeline 구성은 다음에 올리도록 하겠다.

---

 

정적 웹사이트 호스팅을 위한 S3 버킷 생성

프론트엔드를 올릴 것이므로, 정적 웹 사이트 호스팅 활성화한다.

 

프론트엔드는 여러 외부 사용자가 접근하기 때문에 퍼블릭 액세스를 차단하면 안된다.

 

 

Bucket Policy 구성

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::s3-website/*"
        }
    ]
}

 

 

ACL 활성화

외부 사용자가 해당 버킷 내 프론트엔드를 받아서 볼 수 있어야 하므로 ACL 활성화 한다.

활성화 후 외부 사용자가 접근할 때 public-read 권한만 주도록 권한을 좁힌다.

 

---

CodeCommit에서 리포지토리 생성

리포지토리 생성 페이지에서 리포지토리 이름(예: CODECOMMIT-REPOSITORY)를 작성하고 생성한다.

버킷 버전 관리 활성화 선택이 필요하다.

 

 

로컬 컴퓨터와 연동할 때 위의 명령어로 git clone 하면 된다.

 

 

 

---

로컬 컴퓨터와 AWS CodeCommit 연동

 

Git 설치

참고 사이트: https://git-scm.com/downloads

 

먼저 내 로컬 컴퓨터에 Git이 설치되어야한다.

위 사이트에 접속하여 Git을 설치한다.

Git 버전 1.7.9 이상을 지원하는 Git 을 설치하여 AWS CodeCommit 리포지토리에 연결해야 한다.

 

그리고 로컬 컴퓨터에 AWS CodeCommit과 연동하기 위한 폴더를 생성한다.

 

 

 

 

Git 자격 증명 생성

VSC에서 작업한 나의 코드를 CodeCommit에 올리기 위해 HTTPS 연결을 통해 Git 자격 증명을 생성해야한다.

 

 

IAM 사용자 > jiho > 보안 자격 증명

AccessKey가 아닌 CodeCommit 액세스 자격 증명이 따로 존재한다.

자격 증명 생성 버튼을 누르면 자동으로 자격 증명이 생긴다.

이후 연동할 때 git 접근에 대한 사용자 이름 / 비밀번호 입력 받을 때 위에서 발급 받은 내용 입력하면 된다.

 

git 접근할 때 참조할 명령어

$ git checkout test
- branch test로 변경

$ git pull
- branch test에 있는 소스코드 받아오기

$ git clone https://git-codecommit.ap-northeast-2.amazonaws.com/v1/repos/CODECOMMIT-REPOSITORY
- 원격 저장소를 로컬 저장소로 복제

$ git init
- 새로운 Git 저장소로 초기화
- 이 명령어를 실행하면 .git 디렉토리가 생성되고, 현재 디렉토리는 Git 저장소로 전환됨

$ git add .
- 현재 작업 디렉터리의 모든 변경사항을 스테이징 영역에 추가
- 새 파일 추가, 파일 수정, 파일 삭제 모두 포함

$ git commit -m "commit message"
- '-m "commit message"' 부분은 커밋 메시지를 지정


$ git push origin master
- 로컬 저장소의 commit된 변경 사항을 원격 저장소로 전송
- '-u' : 로컬 저장소의 branch와 원격 저장소의 branch를 추적 관계로 설정. 특정 branch에서만 계속 배포할 때 권고. 설정하면 git push, git pull 할 때 브랜치 이름 생략가능.


$ git remote add origin https://git-codecommit.ap-northeast-2.amazonaws.com/v1/repos/CODECOMMIT-REPOSITORY
- origin: 원격 저장소의 이름 의미(꼭 오리진 아니어도 됨)
- https://git-codecommit : 원격저장소의 URL

 

git clone 할 때 git 사용자 이름 / 비밀번호를 물어보면 앞서 발급받은 자격 증명 내용을 입력한다.

git clone 해서 리포지토리 내 파일을 내려 받는다. 

환경별 buildspec.yml을 작성 후  원격 저장소에 다시 푸시한다.

* CodeCommit은 GitLab과 다르게 콘솔에서 파일 삭제가 안된다. 그래서 삭제 후 다시 푸시 진행하였다..

 

buildspec-dev.yml, buildspec-prd.yml (내용 모두 동일)

version: 0.2

phases:
  install:
    runtime-versions:
      nodejs: 16
  build:
    commands:
      - npm install
      - npm run build
  post_build:
    commands:
      - aws s3 sync ./dist s3://s3-website-prd

• frontend는 nodejs 16 설치
• aws s3 sync ./dist s3://[bucket_name]  : ./dist 폴더와 S3 버킷을 sync하여 아티팩트 배포
  
  • 배포 단계에 S3 버킷으로 배포 설정할 수도 있지만
    이렇게 될 경우, 순서가   
    1) 아티팩트 보관용 버킷에 S3 아티팩트 배포    2) 아티팩트 보관용 버킷에서 웹사이트용 버킷에 sync
    두 번의 절차가 필요하지만

 

aws s3 sync ./dist s3://s3-website 명령어는 같은 리전에서 내용을 복제하는 것이므로 비용이 별도로 들지 않음!

 

 

---

CodeBuild 생성

소스 공급자 선택

Source가 AWS CodeCommit 이므로 지정하고, 브랜치 master 를 지정한다.

 

Buildspec 파일 설정

필자는 AWS CodeCommit 내부에 buildspec-prd.yml을 올려두어서       (경로 : /buildspec-prd.yml)

buildspec 파일 사용을 선택하고, buildspec-prd.yml 이름을 적어준다.

appspec 파일과는 다르게 buildspec 파일은 이름을 커스텀하게 지을 수 있다.

 

 

 

아티팩트 설정

아티팩트는 Codebuild가 빌드한 아티팩트의 저장소 (ex. S3, ECR etc.)를 지정하는 것이다.

이 설정은 CodePipeline으로 만들지 않고 수동 빌드할 때 의미있는 설정이다.

CodePipeline으로 연결시 위의 설정들은 다 무시되고 CodePipeline 기준 설정을 따른다.

 

 

CodePipeline 배포 후 CodeBuild 설정 확인한 모습이다.

수동으로 CodeBuild 생성할 때는 아티팩트 유형에 보이지 않았던 CodePipeline이 아티팩트로 설정되어있다.

위의 아티팩트 저장소는 CodePipeline 생성할 때 다시 지정한다.

 

 

 

서비스 역할 선택

서비스 역할은 기본적으로 생성되는 역할을 지정한다. 

+ 수동적으로 정책 추가가 필요하다. 아래에서 이어서 설명하겠다.

 

 

IAM 역할 생성

빌드 프로젝트를 생성하면 기본적으로 생성되는 역할이 생긴다.

하지만 AWS Codebuild가 S3에 접근하려면 AmazonS3FullAccess 권한이 추가적으로 필요하다.

수동으로 추가해주어야 한다.

 

고로, AWS CodeBuild가 필요한 권한은 다음과 같다.

• CodeBuild 빌드 프로젝트 생성시 기본적으로 생성되는 Role
• AmazonS3FullAccess

 

---

 

CodePipeline 생성

앞서 미리 생성한 CodeCommit -- CodeBuild 자동화하는 파이프라인을 생성한다.

미리 생성하지 않고 새 파이프라인 생성하며 만들 수도 있는데 뭐 빼먹고.. 기타 등등 문제가 발생한 적이 있어서 

미리 생성 후 파이프라인으로 연결하였다.

 

Step 1 파이프라인 설정 선택

자동으로 생성되는 역할을 지정한다.

 

앞서 말했던 CodeBuild에서 빌드 후 아티팩트 저장소 지정하는 내용이다.

• 기본 위치를 선택하는 경우, codepipeline 이름을 가진 S3 버킷이 생성되어 그 안에 아티팩트가 배포된다.
• 사용자 지정 위치를 선택할 경우, 기존에 이미 생성해둔 website 버킷을 선택할 수 있다. (선택)

우린 이미 버킷을 생성해두었기 때문에 사용자 지정 위치를 선택한다.

 

 

 

Step 2 소스 스테이지 추가

소스 공급자는 AWS CodeCommit을 레파지토리로 사용한다.

가져오고자 하는 레파지토리 이름과 브랜치 이름 master를 작성한다.

 

 

 

Step 3 빌드 스테이지 추가

CodeBuild를 사용하므로, 앞서 생성한 Build 프로젝트를 지정한다.

 

 

 

Step 4 배포 스테이지 추가

아티팩트에 Zip 파일이 있어서 배포하기 전 파일 압축 풀기를 선택한다.

 

 

만약 배포 스테이지에서 S3 배포를 하고 싶다면

배포 공급자에 S3 선택 후, 추가 구성에서 표준 ACL에 public-read 선택해야한다.

 

그럼 정상적으로 CI/CD 파이프라인이 생성된다.

 

 

 

 

배포 결과

 

성공적으로 배포가 완료되었다.