Angular 웹 프로젝트 배포는 어떻게 할까? GitHub - Travis CI - S3 - Ansible Deploy
Travis CI 에 대해서 알아보고 프로젝트 빌드 후 Amazon S3에 업로드 하는 예제를 만들어 본다.

Travis CI 란?

소개

As a continuous integration platform, Travis CI supports your development process by automatically building and testing code changes, providing immediate feedback on the success of the change. Travis CI can also automate other parts of your development process by managing deployments and notifications.

…

When you run a build, Travis CI clones your GitHub repository into a brand new virtual environment, and carries out a series of tasks to build and test your code.

요금정책

Trial 사용가능.

Set up your first project in just one minute.
Your first 100 builds are free!

…

Always free for open source projects

AWS

S3 접근 권한만 가진 사용자를 생성해서 사용한다.

IAM(Identity and Access Management) > 사용자 추가

AWS 엑세스 유형

  • 프로그래밍 방식 엑세스

S3 > 정책필터

  • AmazonS3FullAccess

사용자 생성이 완료되면 엑세스 키 ID 와 시크릿 엑세스 키 를 확인할 수 있다. (보안자격증명 > 엑세스키)
해당 키는 Travis CI 설정에서 사용함.

S3 버킷 생성

버킷 생성 시 권한 > 모든 퍼블릭 엑세스 차단 옵션으로 생성한다.

Travis CI

github 계정 연결 후 로그인하면 Github 저장소를 선택할 수 있다.

Integration 대상 프로젝트 선택

github > Personal settings > Applications > Installed Github Apps
Travis CI > Configure
Repository access 설정 > CI 적용할 repository 선택 후 저장.

APP > Settings

General

코드 push 되었을 때 빌드되도록 설정.

Environment Variables

travis 빌드에 사용할 환경변수를 설정한다.

Config 파일 설정 (.travis.yml)

S3 Deployment 참고

.travis.yml 파일 생성

.travis.yml 파일을 master 브랜치에 push 하면 코드변경사항이 push될 때마다 빌드가 실행 된다.
angular cli 설치 후 빌드, 빌드결과를 zip 파일로 만들어 S3에 업로드한다.
배포과정은 Job log 에서 확인 할 수 있고, 결과는 메일로 발송된다. Slack같은 채널로 알림을 받을 수도 있다.

Job log

결과

빌드가 실패했을 때

빌드 요청은 More options > Requests 에서 확인할 수 있다.
단순 Syntax 오류 같은 경우 Could not parse.. 라고 메시지가 노출 됨.
로컬에서 .travis.yml 기준으로 확인해볼 수 있다.

1
2
3
4
❯ sudo gem install travis
❯ travis lint
Warnings for .travis.yml:
[x] syntax error: (<unknown>): found character that cannot start any token while scanning for the next token at line 19 column 3

끝.

이후에 과정은 S3에 업로드된 파일을 Instance에 배포 하면 된다.

.

.