Sprint - 클라이언트 배포 파이프라인

#학습 목표

• AWS에서 제공하는 서비스를 이용하여 정적 웹 페이지를 자동 배포 및 호스팅하는 파이프라인을 구축

 

# 조건

• 실습에 필요한 소스 코드가 GitHub 리포지토리에 저장되어 있기 때문에, Source 단계 구성 실습에서 CodeCommit 서비스 대신 GitHub을 이용
• 배포 과정을 진행하며 다양한 오류와 문제를 직면하게 될 것 이때 자기 주도적으로 문제를 해결하는 경험을 쌓는 것이 나중에 실무에서 큰 자산이 될 것! 아래 안내 사항을 참조하여 오류 발생 시 문제 해결 과정을 진행
  • AWS 공식 문서와 log 파일 기록을 참조하여 해결 방안을 찾아보기
  • 실습 과정에서 생성한 인스턴스, 파이프라인, 서비스 애플리케이션을 삭제하고 전체 과정을 다시 시도해 보기
  • AWS 계정 혹은 과금과 관련된 문제인 경우, AWS 고객센터에 문의하는 것이 더욱더 효과적

 

#해결 과제

💡 AWS 개발자 도구 서비스를 이용해서 배포 자동화 파이프라인을 구축해야 함

1. CodePipeline을 이용해서 각 단계를 연결하는 파이프라인을 구축
2. Source 단계에서 소스 코드가 저장된 GitHub 리포지토리를 연결
3. Build 단계에서 CodeBuild 서비스를 이용하여 수동으로 진행했던 build 과정을 자동으로 진행
4. Deploy 단계에서 결과물을 S3 버킷에 자동으로 전달

💡나중에 변경 사항을 GitHub 리포지토리에 반영했을 경우, 배포 과정이 자동으로 진행되어야 함

💡배포 과정에서 오류가 생길 경우, log 파일을 참조하여 문제점을 확인할 수 있어야 함

 

#실습 자료

레파지토리 

 

#과제 항목별 진행 상황

✏️ S3에 버킷을 생성하고, 정적 웹 호스팅용으로 구성

Step 1 : S3 버킷 생성

 

Step 2 : S3를 정적 웹 호스팅용으로 구성

1. AWS Management Console에 로그인한 후 https://console.aws.amazon.com/s3/에서 Amazon S3 콘솔 > 버킷 목록에서 정적 웹 사이트 호스팅을 사용 설정하려는 버킷의 이름을 선택
2. [속성(Properties)]을 선택
   •  

     

3. 정적 웹 사이트 호스팅(Static website hosting)에서 편집(Edit)을 선택
4. 이 버킷을 사용하여 웹 사이트를 호스팅를 선택
5. 정적 웹 사이트 호스팅에서 사용을 선택
6. 인덱스 문서(Index document)에 인덱스 문서 이름을 입력(일반적으로 index.html)

   • 

   • 인덱스 문서 이름은 대소문자를 구분하며 S3 버킷에 업로드하려는 HTML 인덱스 문서의 파일 이름과 정확히 일치해야하며, 웹 사이트 호스팅용 버킷을 구성하는 경우 인덱스 문서를 지정해야 루트 도메인이나 임의의 하위 폴더로 요청이 전송되면 Amazon S3가 이 인덱스 문서를 반환함 (인덱스 문서 구성 섹션을 참고)
   • 4XX 클래스 오류에 대한 사용자 지정 오류 문서를 제공하려면 [오류 문서(Error document)]에 사용자 지정 오류 문서 파일 이름을 입력
   • 오류 문서 이름은 대소문자를 구분하며 S3 버킷에 업로드하려는 HTML 오류 문서의 파일 이름과 정확히 일치해야 함, 사용자 지정 오류 문서를 지정하지 않았는데 오류가 발생하면 Amazon S3에서 기본 HTML 오류 문서를 반환함 (사용자 지정 오류 문서 구성을 참고)
   • (선택 사항) 고급 리디렉션 규칙을 지정하려면 리디렉션 규칙(Redirection rules)에 JSON을 입력하여 규칙을 설명 (ex.  요청의 특정 객체 키 이름 또는 접두사에 따라 조건부로 요청을 라우팅 가능. 자세한 내용은 고급 조건부 리디렉션을 사용하도록 리디렉션 규칙 구성 섹션을 참고)
