[Travic CI] Travis 맛보기 (1) Travis-CI 와 Github Repo와 연동하기

이 글은 Travis CI 맛보기 시리즈의 2부작으로 구성되어 있습니다.

1. Travis-CI 에 가입하고 Github Repo와 연동하고 CI를 맛보자.
2. Travis와 Github를 연동하고 CI 환경을 구축하면 둘 사이에 어떤 일이 일어날까?

서로 내용을 보완하고 있는 관계이므로 한 번 해당 포스팅으로 가서 가벼운 마음으로 읽는 것을 추천드립니다.

---

오늘은 Travis CI 에 대해 가볍게 실습해보며 감을 익혀보는 시간을 갖고자 한다.

사실 이론 설명을 먼저 하고 실습을 진행하는 것이 일반적이고 필자가 좋아하지만, 해당 학습은 특별하게 먼저 실습을 하는 것이 오히려 더 좋겠다 싶은 마음에 먼저 실습을 진행하고 뒤에 설명을 한다.

먼저 실습을 진행하면서 대충 어떤 느낌인지만 감을 잡고 뒤에서는 어떤 일이 일어나는지를 다음 시간부터 알아볼 예정이다.

나는 이 시리즈를 기획하고 공부하면서 되게 재밌게 배웠는데, 여러분에게도 그런 경험이 되었으면 좋겠다.

실습 준비물

실습을 위해 다음과 같은 준비물이 필요하다.

• Travis CI 홈페이지의 계정
• Github 홈페이지의 계정
• Github에 올라가있는 Repository
• (Optional) CRA로 만든 리액트 앱. (옵션)

해당 설명은 필자의 프로젝트로 진행할 예정이기 때문에 필자와 같은 환경을 구축하는 것을 추천한다.

React와 npm으로 구축되어 있는데, 만약 당장 필요한 React와 npm 패키지가 필요하다면 이곳에 들어가서 react를 npm으로 설치하고 시작하는 것을 추천한다.

 

우선 Travis-CI와 Github를 연결하기 위해 각각의 페이지에 회원가입을 미리 진행해주는 것을 추천한다.

순서

1. Travis 회원가입
2. 깃헙 레포 활성화
   • (Travis와 Github를 상호 연결해야하는데, 중요한 것은 해당 레포지토리의 Admin 이어야 가능하다.)
3. travis.yml 파일 추가
   • (Travis CI가 프로젝트를 빌드하기 위해서는 .travis.yml이라는 파일이 해당 레포지토리의 루트에 존재해야 한다.
4. 빌드를 git push 로 실행
   • (.travis.yml 이라는 파일에서 지정된 branch로 push 이벤트가 발생하면 빌드를 실행한다.)

의 순서로 이루어질 예정이다.

시작해보자.

---

Travis 회원가입

우선 Travis 에 회원가입을 수행해야 한다.

만약 회원가입을 진행한다면 Sign UP 버튼을 클릭하고, 회원가입을 마쳤으면 sign in 버튼을 클릭한다.

Travis는 다양한 버전 관리 시스템을 지원한다.

 

원래는 github가 대표적인 VCS 였지만, 이제는 Bitbucket과 Gitlab 를 추가로 지원한다고 한다.

 

하지만 베타 버전이므로 github로 진행하는 것을 추천한다.

Github 레포지토리와 연결

회원가입과 로그인을 수행한 뒤, 상단 네비게이션에서 Dashboard로 들어오면 위와 같은 화면이 나타날 것이다.

 

나는 Dashboard에 모든 레포를 추가해놨기 때문에 저렇게 뜰 것이고 만약 처음이라면 Setting을 해줘야 한다.

 

내 프로필에 Setting 클릭한다.

여기서 Manage repository on Github를 클릭해보자.

 

여기서 2 가지 선택지가 있다.

모든 레포를 허용하는 경우와 특정 레포만 허용하는 경우

1. 특정 레포만 허용하는 경우

특정 레포를 허용하는 경우는 위의 선택지에서 Only Select Repository 를 클릭하고, 내가 원하는 레포를 추가시킨다.

2. 모든 레포를 허용하는 경우

위에서 Only Select Repository가 아닌 All Repository로 모든 레포를 허용하면 다음과 같이 travis-ci로 돌아왔을 때, 왼쪽 대시보드에 나의 github에 있는 모든 레포가 뜬다.

이 말은,

 

나의 모든 레포지토리에 travis.yml 파일이 추가된다면 travis는 이를 CI할 준비를 마치겠다!

 

라는 뜻이다.

---

travis.yml 파일 추가

이제 travis 한테 어떤 행동을 할지 travis.yml을 줘야한다.

그걸 프로젝트 root 에서 .travis.yml 파일 만들면 된다.

 

일단은 비어있는 travis.yml 파일 추가한 다음에 푸시하고 실패하는 경우를 봐보자.

실패했다!

이유는 뻔하다.

travis.yml에 우리가 뭘 해줄지 안 적어서 실패한 경우이다.

이제 성공시키기 위해서 다음과 같이 적어보자.

language: node_js # 언어는 node_js
node_js:
  - "10.14" # node_js에 버전 10.14
before_install: # 패키지를 다운로드 받기 전
  - npm update # npm 패키지를 업데이트
  - cd ./client # client 라는 디렉토리로 이동
branches:
  only:
    - master
notifications: # 성공 실패 여부 알림
  email:
    recipients:
      - xxx@xxx.com

나는 리액트로 만든 프로젝트이므로 language에는 node_js 라고 지정해줄 것이다.

걱정하지 말자 어차피 뒤에서 다 배운다.

당장은 저렇게만 알고 있으면된다.

주의! 여기서 before_install에 보면 cd가 있는데, 이건 나의 디렉토리 구조가 client 폴더 아래에 package.json 파일이 있기 때문에 해준거고 만약 package.json 파일이 루트에 존재한다면 해당 줄은 없어야한다.

git push

이제 위의 파일을 저장하고

그리고 다시 travis 로 보면 노란색으로 바뀌고 검증을 수행

좀 기다리면 결과가 나옴

]

빌드 실패

이유를 찾아보자

좀 아래에 보면 Job Log가 있는데, Job Log로 보니까 "make test" 가 2로 종료되었다고 한다.

 

뒤에 배울 내용이지만 Travis 에서는 0이 아닌 수를 Fail로 보고 오로지 0만 Success로 본다.

그럼 test가 문제가 있다는 소리인데, 이건 내 npm 패키지에 test 코드가 없어서 그런다.

 

일단 test는 당장 안 다룰거니까 package.json 에서 script 아래의 값들을 다음처럼 "test" : "exit" 으로 변경 하고 다시 push 이벤트를 발동시킨다.

그러고 기다리면

빌드 성공하는 것을 볼 수 있다.

 

지금 보면 우리가 master 브랜치로 push 하면 자동으로 travis가 build를 마치고 배포할 준비를 한 것이다.

 

여기서 중요한게 있다.

travis는 ci 도구라서 빌드 integration만 할줄 안다.

즉, 빌드를 자동으로 수행할 줄만 안다는 것이다.

그럼 CI CD 에서 CD를 따로 구축해줄 필요가 있는데, 그는 방법에 따라 많이 다르겠지만

만약 CD를 원한다면 해당 블로그에 CodeDeploy나 Jenkins 탭을 찾아보는 것을 추천한다!