AWS CodeCommit을 이용해 S3에 정적 컨텐츠를 배포해 보자

개요

이번 포스팅은 AWS의 GitHub에 대응되는 CodeCommit의 레파지토리에 HTML로 구성된 정적 컨텐츠가 업로드되면 AWS의 CodePipeline이 이를 감지해 Amazon S3에 정적 컨텐츠를 배포하는 것을 구성해 보고자 한다.(AWS의 S3는 웹서버 기능을 대신 할 수 있다)

 

 

아키텍처

이번 포스팅에서는 웹서버 역할을 위해 S3를 사용할 것이고 정적 컨텐츠(html, css, js, image) 소스 관리를 위해 AWS CodeCommit을, 그리고 파이프라인 구성을 위해 AWS CodePipeline을 사용할 것이다. 그 아키텍처는 아래 그림과 같다.

 

 

 

 

사전조건

1. html 서비스를 위한 정적 컨텐츠 준비(html, css, js, image)
    - 별도로 준비하기 힘들다면 간단한 파일이라도 하나 만들어서 테스트하자. (e.g. index.html등)

2. CodeCommit Repository 구성 및 인증 방식 선택
    - 이전에 올린 포스팅을 참고해 AWS AIM 계정과 CodeCommit에 Repository를 구성하고 그 접근을 위한 인증방식을 만들도록 한다.

Github대신 AWS의 CodeCommit을 사용해 보자 - HTTPS 인증 방식

3. 이 포스팅에서는 2.의 링크에서 만들었던 octankbank_web을 예로 들어 설명할 예정이다.

    - 내가 사용하는 octankbank_web의 파일 구성은 다음과 같다.(참고로만 보자)

octankbank_web
├── account
│   └── view
│       ├── createAccount.html
│       ├── deposit.html
│       ├── retrieveTransactionHistory.html
│       └── withdraw.html
├── customer
│   └── view
│       ├── createCustomer.html
│       ├── retrieveCustomer.html
│       └── retrieveCustomerCQRS.html
├── index.html
├── main.html
├── octankbank_web.iml
├── resource
│   └── js
│      ├── account
│      │   ├── createAccount.js
│      │   ├── deposit.js
│      │   ├── retrieveTransactionHistory.js
│      │   └── withdraw.js
│      ├── constant.js
│      ├── customer
│      │   ├── createCustomer.js
│      │   ├── retrieveCustomer.js
│      │   └── retrieveCustomerCQRS.js
│      └── transfer
│          ├── btobTransfer.js
│          ├── transfer.js
│          └── transferHistory.js
└── transfer
    └── view
        ├── btobTransfer.html
        ├── images
        │   └── favicon.html
        ├── retrieveTransferHistory.html
        └── transfer.html

 

4. 개인 PC에 다음과 같은 준비가 되어 있어야 한다.

    - git 설치

    - html 편집을 위한 IDE(옵션)

 

 

순서

1. 로컬PC에 Git 레파지토리 구성 및 CodeCommit 리포지토리 원격 연결

2. S3에 정적 컨텐츠 서비스를 위한 버킷 생성

3. AWS CodePipeline를 이용한 배포 파이프라인 생성

4. 인터넷 웹브라우저를 통한 접속

5. 맺으며,

 

 

로컬 PC에 GIT 레파지토리 구성 및 CodeCommit 리포지토리 원격 연결

본인이 준비한 정적컨텐츠의 루트디렉토리에서 다음과 같이 git 명령어를 통해 정적컨텐츠를 위한 레파지토리를 만들도록 한다.

1. git init

git init

2. git add .

git add .

3. git commit -m "first commit"

git commit -m "first commit"

 

4. 사전조건의 2.에서 만들었던 CodeCommit Repository를 AWS콘솔>개발자 도구>CodeCommit>리포지토리로 찾아 들어가 선택한 후 생성한 인증방식의 URL을 복제하도록 한다. 여기에서는 HTTPS 인증 방식을 사용하기로 가정한다.

 

5. 다음의 명령어로 로컬PC의 git repository와 원격의 CodeCommit의 Respository(e.g. octankbank_web)를 연결한다.

git remote add origin [복사한 CodeCommit Remote HTTPS URL]

git remote add origin https://git-codecommit.ap-northeast-2.amazonaws.com/v1/repos/octankbank_web

 

6. 이제 소스를 push 해보자

git push origin master

이때 만약 사용자 ID와 패스워드를 묻는다면 위의 사전조건의 2.에서 만들었던 AIM 계정의 인증방식을 만드는 과정에서 다운 받았던 csv 파일의 사용자id와 패스워드를 입력하도록 한다.

 

7. 업로드된 소스파일을 CodeCommit의 Repository에서 확인해 보자

 

 

S3에 정적 컨텐츠 서비스를 위한 버킷(bucket) 만들기 및 정적 컨텐츠 서비스 설정

이제 AWS의 S3가 실제 웹서버 역할을 할 수 있도록 설정을 하도록 해보자. S3에 버킷을 만들고 그 버킷이 웹서버 역할을 할 수 있도록 설정하면 된다.

 

1. AWS콘솔 > Amazon S3 > 버킷 > 버킷 만들기

