backenddevOps

heroku node 서버 배포하기(typescript)

heroku, nodejs, typescript
Views: 427

node js 를 이용해서 heroku 서버 배포하기

프로젝트 생성

1
2
mkdir heroku-nodejs-typescript
cd heroku-nodejs-typescript

초기 설정

npm 기본 설정값을 생성합니다.

1
npm init -y

npm 패키지 설치

타입스크립트를 포함하여 express를 설치하여 줍니다.

1
npm i @types/express @types/node express nodemon ts-node typescript

타입스크립트 설정

tsc 커맨드가 안먹힌다면, typescript를 설치하여 줍니다.

1
npm i -g typescript

타입스크립트 설정 파일을 생성해줍니다.

1
tsc --init

설정파일이 완료되었다면 tsconfig.json 파일에서 root 바로 밑에 값을 넣어줍니다.
include는 src내부의 ts확장자로 끝나는 파일들을 컴파일 하겠다는 설정입니다.
exclude는 gitignore처럼 컴파일을 하지 않는 것입니다.

1
2
3
4
5
6
"include" : [
    "src/**/*.ts"
],
"exclude" : [
    "node_modules"
]

package.json 설정

package.json에 스크립트와 엔진을 넣어줍니다.
engines에는 node와 npm버전을 입력해주면 됩니다.

1
2
3
# 버전 확인 방법
npm -v # 6.14.12
node -v # v14.16.1
1
2
3
4
5
6
7
8
9
10
# ...
"scripts": {
    "start": "ts-node src/index.ts",
    "dev": "nodemon -x ts-node src/index.ts"
},
"engines": {
    "node": "v14.16.1",
    "npm": "6.14.12"
}
# ...

@types 파일들은 모두 devDependencies에서 dependencies로 설치를 해주어야합니다. 아니면 서버 올리고 컴파일 에러가 발생합니다.

src/index.ts 생성

src 폴더를 만들고 그 내부에 index.ts 파일을 생성합니다.

1
2
3
4
5
6
7
8
9
import express from "express";
const app = express();
const PORT: string | number = process.env.PORT || 5000;

app.use("*", (req, res) => {
  res.send("<h1>서버가 실행되었습니다.</h1>");
});

app.listen(PORT, () => console.log(`server port: ${PORT}`));

테스트

로컬 서버 테스트는 npm run dev로 하면됩니다.

heroku deploy

heroku에 가입과 heroku cli 설치는 완료되었다는 전제하에 진행합니다.
heroku에 배포해보도록 하겠습니다. 배포하는 방법은 정말 간단합니다.

heroku 로그인

프로젝트 내부에서 다음 명령어를 입력하면 브라우저가 열리고 로그인할 수 있습니다.

1
heroku login

heroku create

heroku 사이트에서 생성을 하거나 다음 명령어를 입력해서 app을 생성할 수 있습니다.

1
2
3
heroku create
# or
heroku create [앱이름]

git commit

1
2
3
git init .
git add .
git commit -m "heroku setup"

git push

heroku 서버에 배포합니다.

1
git push heroku main

마치며

nodejs를 통해서 heroku 배포를 해보았습니다.
heroku가 무료로 제공하기에 소규모의 개인사이트를 만들떈 적합했습니다.
배포하는 과정은 aws보다 비교적 쉬웠습니다.

배포를 하면 기본적으로 https로 배포가 됩니다. 그래서 바로 프론트엔드 서버에서 api 호출이 가능합니다.
만약 도메인을 구매하고, 연결을 하고 싶다면 신용카드를 등록해야합니다. 신용카드를 등록하고 나서 배포를 하면 http로 연결이 되기때문에 https로 보안을 하고 싶다면, 유료버전으로 업데이트를 해야합니다. heroku 머리 잘썼네요.

요약해서 도메인을 사용하고 싶다면 신용카드 등록과 유료버전 heroku를 사용해야한다는 것입니다.

heroku 명령어 요약

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
# 헤로쿠 생성
heroku create
# or
heroku create [앱이름]

# 사이트에서는 master로 되어있지만 기본적으로 main으로 바뀜
# 배포할 브런치를 push 및 배포
git push heroku main

# 터미널에 해당되는 프로젝트 브라우저 열기
heroku open

# 현재 리모트 상태
git remote -v

# 앱이름에 해당하는 사이트로 remote 변환
heroku git:remote -a [앱이름]
Share