CodePipeline으로 누구나 손쉽게 자동 배포(정적 웹 페이지편)

이번 만드는 녀석 개요

GitHub × CodePipeline에서 자동 배포

◯ 추천인

■ 프런트계의 분, web 제작계의 분
■ SPA 공개하고 싶은 분
■ CI/CD로 좌절한 분

준비하는 것

■ GitHub 계정

■ AWS 계정

■ 정적 웹 호스팅을 설정한 S3 버킷

아래가 개인적으로 알기 쉬웠습니다!
· 【참고】AWS S3에서 정적 웹 페이지 호스팅
· 【참고】 독자 도메인을 사용하여 Amazon S3에서 정적 웹 사이트 호스팅

CodePipeline 구축

CodePipeline을 열고 파이프라인 만들기를 선택합니다.

【Step1】 파이프라인 설정을 선택한다

■ 파이프라인 이름
▫️ 알기 쉬운 것이라면 뭐든지 OK
■ 서비스 역할
▫️ 새로운 서비스 역할
■ 롤 이름
▫️자동으로 들어가기

【Step2】소스 스테이지 추가

■ 소스 공급자
▫️GitHub
■ 검색 옵션 변경
▫️GitHub 웹훅(권장)

■ GitHubに接続する 선택


■ GitHub로 Sign in합니다.


■연결 완료! !


■리포지토리
▫️ 자동 배포 대상으로 사용할 리포지토리 선택

■ 브런치
▫️ 대상의 브랜치를 선택(master로 push하면 발화적인)

【Step3】빌드 스테이지를 추가한다

이번에는 사용하지 않으므로 ビルドステージをスキップ

【Step4】 배포 스테이지 추가

■ 배포 공급자
▫️Amazon S3
■ 지역 & 버킷
▫️ 정적 웹 호스팅 설정을 한 S3 버킷
■ 배포하기 전에 파일 추출
▫️체크

【Step5】리뷰

■ 설정 내용을 확인하십시오!

완성! !

배포 스테이지에 설정한 버킷을 보면 제대로 반영되고 있다!


물론 대상의 브런치로 push하면 변경이 반영됩니다!

감상

정적 web라고 하는 일도 있었습니다만 의외로 간단하게 구현할 수 있었다고 생각합니다!
이번에는 설명하지 않았습니다만 CloudFront를 전단에 두는 것으로 독자 도메인을 사용할 수도 있습니다!