[AWS 자동 배포 시스템] 3. Jenkins를 활용한 S3 배포

Jenkins Pipeline을 사용하여 S3에 웹 서버를 배포하려고 한다.
그냥 index.html 한개를 올리기에는 너무 간단하여 Vue를 이용하여 빌드 후 배포한다.
Jenkins와 node가 설치되어 있다고 가정하에 진행한다.


먼저 빌드를 하기 위한 IAM 계정을 만들자.
추후 ECS 배포를 위한 권한(AmazonEC2ContainerRegistryFullAccess, AmazonS3FullAccess, AWSCodeDeployRoleForECS, AWSCodeDeployFullAccess)까지 추가하겠다.
발급 받은 엑세스 키 ID와 비밀 엑세스 키를 저장해놓자.
Jenkins가 설치된 곳에서 사용할 예정이다

 

AmazonECS_FullAccess도 추가하자.

 

 

Jenkins가 설치된 os에 jenkins 계정으로 들어가자.
필자는 ubuntu 20.04에 설치되어있다.

awscli가 설치가 안되어 있으면 설치 후 aws 계정을 등록하자.

# apt install -y awscli # aws configure

아래와 같이 발급받은 Access Key Id, Secret Accesy Key와 region name을 설정하자.

다음으로 github 개발자 access token을 발급 받자.

발급받은 토큰을 Jenkins Global credentials에 추가하자.

이제 파이프라인을 사용하여 Jenkins를 구축해보자.
스크립트를 정리해보면 첫번째로 Git에서 master 브랜치를 복사해온다.
그 다음으로 복사한 폴더로 이동해서 vue를 production으로 빌드한다. 편의상 build 테스트는 제외했다.
마지막으로 s3 버켓을 파일들을 삭제 후 dist 폴더의 파일들을 복사한다.

pipeline { 
	agent any 
    
    environment { 
    	BRANCH = 'master' 
    } 
    
    stages { 
    	
        stage ('Git Clone'){ 
        	steps { 
            	git branch: BRANCH, 
                credentialsId: 'GIT_ACCOUNT', 
                url: 'https://github.com/alsdud154/front-velnova-me.git' 
            } 
        } 
        
        stage('Npm Build') { 
        	steps { 
            	dir('front-velnova-me'){ 
                	sh "npm install" 
                    sh "CI=false npm run build" 
                } 
            } 
        } 
        
        stage('Deploy') { 
        	steps{ 
            	sh "aws s3 sync ./dist s3://front.velnova.me --delete --profile default"
            	sh 'aws cloudfront create-invalidation --distribution-id E32BFE6SSECM0S --paths "/*"'
            } 
        } 
    } 
}

 

정상적으로 배포가 되었다.
CloudFront 캐쉬로 인해 반영되기까지 시간이 좀 걸릴 수 있다.

기다리기 어렵다면 CloudFront의 캐쉬 무효화를 사용해보자.
다만 비용이 발생할 수 있다.

샘플 vue를 올려놓겠다.
받아서 git에 올리면 된다.

vue.zip

0.25MB