Angular - Build Docker Image Using Github Action ( Feat. ECR )

 얼마전까지 백엔드만 겁나 파서 백엔드 마스터가 되어야지! 라고 생각했다. 근데 요즘들어서 다시 백엔드만 해가지고는 개발 실력 성장에 한계를 느껴서 또 다시 생각이 바뀌고 있다.

그리고 역시 프론트는 재미있구나,,! 몇년 전까지만 해도 React, Angular, Vue 가 삼대장이라 불리는 만큼 강세였는데, 요즘에는 또 춘추전국 시대 같다.

Svelte 니 lit-element 니, Stencil 이니 하믄서 처음 보는 것들이 계속 나온다. ㅎㅎ 
이제 겨우 React, Angular, Vue 기초만 잠깐 맛보았는데 ㅎㅎ

 예전의 3대장을 맛보다가, Angular 에 꽂혔는데, 이유는 바로 TypeScript 다. Angular 는 TypeScript 기반이다. 

JS 자체가 워낙 Type 이 약하다 보니, 이게 number 인지 string 인지 참... 곤란한 경험을 한 적도 많다.

Interface 설계 시 정확한 Type 계약을 하지 않고, 더욱이 JS 를 잘못 사용하면 지옥이 열리는 것을 경험해서 그런가 더욱이 TypeScript 가 내겐 끌렸다. ㅎㅎ

Angular 로 프론트를 개발하고, Spring Boot 로 백엔드를 개발을 요즘하고 있다. 개발하고 테스트하고 운영하려면 배포를 해야되는데, 음.. 어떻게 하는것이 좋을까 고민도 많이 했다.

그러다가, AWSKRUG 에다가 아래와 같이 조언을 구해보았다.




친절한 twkiiim 님이 나의 질문에 너무너무 친절하게 도움을 주셨다. ㅎㅎ

나의 질문에서 알 수 있듯이, 일단 수동으로 ng build --prod 를 통해서 dist 밑에 static files 들을 Spring Boot resources/static 밑에 우겨놓고 Jenkins 에서 Spring Boot 만 jar 로 build 해서 배포하는 반수자동(?) 을 했었는데.. 

이러한 상황에서 좋은 방법을 찾아야했다.

twkiiim 님의 답변을 정리해보자면 아래와 같다.

1. Only CSR 이면 S3 + CloudFront 조합은 좋다.

2. Spring Boot 와  Angular 는 독립적으로 관리해야지 확장성이 있다.

3. EB 커스터마이징 비용을 생각하자.

4. Docker 를 사용하더라도 역시 독립적으로 관리하자.


그래서 나의 결론은 Docker 를 이용해서 각각의 Image 를 build 하고, ECR, ECS 를 사용하기로 결정했다.

서두가 길었는데, 그래서 이번글에서 정리할 내용은 Github Action 을 이용하여 Angular 프로젝트의 Docker Image 를 Build 하고 ECR 에 Push 하는 것 까지다.

우선 Github Action yml 파일을 작성해보자.

master 브랜치에 push 나 pull_request 가 trigger 다.


job 은 하나로 Docker Image 를 Build 하고 ECR 에 Push 한다. 이를 위해서는 ECR 이 존재해야 되고, 해당 ECR 에 올바른 IAM User 가 있어야 한다. 해당 IAM User 의 Access key 와 secret key 는 해당 repository 의 Settings > Secrets 에 미리 설정을 해주면 된다.



그리고 또한 중요한 Dockerfile 을 작성한다.
node base image 를 이용하여 Angular 프로젝트를 빌드하고,
nginx base  image 를 이용하여 build 한 file 들을 올린다.


이게 전부다. ㅎㅎ 아래는 성공한 결과




ECR 에도 정상적으로 image 가 push 되었다.


자 그러면, local 에서 aws cli 로 방금 push 이미지를 pull 해서 run 해보자.

먼저 아래 명령어로 원하는 ECR 에 인증한다.

aws ecr get-login-password --region ap-northeast-2 | docker login --username AWS --password-stdin {aws-account}.dkr.ecr.ap-northeast-2.amazonaws.com/angular-front-demo:latest

그리고 해당 image 를 pull 하자.

docker pull {aws-account}.dkr.ecr.ap-northeast-2.amazonaws.com/angular-front-demo:lastest

정상적으로 pull 했는지 docker images 명령어를 통해서 확인.



마지막으로 run 해보자. nginx 를 이용했으니 port 는 80 port 를 사용.



그리고 접속해보자. http://127.0.0.1 
성공!! ㅎㅎ


마지막으로 docker ps -a 명령어로 container 확인 및, docker logs 명령어를 통해서 log 확인



이번 글은 여기서 마무리하겠다.

향후에 spring boot 도 dockerize 하여 ECS deploy 도 정리해보겠다.

마지막으로 해당 angular repository

댓글

이 블로그의 인기 게시물

About JVM Warm up

About idempotent

About Kafka Basic

About ZGC

sneak peek jitpack

Spring Boot Actuator readiness, liveness probes on k8s

About Websocket minimize data size and data transfer cost on cloud

About G1 GC

대학생 코딩 과제 대행 java, python, oracle 네 번째