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 에 미리 설정을 해주면 된다.
그리고 해당 image 를 pull 하자.
docker pull {aws-account}.dkr.ecr.ap-northeast-2.amazonaws.com/angular-front-demo:lastest
.png)
.png)
댓글
댓글 쓰기