MERN stack 프로젝트 배포하기

Jiyun Park·2022년 6월 4일
0

MERN stack 배포를 위해 client인 Reactjs는 Netlify, server인 Nodejs는 Heroku를 이용하였다.

Netlify 배포는 정말 간단해서 구글링해서 나온 가장 최신 자료를 확인하면 곧바로 할 수 있을 것이다. (참고로 필자는 npm run build 후 파일을 통째로 업로드 하는 방식을 선택했다.)

Heroku 배포는 좀 더 까다로웠는데, 아래 사이트들에 친절히 나와있으니 참고하면서 따라가면 쉽게 배포할 수 있을 것이다.

  1. nhj12311님의 티스토리: 헤로쿠(heroku) 가입부터 node.js 배포까지
  2. jjuny.log: Node.js 프로젝트 배포하기 (Heroku)

Heroku에 관한 한 가지 tip

Heroku를 배포하며 내가 헤맸던 이유가 바로 'git'때문이었다. 우리 프로젝트(MERN)에는 client와 server 두 개의 폴더가 존재하고, 이 두 폴더의 상위폴더에 git을 추가해둔 상태였다.

우리 프로젝트 <- git 
ㄴ client (React.js)
ㄴ server (Node.js)

하지만 Heroku에는 Nodejs 프로젝트만 배포하는 것이 목적이었기에, 전체 프로젝트 중 Nodejs 프로젝트만의 git을 새로 만들어주어야 오류없이 Heroku에 배포할 수 있다.

우리 프로젝트 <- git 
ㄴ client (React.js)
ㄴ server (Node.js) <- git (NEW)

아래와 같이 한 번 설정해주고 나면 git으로 업데이트를 해줄 수 있기 때문에 결과적으로 Netlify보다 더 간편하게 업데이트 할 수 있다.

// Nodejs 프로젝트 내에서
git init

heroku login
// git remote heroku 설정
heroku git:remote -a <heroku 내 프로젝트 명> 


git add .
git commit -am “Update to Heroku”
git push heroku master

전체 프로젝트 코드를 확인하고 싶은 분들을 위해 GitHub 링크를 첨부한다.
https://github.com/di-uni/ChoiceHelper

오류가 있는 부분이 있다면 꼭 알려주시면 감사하겠습니다. (꾸벅)

0개의 댓글