개발 도구 (Development Tools)/Node.js & MongoDB

Heroku(헤로쿠)로 프로젝트 배포하는 방법

BiCute 2022. 7. 9. 10:00
반응형

node.js를 이용하여 만든 개인 프로젝트를 웹상에 올리기위해서 heroku를 이용하는 방법에 대한 글을 남겨본다.

*기본적인 사용법은 Github에 파일 올리는것과 거의 동일하다.

 

 

 

#1 회원가입과 로그인

 

(1) 당연하게도 서비스를 이용하기 위해선 우선

www.heroku.com에 접속한 후 회원가입을 해야한다.

 

(2) 로그인을 한 후, Create new app을 눌러 새로운 프로젝트를 생성한다. 

*Github에서 새로운 Repositories를 만드는것과 같다

Create new app을 누르고

 

App name(프로젝트명)을 입력한 후 Create app을 클릭

App name은 소문자,숫자, 하이픈(-)만 사용 가능하며 언더바(_)같은건 사용할 수 없다.

 

 

 

#2 업로드 하기 전 확인할 사항 몇가지

 

(1) nodemon을 사용하고 있다면... package.json을 확인하여 node로 변경해준다.

"scripts": {
    "start": "node server.js"
  },

 

(2) 시작 포트번호 랜덤으로 주어지기 때문에 env 형식으로 변경.

const PORT = process.env.PORT || 8080;

 

*뒤에 or 조건은 로컬에서도 계속해서 실행해보기 위해 작성하는 부분으로 웹에 올리기만 할때는 필요 없음

 

 

 

#3 Heroku에 업로드 하기

 

(1) 업로드 방식 설정

이 글에선 Github에 파일 업로드 하는 방식과 거의 동일한 Heroku Git 방식을 이용해 업로드를 진행합니다.

 

(2) heroku 설치

업로드를 진행하는 방법은 아래쪽에 작성된 순서를 그대로 따라하면 되는데...

heroku를 우선 설치를 해줘야 하니 터미널을 열어 다음 명령을 입력해 줍니다.

더보기

npm install -g heroku

 

(3) 헤로쿠에 로그인하기

헤로쿠 웹사이트 로그인이 아닌, 작업중인 프로젝트를 열고 터미널을 열어 heroku login을 입력해 줍니다.

아무키나 누르면 새로운 브라우저가 열리는데 이곳에서 로그인을 진행합니다.

*로그인이 완료되었다면 창을 닫아도 됩니다.

 

(4) 업로드하기

여기서부터는 업로드 설명 페이지에 있는 내용 그대로 터미널에 작성하면 됩니다.

*github 업로드 방법과 동일합니다.

 

  ① git 초기화

git init

 

  ② git 연결

heroku git:remote -a [App Name]

 

  ③ 업로드할 파일 지정

  마침표(.)은 전체파일을 의미

git add .

 

  ④ commit 입력

git commit -am "커밋 내용"

 

⑤ push(업로드) 하기

  간혹 아래와 같이 입력해도 반응이 없다면 기본값이 master가 아닌 main으로 되어 있을수도 있으니 main으로 바꿔서 입력해보세요.

git push heroku master

 

 

 

#4 배포한 사이트 주소는?

  push가 끝나면 터미널에 주소 링크를 보여주기도 하며, heroku 웹 페이지에서 오른쪽 위에 있는 Open app을 눌러 확인 할 수 있습니다.

 

 

 

반응형