[Frontend] 배포 자동화 구축 (2) - codeBuild, codePipeline 구성

이상엽·2024년 7월 30일

CodePipeline S3 aws cd cloudfront 우아한테크코스

구성 방법

1. codeBuild 구성하기

소스 공급자는 어디서 소스코드를 가져올 것인가를 설정하는데 GitHub로 설정해서 연결하고 싶은 본인 repository를 설정하면 된다.

소스 버전은 어떤 브랜치에서 소스코드를 가져올지 정하는건데 여기서는 main 브랜치로 설정해줬다.

이미지는 개인적으로 Amazon Linux 보다 ubuntu를 선호해서 선택했는데, 아무거나 선택해도 상관 없을거 같다.

Buildspec 은 아래와 같이 설정했다.

version: 0.2

phases:
  install:
    commands:
      - echo Installing dependencies...
      - cd frontend
      - npm install
  build:
    commands:
      - echo Building the project...
      - npm run build

artifacts:
  files:
    - '**/*'
  base-directory: frontend/dist
  name: techcourse-project-2024/corea/frontend-deploy

buildSpec 설명

스크립트 명령어로 대충 내용을 파악할 수 있는데 우리 깃허브는 모노레포로 구성되었기에 repo 최상위에 frontend, backend 디렉토리로 분기가 된다.

그렇기에 cd frontend 한 후 npm install, npm build 를 해주었다.

환경변수 처리
만약 프론트엔드의 환경변수를 넣어주고 싶다면 아래와 같이 직접 .env 파일을 만들어서 삽입해주면 된다.

 build:
    commands:
	  - echo insert .env file
	  - echo SERVER_URL=http://12.34.56.78:8080 >> .env

      - echo Building the project...
      - npm run build

artifacts 는 빌드 결과물에 대한 처리이다.
base-directory: frontend/dist 에 있는
files: 모든 파일을
name: S3의 techcourse-project-2024/corea/frontend-deploy 위치에 저장한다.

BuildSpec 에 아티팩트도 같이 정의했기에 여기서는 아티팩트 없음으로 설정해도 되고 cloudWatch 는 필요하면 알아서 넣어주면 된다.

2. codePipeline 구성하기

실행 모드의 경우 이전에 진행중인 파이프라인이 있을 때 새로운 파이프라인이 들어오면 어떻게 처리할지에 대해 선택하는 것이다.

동작하고 있던 파이프라인을 대체시키던지, 기다렸다가 끝나면 실행하던지, 병렬로 처리하게 할지는 원하는 처리를 선택하면 된다!

여기서 고급 설정에 사용자 지정 위치를 지정해줘야한다. 해당 지정 위치는 파이프라인 결과를 저장할 S3 버킷 위치를 설정하는건데 기본 위치로 지정하게 된다면 해당 codePipeline 용 S3 버킷이 새로 만들어져서 결과물을 관리하게 되는데 우테코 크루에게 할당된 버킷이 아니기도 하고, 아마 해당 버킷 액세스 권한이 없어서 에러가 발생할거다.

우리에게 할당된 project-2024 또는 project-2024-artifacts 둘 중 하나를 선택하면 된다. (개인적으로 project-2024-artifacts 가 의도에 맞는거 같다.)

우리에게 소스 공급자 Github 버전1만 사용하라했으니 버전 1을 선택하고 깃허브 연결하여 배포 자동화를 원하는 repo를 선택해주고, 브랜치를 선택해주면 된다.

변경 감지 옵션에 웹후크를 이용하여 해당 repo의 브랜치에 push 등 이벤트가 발생하면 코드 파이프라인이 실행된다.

빌드는 위에서 만들어준 codeBuild 를 선택해주면 된다.

배포 공급자에 S3 를 선택하고 배포되어 있는 본인 S3 버킷(2024-project)을 선택하면 된다.
이때 배포 경로는 본인 해당 버킷 내 폴더명을 입력해주면 된다.
(/corea 로 입력하면 버킷주소//corea 로 위치하기에 corea 와 같이 최상위(/)를 빼야한다.)

해당 작업이 필요한 이유는 앞에서 codeBuild 의 결과물을 어디에 위치할지 정의하기 위해 해주는 작업이다.