Travis ci에서 Heroku로 자동배포하기

Jeongkuk Seo
sjk5766
Published in
5 min readJun 27, 2020

Github에 Express 코드를 push하면 Travis가 이를 빌드하고 Heroku에 배포하는 과정을 정리하도록 하겠습니다. TravisHeroku에 대해 잘 모르신다면 각각 링크한 포스팅을 보면 도움이 될 것 같습니다. 포스팅의 전제는 TravisHeroku에 대해 기본적인 지식이 있다고 가정하고 작성합니다.

Github의 테스트 할 Repository와 Travis는 연동 되어 있다고 가정합니다. 연동하는 부분을 모르실 경우 이 글을 참고하시면 됩니다.

배포 할 Heroku App 준비하기

Heroku 에서 테스트 할 App을 생성합니다. 생성 후 Deploy 페이지에서 Github를 선택하고 아래 Connect to Github 버튼을 클릭합니다.

Authorize heroku 버튼을 클릭합니다.

패스워드를 입력합니다.

패스워드를 입력하면 Deployment method에서 Github를 선택합니다.

어떤 Repo를 배포할지 선택 후 connect 버튼을 클릭합니다.

Automatic Deploys에서 Wait for CI to pass before deploy를 선택하고 enable 버튼을 클릭합니다.

이 상태에서 Github Repo의 setting 버튼을 확인하면 Webhooks에 heroku와 travis가 보입니다. heroku는 위 작업으로 인해 추가 된 것이고 travis는 맨 위에서 언급했듯이 이미 연동 되어있는 상태입니다.

GitHub Repo에 push할 Express 준비하기

Express를 배포하기 위한 package.json 파일입니다. dependencies에 express가 설치되어 있고 scripts에서 test는 exit로 종료했습니다.

{
"name": "travis-express",
"version": "0.0.0",
"private": true,
"scripts": {
"start": "node app.js",
"test": "exit"
},
"dependencies": {
"express": "~4.16.1",
}
}

실행 될 app.js 파일 내용입니다. Heroku는 실행 될 App에 포트를 env를 통해 동적으로 주기 때문에 process.env.PORT를 추가했습니다.

const express = require('express')
const app = express()
const port = 3000
app.get('/', (req, res) => res.send('Hello World!'))app.listen(process.env.PORT || port, () => console.log(`Example app listening`))

.travis.yml 파일 작성

travis는 heroku에 대한 Deploy Provider를 제공하기 때문에 공식 홈페이지를 참고하여 .traivs.yml 파일을 작성합니다.

.traivs.yml 파일에서 추가 설명할 사항은 8–9번 라인입니다. 공식 홈페이지에선 api_key를 생성할 때 travis encrypt $(heroku auth:token) --add deploy.api_key 명령어를 사용하라고 나와 있습니다. 헌데 이렇게 생성한 키를 가지고 빌드를 할 경우 invalid option "— api_key=" 같은 에러가 발생합니다.

구글링 하니 이미 동일한 문제를 겪은 사람들의 해결책이 있었습니다. 우선 링크를 걸어 둔 공식홈페이지에 접속합니다.

접속 후 스크롤을 내리면 아래 API_KEY 부분을 볼 수 있습니다.

Reveal 버튼을 눌러 평문의 API_KEY를 복사하여 local에서 아래 명령어를 입력합니다.

travis encrypt [API_KEY] --add deploy.api_key --org

암호화 키 값이 생성 되면 파일에 쓰겠냐는 질문이 나오는데 y를 누르면 .travis.yml 파일에 정상반영 됩니다. 그 후 git commit & git push 합니다.

travis 빌드 로그에 정상적으로 성공 log가 확인됩니다. 이제 밑줄 친 사이트에 접속해 express가 정상 동작하는지 확인해 보겠습니다.

정상적으로 동작하네요.

--

--