7. [변경 사항 저장(Save changes)] 선택
8. Amazon S3는 버킷에 대한 정적 웹 사이트 호스팅을 지원하며, 페이지 하단의 정적 웹 사이트 호스팅(Static website hosting)에 버킷의 웹 사이트 엔드포인트가 표시

   • 

9. 정적 웹 사이트 호스팅에서 엔드포인트를 기록
10. 엔드포인트는 버킷의 Amazon S3 웹 사이트 엔드포인트 버킷을 정적 웹 사이트로 구성한 후 이 엔드포인트를 사용하여 웹 사이트를 테스트 가능
11. S3 버킷에서 권한 > 버킷 정책 > 편집 > 정책생성기 클릭해 정책을 만들고 적용

    • 

      

      

 

Step 3 : S3에 Pipeline 사용하기 설정

1. [Properties] 탭에서 [Versioning]을 선택 [Enable versioning]을 선택한 다음 [Save]를 선택
2. 버전 관리가 활성화되면 Amazon S3는 버킷에 있는 모든 객체의 모든 버전을 저장
3. [Permissions] 탭에서 기본값을 그대로 두기(S3의 버킷 및 객체 권한에 대한 자세한 내용은 정책에서 권한 지정 단원을 참조)
4. Amazon S3 콘솔에서 버킷에 파일을 업로드
   • 업로드를 선택
   • 파일을 끌어서 놓거나 파일 추가를 선택하고 파일 찾기
   • 업로드를 선택

 

Step 3 : 프로젝트 최상위 디렉토리에서 buildspec.yml 파일 생성

version: 0.2

phases:
  pre_build:
    commands:
      - cd client
      - npm install
  build:
    commands:
      - npm run build

artifacts:
  files:
    - '**/*'
  base-directory: 'client/build' # 특수문자가 있을 시 ''로 감싸주어야 함
  #discard-paths: yes # 디렉토리는 포함하지 않는 경우

 

Step 4 : CodePipeline에서 파이프라인 생성

1. 파이프라인 설정 선택 : 파이프라인명, 서비스 역할 선택 후 다음

2-1. 소스 스테이지 추가 : 소스 공급자 선택

2-2. 소스 스테이지 추가 : gitHub앱에 연결 생성

2-3. 소스 스테이지 추가 : gitHub에 연결

2-4. 소스 스테이지 추가 : gitHub에 연결완료 후 소스 스테이지 추가 설정 완료

3-1. 빌드 스테이지 추가 : 빌드 설정 

3-2. 빌드 스테이지 추가 : 프로젝트 생성

4-1. 배포 스테이지 추가 : 배포 설정

5. 파이프라인 설정 확인 후 생성, S3에 파이프라인 생성된 것 확인

 

Step 5 : 개발 환경에서 실제로 add, commit, push시 빌드가 이루어지는지 확인

$ git add .
$ git commit -m "modify : buildspec.yml"
[main 4b9d44b] modify : buildspec.yml
 1 file changed, 1 insertion(+), 1 deletion(-)
$ git push

 

Step 6 : 개발자도구 CoudBuild에서 로그 확인 후 S3 객체에 정상적으로 빌드 파일 업로드 되었는지 확인

 

✏️ 실습 완료 시 보이는 화면

Step 1 : 실습을 성공적으로 마무리하고 S3 버킷의 엔드포인트 주소(http://버킷이름.s3-website.ap-northeast-2.amazonaws.com)로 접속

 

#References

https://docs.aws.amazon.com/ko_kr/codepipeline/latest/userguide/tutorials-simple-s3.html

자습서: 간단한 파이프라인 생성(S3 버킷) - AWS CodePipeline

https://docs.aws.amazon.com/ko_kr/codebuild/latest/userguide/getting-started-create-build-spec-console.html

2단계: 빌드스펙 파일 생성 - AWS CodeBuild

https://docs.aws.amazon.com/ko_kr/codebuild/latest/userguide/build-spec-ref.html

에 대한 빌드 사양 참조 CodeBuild - AWS CodeBuild