정적인 싱글 페이지 어플리케이션(SPA)은 AWS S3에서 쉽게 호스팅할 수 있습니다.

이와 더불어 아마존 웹 서비스(AWS)의 CodeBuild, CodePipeline 등의 서비스를 이용하면 CI, CD를 쉽게 구현할 수 있습니다. 이렇게 CI, CD를 구축한다면 더욱 편리하게 테스트, 빌드, 배포가 가능합니다.

이 글에서는 아마존 웹 서비스를 사용해서 프론트엔드 자동배포 시스템 구축하는 방법에 대해 다루겠습니다.

다룰 내용

  • aws CodePipeline라인과 github 저장소 연동해서 자동배포하기
  • aws S3로 정적 호스팅하기

다루지 않을 내용

  • 서버사이드렌더링(SSR) 환경 배포하기 - 이 글에서는 정적 호스팅 배포만 다룹니다.

1. 빌드 할 프론트엔드 프로젝트 준비하기

저는 react를 사용하겠습니다..

빌드해서 결과물이 나온다면 vue, angular, svelte 등 무엇을 사용하셔도 무방합니다.

1.png

저는 create-react-app으로 프로젝트를 만들었습니다.

npm run build를 하면 정적으로 배포될 파일이 build 폴더에 만들어집니다.

2.png

이렇게 제 컴퓨터에서 정적으로 배포 시 위와 같은 화면을 볼 수 있습니다.

2. 정적 호스팅용 aws S3 버킷 만들기

아마존 웹 서비스 콘솔에서 S3 서비스로 이동합니다.

3.png

적당한 버킷 이름을 설정하고 다음을 눌러줍니다.

4.png

옵션 구성에선 다음을 눌러주었고 권한 설정에서 모든 퍼블릭 엑세스 차단을 해제했습니다. 정적 호스팅하려면 퍼블릭 엑세스가 가능해야합니다.

그리고 검토 후 버킷 만들기를 완료합니다.

5.png

생성된 버킷에 접속 후, 속성 탭에서 정적 웹 사이트 호스팅 메뉴를 선택합니다.

6.png

인덱스 문서를 index.html로 입력 후 저장합니다.

7.png

그리고 권한 탭에서 버킷 정책 편집기를 열어서 다음 정책을 추가합니다.

정적 호스팅에 필요한 퍼블릭 버킷 객체 읽기 권한을 부여하는 정책입니다.

bucket-name 부분은 실제 버킷명으로 변경해야 합니다.

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

그리고 이전에 npm run build로 생성된 파일을 버킷에 업로드하면 다음처럼 정적 호스팅이 되는걸 확인할 수 있습니다.

8.png

3. aws CodePipeline랑 CodeBuild 만들기

아마존 웹 서비스 콘솔에서 CodePipeline 서비스로 접속하겠습니다.

9.png

파이프라인 생성을 눌러줍니다.

10.png

파이프라인 이름을 설정합니다.

그리고 CodePipeline에서 사용할 IAM 역할이 필요한데, 현재는 없으므로 새 서비스 역할을 생성하겠습니다.

고급 설정에 아티팩트 스토어란 파이프라인에 작업에 따른 파일이 저장되는 S3 버킷입니다. 이 파이프라인에서 저장되는 아티팩트는 github에서 다운받는 빌드할 프로젝트입니다.

제가 한 설정에서 파이프라인 이름을 제외하고는 모두 기본값입니다.

이제 다음을 눌러줍니다.

11.png

이제 소스 스테이지입니다.

빌드 할 소스 로 github를 사용하겠습니다.

파이프라인을 처음 만든다면 github에 연결이라는 버튼이 보이는데, 이를 눌러서 권한을 추가해줘야 합니다.

그리고 저장소와 브랜치를 선택합니다.

선택한 저장소의 브랜치에서 변경이 감지되면 웹훅으로 파이프라인이 실행되는 방식입니다.

이제 다음 버튼을 눌러줍니다.