액세스 차단의 경우 "모든 퍼블릭 액세스 차단" 버튼을 해제한다. (주위: S3의 퍼블릭 액세스 차단은 매우 중요한 보안 기능중 하나이다. 실제 서비스를 진행한다면 반드시 S3에 대한 모든 퍼블릭 액세스 접근을 차단해야 하는 것이 맞다. 다만 여기에서는 테스트를 위해 임시적으로 차단 해제를 하도록 할 것이며 이 테스트가 끝나면 반드시 해당 옵션을 다시 켜주도록 한다.)

 

2. AWS웹콘솔> Amazon S3 > 버킷 > [본인이 위에서 만든 버킷명, e.g. octankbank-euideok-bucket-01] > 속성 > 정적 웹 사이트 호스팅 > 편집 > 정적 웹사이트 호스팅 활성화 체크

이렇게 해서 S3에 대한 설정을 완료했다.

 

 

AWS CodePipeline을 이용한 파이프라인 생성

AWS의 CodePipe라인은 배포를 위한 파이프라인을 생성해 준다. 우리가 여기서 테스트하는 시나리오는 로컬 PC의 로컬 git에 소스가 커밋되고 그 결과를 CodeCommit에 push하게 되면 CodePipeline이 이를 감지해 웹서버 역할을 하는 S3의 버킷에 변경된 소스를 업데이트 할 수 있도록 하는 것이다.

 

먼저 http://console.aws.amazon.com/codesuite/codepipeline/home 에 로그인하도록 한다.

AWS 콘솔 > 개발자 도구 > CodePipeline > 파이프라인 > 파이프라인 생성 클릭

새로운 이름의 파이프라인을 설정하도록 한다. 나는 여기에서 octankbank_web-pipeline이란 이름으로 신규 파이프라인을 하나 생성했다. 서비스 역할은 '새 서비스 역할'을 선택하고 역할 이름은 자동으로 생성되는 역할 이름을 그대로 사용하도록 한다. 그리고 다음 버튼을 클릭한다.

 

소스 스테이지 추가 단계에서는 소스 공급자로 AWS CodeCommit을 선택하고 리포지토리 이름 항목에서 위에서 만든 CodeCommit의 Repoistory를 선택해준다. 나는 여기서 octankbank_web을 선택했다. 브랜치 이름은 로컬PC의 git에서 만든 배포를 원하는 브랜치명을 선택해 준다. 변경 감지 옵션에 Amazon Cloudwatch Events(권장)을 선택한다. - 이 옵션을 선택하면 CodeCommit에 Push되는 소스를 자동으로 CloudWatch가 Events로 감지하고 이 이벤트 감지가 발생했을때 CodePipeline이 자동으로 작동하게 된다. 출력 아티팩트 형식은 기본값을 선택한 후 다음을 클릭한다.

 

우리는 테스트를 위해 순수 html과 css 그리고 js를 업로드하고 있기 때문에 별도의 빌드가 필요하지 않다. 따라서 빌드 스테이지 추가는 '빌트 스테이지 건너뛰기'를 선택해 생략하도록 한다. 진짜로 건너뛰겠냐는 추가 질문에 확답하고 이 단계는 넘어간다.

 

다음 배포 스테이지 추가 단계에서 배포 공급자로 'Amazon S3'를 선택하고 리전과 버킷을 선택한다. 버킷은 위에서 S3에서 웹서버 역할을 위해 만들었던 버킷을 선택하도록 한다. 배포 경로는 비칸으로 두되 '배포하기 전 파일 압축 풀기' 체크 박스를 반드시 체크하도록 한다. 그리고 다음 버튼을 클릭한다.

 

모든 입력과 선택이 완료되었으면 리뷰창이 뜰 것이고 별 이상이 없다면 다음 버튼을 클릭해 파이프라인 생성을 완료하도록 한다.

정상적으로 완료되었다면 아래의 그림과 같이 CodeCommit에 입력된 소스를 S3의 버킷에 자동으로 배포하는 파이프라인이 작동하게 될 것이다. 

 

모든 작업이 완료되었다면 AWS 관리콘솔 > Amazon S3 > 버킷 > [위에서 생성한 버킷명]을 클릭해 업로드 되어 있는 소스를 확인하도록 한다.

 

 

인터넷브라우저를 통한 접속

이제 외부에서 브라우저를 통해 접속해 보도록 하자

AWS콘솔 > Amazon S3 > 버킷 > [위에서 만든 버킷명]을 클릭하고 접속하면 아래의 그림과 같이 보인다.

여기서 속성 탭을 클릭하고 들어간다.

 

마우스를 스코롤하고 내려가면 정적 웹 사이트 호스팅이란 화면이 보이고 '버킷 웹 사이트 엔드포인트'라는 외부 접속 URL이 보이게 된다. 해당 URL을 클릭하게 되면 웹브라우저를 통해 외부에서 접속 가능하다.

 

맺으며,

이제 로컬PC에서 웹페이지를 수정한 후 git push를 통해 원격의 AWS CodeCommit에 소스를 push해보자 그리고 CodePipeline이 정상적으로 CodeCommit에 push된 변경된 소스를 S3의 버킷에 반영하는지 확인해 보도록 한다.

 

 

이상으로 정적 웹 컨텐츠를 CodeCommit과 CodePipeline을 통해 S3 bucket에 업로드하고 해당 bucket이 웹서버 역할을 할 수 있도록 하는 방법에 대해 알아 보았다.

 

이번 포스팅은 여기까지 끝~