[개발 블로그 제작기] 6. Express 서버 배포 & 배포자동화

김현우·2021년 9월 17일

나만의 개발 블로그 만들기

목록 보기

7/9

서론

그동안 저에게 배포자동화라고는 heroku 플랫폼에서 그냥 Github Repository만 연결하면 알아서 해주는게 다였습니다.
이번에는 그런 플랫폼에 의존해서 저는 손끝하나 안 건드리고 배포자동화를 적용하기 싫었습니다.

그래서 검색을 조금 해봤는데, AWS 인스턴스에 Jenkins용 인스턴스까지 서버를 두 개 만들어서 Github Repository -> Jenkins server <-> EC2 server 구조로 배포자동화를 구축하는 포스트가 대부분, 그리고 AWS CodeDeploy? 그런걸 사용해서 배포자동화를 적용하는 방법도 있던 것 같은데..
중요한건 제가 AWS를 사용할 수 없습니다.
예전에 AWS 써보자! 해놓고 1년짜리 프리티어 시작했다가 인스턴스만 만들어놓고 손 놓고 있다가 끝났거든요.. 제 개발 인생에서 제일 후회되는 일입니다.

아무튼 그래서 그냥 이번에도 heroku에 Github연결해서 쓰는 걸로 진행해야겠습니다.

heroku 회원가입, Billing Account 등록

이 부분은 그냥 heroku 사이트 들어가서 회원가입 하고 로그인 한 다음

우상단에 마이페이지로 보내주게 생긴 동그란 아이콘 누르고
Account settings 누르면 나오는 페이지에서
Billing 탭 눌러서 계좌 등록하시면 됩니다.

무료 플랜이 있고 유료 플랜이 있고 둘을 자유롭게 전환할 수 있는데, 자유롭게 전환하려면 계좌 등록을 해놔야 하는거죠.

Github Repository 생성

이 포스트를 누가 읽을지 모르겠지만 누군가 읽는다면 github에 프로젝트 올리는 법도 모를리가 없다고 판단됩니다.

만들어 두었던 초기상태의 Express 서버를 github 저장소 만들어서 push합니다.

끝

Heroku에 배포

Create new app 눌러서 heroku 앱을 하나 만듭니다. 전환되는 페이지에서 이름만 지어주고 Create 누르면 됩니다.

만들면 요로코롬 나오는데 heroku에 서버를 배포할 세가지 방법을 제시합니다.
저는 GitHub Repository에 연결해서 배포할 거니까 GitHub 탭을 누릅니다.

Github 탭을 누르면 처음에 레포지토리를 검색해서 연결하게끔 안내합니다. 연결하면 아래와 같이 뜹니다.

Enable Automatic Deploys 누르고
Deploy Branch 누르면 맨밑에 뭔가 촤라락 진행합니다 자기혼자.

다 끝나면 배포가 다 되었다는 안내 메시지로 바뀝니다.
배포된 서버의 도메인은
<아까 지은 heroku 앱 이름>.herokuapp.com
입니다. 안내 메시지 아래에 View 버튼을 클릭하면 브라우저를 통해 서버에 접근합니다. 눌러봅시다 (아니면 주소창에 위의 도메인을 입력합니다)

..뭔가 잘못됐습니다.
개발 환경에서 서버 구동시키면 터미널에 각종 로그가 뜨듯이 heroku에서도 실시간으로 찍히는 log를 볼 수 있습니다.
확인해 봅시다.

(로그인 된 상태에서) heroku 메인으로 들어가고, 방금 만든 heroku앱을 클릭하면 앱 관리하는 페이지로 이동합니다.
표시한 대로 More - View logs 누르면 로그들을 볼 수 있습니다.

..뭔가 위에 중요한 메시지들이 있지만 안 보여 주는 것 같이 생겼습니다.

배포자동화를 적용해놔서 이제 github에 push만 하면 heroku에서 이를 감지해서 자동으로 다시 빌드하고 배포합니다. 소스코드에 아무거나 주석이라도 하나 달아서 다시 배포해보고 로그를 다시 봅시다.

여기까지 임시저장 하고 로그 보면서 이것저것 해봤는데 한 가지 확인이 되었습니다. heroku에서 생성한 인스턴스에서는 타입스크립트 기반의 프로젝트를 실행시키기 위한 ts-node를 바로 실행할 수 없나봅니다. TS소스를 JS로 트랜스파일링 한 후에 ts-node가 아닌 node로 실행해 줘야 합니다.

소스는 TS로 작성하고 배포환경에서는 JS소스가 실행되도록 설정해 주겠습니다.

트랜스파일링을 위해 tsconfig.json 파일 수정

tsc 프로세스를 통해 typescript소스들을 javascript로 바꿔줄 건데, 이를 위한 설정을 해줘야 합니다. tsconfig.json파일에서 아래와 같이 몇몇 필드들을 수정해 줍니다.

/tsconfig.json

... 

"outDir": "./dist",
"target": "es5",
"module": "commonjs",
"moduleResolution": "node",
"noImplicitAny": true

...

build script 추가

package.json파일의 script에 build 명령을 추가합니다. build 명령은 tsc를 통한 소스 트랜스파일링을 수행합니다.
start script를 기존 ts-node에게 app.ts를 실행하던 것에서 node에게 app.js를 실행하게끔 수정합니다.

package.json

...

  "scripts": {
    "test": "mocha __test__/**/*.ts -r ts-node/register",
    "start": "node ./dist/src/app.js",
    "build": "tsc",
    "dev": "nodemon --exec ts-node src/app.ts"
  },

...