배포)프론트 S3 배포 완료

김태성·2024년 8월 29일

개인 프로젝트-1

목록 보기
31/53
post-thumbnail

시작 전 추가사항

ip가 자꾸 바뀌길레 뭔가 확인했더니
인스턴스 종료 후 재부팅 할때 ip주소가 변경이 된다.
그래서 탄력적 ip를 생성해서 할당해 주었다.

Jenkins - S3

이전에 WebHook을 통해서 데이터를 받아왔다.
이것을 배포하려고 하는데, 일단 S3에 프론트부터 배포해 보겠다.

Bucket의 권한을 풀고 설정을 해 주었다.

npm과 node.js를 깔아준다.
react를 build하는데 필요하다.

apt-get install -y nodejs
apt-get install npm -y

이제 파이프라인을 만들어 보자.

pipeline {
    agent any

    stages {
        stage('Build React Application') {
            steps {
                dir('/var/jenkins_home/workspace/HarpSeal_Hook/src/main/frontend') {
                    sh 'npm install'
                    sh 'npm run build'
                }
            }
        }
        stage('Deploy to S3') {
            steps {
                sh 'aws s3 sync /var/jenkins_home/workspace/HarpSeal_Hook/src/main/frontend/build/ s3://harpseal --delete'
                
            }
        }
    }

    post {
        success {
            echo 'Deployment to S3 successful!'
        }
        failure {
            echo 'Deployment to S3 failed.'
        }
    }
}

스크립트는 간단하게 짰다. 근데 간단하게 짜느라 한 10시간 걸린거 같다.
예시를 봐도 뭐가 뭔지 모르겠고 파일을 어떻게 경로 이어줘야 하는지 몰라서 한참 해맸다.

하지만 내가 알게된 것으로 설명을 하자면

dir(path/to/file)
기본적으로 docker 안에 있는 파일이기 때문에 /var로 시작해야 한다.
그리고 지금 만든 파이프라인은 HarpSeal_Front_Deploy인데, hook에서 데이터를 가져와야 함으로
HarpSeal_Hook에서 데이터를 가져오는 것이다.

Deploy
파일을 build 한 곳에 build 파일이 생기는데, 따라서 build 파일도 hook의 경로에 있다.
sh~ 부분으로 데이터를 보내야 하는데, s3 버켓 이름을 적으면 된다.
--delete는 덮어씌우기라고 한다.
이렇게 배포를 해보면


(활활 타는 cpu)
역시나 인스턴스가 터져버렸다.
곰곰히 생각해 보니 나는 인스턴스를 매우 작은걸 쓰고 있다.
그래서 램도 분명히 부족할건데
예전에 공부했던것 중에 쓰레싱이라고 있었다.
레퍼런스 : https://velog.io/@kts5927/크래프톤정글5주차-CSAPP-6장

그러니까 용량이 부족하면 지역성이 박살나버리고, 이로 인해서 심각한 성능 저하를 일으키는게 아닐까 생각했고, 스왑디스크가 가능한지 검색했다.

레퍼런스 : https://ldgeao99-developer.tistory.com/600
역시나 나와 비슷한 고민을 한 글이 있었고, 이를 통해서 스왑디스크를 사용하였다.

(잘 적용이 된 모습)
이제 다시 빌드를 돌리면

Started by user 김태성
[Pipeline] Start of Pipeline
~~~
npm ERR! code ENOTEMPTY
npm ERR! syscall rename
npm ERR! path /var/jenkins_home/workspace/HarpSeal_Hook/src/main/frontend/node_modules/axios
npm ERR! dest /var/jenkins_home/workspace/HarpSeal_Hook/src/main/frontend/node_modules/.axios-ZqqCTaV5
npm ERR! errno -39
npm ERR! ENOTEMPTY: directory not empty, rename '/var/jenkins_home/workspace/HarpSeal_Hook/src/main/frontend/node_modules/axios' -> '/var/jenkins_home/workspace/HarpSeal_Hook/src/main/frontend/node_modules/.axios-ZqqCTaV5'

npm ERR! A complete log of this run can be found in:
npm ERR!     /var/jenkins_home/.npm/_logs/2024-08-30T14_49_52_665Z-debug-0.log
~~~
Finished: FAILURE

code ENOTEMPTY에러가 발생한다.

아까 cpu가 터지길레 강제종료를 한 적이 있었는데, 그로 인해서 오류가 발생했을 수 있다고 판단했다.
따라서


데이터를 청소하고 돌리니


아주 잘 되는 모습을 볼 수 있다.
하지만

fatal error: Unable to locate credentials

권한이 없어서 오류가 나고 잇다.
이제 S3 버킷에 업로드하기 위한 credentials를 추가해야 된다.


필요한 플러그인을 다운로드 하고

credential을 만들고(key는 AWS 오른쪽위 내이름 -> 보안자격증명 -> 액세스 키에서 만들 수 있다.)

 withCredentials([[
                    $class: 'AmazonWebServicesCredentialsBinding', 
                    credentialsId: 'AWSCredentials'
                ]]) {
                    sh 'aws s3 sync /var/jenkins_home/workspace/HarpSeal_Hook/src/main/frontend/build/ s3://harpseal --delete'
                }

credential을 넣어준 뒤 배포를 하면..!


해냈다!

이제 데이터를 바꿔 보자

이랬던 코드를

이렇게 바꾸고 커밋을 하자

url이 잘못 설정되어있어서 안되니 고치로
다시한번 푸쉬를 하면..!

(아 제발....!)

필요없는 함수를 지우고 다시 하면!


완성!


프론트 배포는 약 25프로 정도를 먹는거 같다.

그냥 슥슥 ~하니까 되었다는 식으로 적었는데
2일간 진행되었으며 이제 겨우 감을 잡은 상태다.
상당히 힘들었다.

profile
닭이 되고싶은 병아리

0개의 댓글