프런트엔드와 배치 애플리케이션 빌드와 배포

유유·2022년 3월 13일
0

완성 아키텍처

  • 본 포스팅은 클라우드 네이티브를 위한 쿠버네티스 실전 프로젝트 내용을 기반으로 작성 되었습니다.
  • 소스 코드를 아래 깃헙에서 다운 받은 후 작업해주세요.https://github.com/yuran777/k8s-aws-book.git

5. 프런트엔드 애플리케이션 빌드와 배포

5.1 Node.js 설치

https://nodejs.org/en/ 에서 LTS버전 다운로드

5.2 프런트엔드 애플리케이션 빌드

# 프런트엔드 소스코드가 있는 디렉토리로 이동
cd k8s-aws-book/frontend-app
# 라이브러리 다운로드
npm install

5.2.1 API 기본 URL 확인

kubectl get all 
NAME                          TYPE           CLUSTER-IP      EXTERNAL-IP                                                                   PORT(S)          AGE
service/backend-app-service   LoadBalancer   10.100.91.195   00000-175018810.ap-northeast-2.elb.amazonaws.com   8080:32543/TCP   5d3h

5.2.2 빌드 실행

BASE_URL=<EXTERNAL-IP>8080 npm run build

빌드 결과 파일은 dist 디렉토리 아래에 출력됨
이 디렉토리를 웹 서버에 저장하면 프런트엔드 애플리케이션을 공개할 수 있음

5.3 S3 버킷과 CloudFront 배포 생성

k8s-aws-book/eks-env/30_s3_cloudfront_cfn.yaml 로 스택 생성
스택 이름: eks-work-frontend
BucketSuffix: 마음대로

5.3.1 콘텐츠 업로드

aws s3 sync dist s3://eks-work-frontend-yrkim \                                    ok  04:48:36 PM
--delete --include "*" --acl public-read

5.3.2 CloudFront 배포 캐시 무효화

오래된 캐시가 보이지 않게 하기 위해 캐시 무효화를 한다
Distribution Id 값은 eks-work-frontend 스택의 출력 부분에서 확인 가능

aws cloudfront create-invalidation --distribution-id <Distribution ID값> \              INT  9s  04:52:22 PM
--path "/*"

els-work-frontend 스택 부분 출력에 있는 cloudfront 주소로 테스트 페이지 접속 가능

6. 배치 애플리케이션 빌드와 배포

6.1 배치 애플리케이션 빌드와 컨테이너 이미지 생성

6.1.1 소스 코드 빌드

cd k8sbook/batch-app
./gradlew clean build

코드 빌드 완료시 libs 아래 .jar 파일이 만들어짐

6.1.2 ECR 리포지터리 생성

이전에 backend 리포지터리 생성했을때와 동일하게 Amazon ECR>
리포지토리 > '리포지토리 생성'
리포지터리 이름: k8sbook/batch-app

6.2 컨테이너 이미지 푸시

6.2.1 ECR 로그인

로그인 한지 12시간이 되지 않았다면 할 필요 없음

aws ecr get-login-password --region ap-northeast-2 | \                           ok  33s  05:09:59 PM
docker login --username AWS --password-stdin \
<aws_acount_id>.dkr.ecr.ap-northeast-2.amazonaws.com

6.2.2 컨테이너 이미지 태그 생성과 푸시

docker tag k8sbook/batch-app:1.0.0 <aws_acount_id>.dkr.ecr.ap-northeast-2.amazonaws.com/yuran/batch-app:1.0.0

docker push <aws_acount_id>.dkr.ecr.ap-northeast-2.amazonaws.com/yuran/batch-app:1.0.0 

6.3 s3 버킷 생성과 설정

6.3.1 s3 버킷 생성과 설정

k8s-aws-book/eks-env/40_s3_batch_cfn.yaml 로 스택 생성
스택 이름: eks-work-batch
BucketSuffix: 마음대로

6.3.2 s3 컨피그맵 생성

BUCKET_SUFFIX=eks-work-batch-yrkim \                                                 INT  05:21:23 PM
envsubst < 41_config_map_batch_k8s.yaml.template | kubectl apply -f -

6.3.3 s3 접속용 액세스 키 확인 및 시크릿 생성

  • 액세스 키 확인
    AWS Systems Manager > 파라미터 스토어

  • 시크릿 생성

AWS_ACCESSKEY=<액세스키> \                                INT  eks-work/eks-work kube  05:21:23 PM
AWS_SECRETKEY=<비밀 액세스키> \
envsubst < 42_batch_secrets_k8s.yaml.template | kubectl apply -f -

6.4 입력 파일 업로드

aws s3 sync dist s3://eks-work-frontend-yrkim \                                      INT  05:26:37 PM
--delete --include "*" --acl public-read

6.5 배치 애플리케이션 배포

6.5.1 DB 내용 확인


sh-4.2$ psql -U mywork -h <rds 엔드포인트 주소> myworkdb
Password for user mywork:
myworkdb=> select * from location limit 50;
 location_id |  location_name  | region_id |                                         note
-------------+-----------------+-----------+--------------------------------------------------------------------------------------
           1 | 테디베어 뮤지엄 |         9 | 테디베어의 역사는 물론 예술, 세계여행 등의 테마를 제공하는 테마 뮤지엄 브랜드입니다.
           2 | 성산 일출봉     |         9 | 유네스코 세계자연유산에 등재된 제주도의 랜드마크.
(2 rows)

6.5.2 배치 애플리케이션 배포

크론잡 수행

ECR_HOST=<aws_account_id>.dkr.ecr.ap-northeast-2.amazonaws.com \           ok  eks-work/eks-work kube  05:38:13 PM
envsubst < 43_cronjob_k8s.yaml.template | \
kubectl apply -f -
kubectl get all
NAME                      SCHEDULE      SUSPEND   ACTIVE   LAST SCHEDULE   AGE
cronjob.batch/batch-app   */5 * * * *   False     14       4m45s           69m

6.5.2 배치 애플리케이션 실행 후 확인


sh-4.2$ psql -U mywork -h <rds 엔드포인트 주소> myworkdb
Password for user mywork:
myworkdb=> select * from location limit 50;
profile
하이

0개의 댓글