brunch

매거진 코딩 삽질 방지

라이킷 1 댓글 1

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by 오준석 Jun 30. 2018

Angular6 + gitlab + CI

Angular 삽질기

당분간 앵귤러로 프로젝트를 하면서 여러 삽질이 있을 예정이다. 오늘은 환경 설정에서 하루를 날려먹은 기념으로 삽질기를 작성해 두려고 한다. 이렇게라도 남겨 놔야 나중에 또 고생하지 않을 것 같다.

Angular란?

앵귤러는 구글에서 개발한 웹 프레임워크이다. 대항마로는 페이스북의 React 그리고 에반 유의 Vuejs 가 있다. 예전에는 React가 인기였다가 최근에는 접근성이 쉬운 Vuejs가 엄청난 인기인 것 같다. 앵귤러는 국내에서는 별로 인기가 없는 것 같다.

Angular6

현재 최신 버전은 6이다. 앵귤러1은 Angularjs 라고 부르고, 2 부터 Angular 라고 부른다. 1과 2는 완전히 다른 언어이다. 나는 1을 공부했었는데 Vuejs 홈페이지에 들어가면 소개 영상에 나오는 아저씨한테 분명히 앵귤러를 배웠었다. 지금은 저 아저씨가 Vuejs를 가르치고 있다. 대세는 Vuejs인가 싶다.

앵귤러를 선택한 이유

어찌되었건 당장 앵귤러로 프로젝트를 하게 되었기 때문에 부랴부랴 기술 검토를 하고 있다. 본래 안드로이드 개발자였기 때문에 웹 쪽의 무식자이고 마지막으로 접했던 웹 기술은 2007년에 JSP와 스프링(버전은 기억 안남)을 다뤄 보았다. 리액트, 앵귤러, 뷰js 모두 검토해 본 결과 어쨌든 모두 다 좋다. 나한테 잘 맞는 것을 골라 쓰면 될 것 같다. 일단 리액트는 안 맞는다. 이유는 없는데 안 맞는다. 뷰js는 개발 환경이 뭔가 잘 안 맞는다. 자동 import가 안 된다. 나만 그런것인가. 앵귤러는 타입스크립트가 자바랑 비슷하고 개발 환경도 완벽히 셋팅이 되어서 그런지 편하다. 그래서 앵귤러를 선택했다.

앵귤러를 공부에 도움 되는 것들

공부를 해야 하는데 최신 버전인 6 버전에 대한 책은 아직 없고 5에 대한 책도 거의 없다. 지금은 루비페이퍼의 Angular Development TypeScript에 의존하고 있고 번역서인데 책 내용이 상당히 좋다.

그 다음 구매한 이북이 The Angular Firebase Survival Guide이다. 80페이지 분량의 이북인데 파이어베이스 기반의 베스트 프렉티스를 쉽게 익힐 수 있다. 현재는 이 두 권과 개발자 문서를 참고하고 있다. 개발자 문서는 다행히 일부 일본어화 되어 있어 일본판을 보고 있다. 한국어화는 시작도 안 했다. Vuejs가 한국어 문서를 지원하는데 이 부분은 아쉽다.

배포 자동화

gitlab에 프로젝트를 생성하였다. 깃랩이 CI/CD를 지원하는데 한번도 사용해 보지 않아서 하루 종일 삽질하다 어느 정도 정리가 되었다. CI는 지속적 통합인데 푸시를 하면 자동으로 빌드, 테스트, 배포를 수행하도록 셋팅하려고 했다.

최종적으로는 빌드와 배포를 한번에 수행하는 deploy만 남게 되었다. 프로젝트 루트 디렉토리에 .gitlab-ci.yml 파일을 생성하고 CI에 대한 설정을 한다. 이 문법?은 깃랩 고유의 문법인 듯 하다.

---------------------------

.gitlba-ci.yml

image: node:latest

cache:

paths:

- node_modules/

stages:

- deploy

deploy:

stage: deploy

environment:

name: development

script:

- npm install

- npm run build

- npm run deploy

only:

- master

---------------------------

node 최신 버전의 도커 이미지를 기반으로 deploy 라는 스테이지를 정의한다. deploy 스테이지는 development 환경을 참조하는데 이것은 내가 파이어베이스 호스팅에 배포하기 위해 배포 Key를 깃랩의 환경설정에서 미리 설정했고 development라는 환경으로 저장했기 때문에 이를 참조하는 것이다. 이 스테이지는 npm install로 라이브러리를 설치하고, npm run build 로 배포용 빌드를 한다. npm run deploy는 파이어베이스에 배포 Key로 배포하는 것을 작성해 두었다. 이 동작은 master 브랜치에서만 동작한다.

처음엔 빌드, 테스트, 배포의 3단계 파이프라인을 구성했다가 앵귤러의 테스트 프로그램인 karma가 크롬 브라우저가 있어야 돌아가고 브라우저 없이 테스트 돌리기가 엄청 귀찮아서 다 빼버리고 빌드와 배포를 하나로 묶어버렸다.

이제 master 브랜치에 푸시를 하면 빌드가 되고 배포까지 이루어 진다.

다음 블로그를 참고 하였다. http://tphangout.com/angular-5-continuous-integration-with-gitlab/

keyword