12.png

이제 빌드 스테이지를 추가해 봅시다.

빌드 공급자는 AWS Codebuild로 선택합니다.

현재는 Codebuild가 없으므로 프로젝트 생성 버튼을 눌러서 새로 생성하겠습니다.

13.png

먼저 빌드 프로젝트 이름을 입력합니다.

14.png

빌드할 환경을 설정하는 영역입니다.

저는 운영체제를 Amazon Linux 2로 했고 나머지는 기본값으로 했습니다.

CodeBuild도 마찬가지로 IAM 역할이 필요해서 새로 생성하는 옵션을 선택했습니다.

혹시 NODE_ENV 등의 환경변수 설정이 필요하다면 추가 구성에서 할 수 있습니다.

15.png

마지막으로 빌드 스펙과 로그에 관한 설정입니다.

buildspec.yml파일로 빌드 명령어를 관리할 수 있습니다. 저는 이것을 git으로 관리하기 위해 buildspec 파일 사용을 선택했습니다.

로그는 빌드 로그를 볼 수 있는 옵션인데 기본값인 CloudWatch로 설정했습니다.

이제 CodePipeline으로 계속 버튼을 클릭해주세요.

16.png

다음은 배포 스테이지인데, 저는 빌드 스테이지에서 바로 S3로 업로드 할 예정이라 건너뛰기를 선택하겠습니다.

다음을 눌러서 검토 후 파이프라인을 생성합니다.

17.png

생성되자마자 파이프라인이 실행되었지만 buildspec.yml 파일이 없기에 실패합니다.

4. buildspec.yml 작성하기

1단계에서 create-react-app으로 생성한 프로젝트 루트 디렉토리에 buildspec.yml 파일을 추가하고 다음 코드를 넣어줍니다.

    version: 0.2

    phases:
      install:
        runtime-versions:
          nodejs: 10 # 런타임 nodejs10으로 설정
        commands:
          - npm i npm@latest -g # npm 버전 업데이트
      pre_build:
        commands:
          - npm install # 빌드에 필요한 패키지 설치
      build:
        commands:
          - npm run build # 빌드
      post_build:
        commands:
          - aws s3 sync ./build s3://bucket-name # 빌드 후 결과물을 버킷으로 업로드

bucket-name은 실제 버킷명으로 변경해줘야 합니다.

만약 빌드 결과물이 저장되는 디렉토리가 build가 아니라 dist 등이면 맞춰서 변경해주시면 됩니다.

또한 환경에 따라 빌드 명령어는 상이할 수 있으니 주의 바랍니다.

5. Codebuild IAM 역할에 버킷 접근 권한 추가하기

4단계에서 Codebuild가 직접 S3 버킷에 업로드합니다.

따라서 해당 S3 접근 권한이 필요합니다.

18.png

aws IAM 서비스에 접속 후 아까 CodeBuild를 생성할 때 만들어진 역할로 접속합니다.

19.png

정책 상세로 접속 후 정책 편집JSON을 선택합니다.

다음 정책을 Statement 배열에 추가해줍니다.

    {
      "Effect": "Allow",
        "Resource": [
            "arn:aws:s3:::bucket-name*"
        ],
        "Action": [
            "s3:*"
        ]
    }

마찬가지로 bucket-name은 실제 버킷명으로 변경해야합니다. 버킷명 뒤에 * 와일드카드를 빼먹지 않도록 주의해주세요.

해당 버킷에 대한 모든 S3권한을 부여했습니다.

6. 빌드 확인하기

20.png

아까 권한이 없어서 실패한 파이프라인에 접속해서 변경 사항 릴리스 버튼을 눌러줍니다.

21.png

빌드가 잘 되는군요.

변경사항을 커밋하고 푸쉬를 해보겠습니다.

22.png

23.png

마찬가지로 빌드가 잘 성공했고 제가 추가한 I like coding!이라는 글자도 잘 반영되었습니다.