react + express 프로젝트 배포 후기 (heroku 이용)

현재 react와 express를 이용한 프로젝트를 진행중인데 거의 완성되어가서 미리 연습삼아 배포를 해보았다. 혼자서 배포하는 것은 처음이라 수많은 에러를 만났고 해결하는데 꽤 복잡했다. 그래서 그 과정 순서를 간단히 기록해본다. 

---

#. 프로젝트 세팅 

먼저 heroku를 이용해 배포하는데 깃허브 레파지토리를 연동해야함으로 새로운 레파지토리를 생성했다. 기존에 client와 server를 각각의 레파지토리를 만들어 개발했어서 모두 클론해서 하나로 합쳤다.

 

1) server 폴더 안에 server.js 파일의 수정이 필요했다. '/' 경로에 get 요청 시 client 폴더의 index.html 파일을 보여주도록 코드를 추가했다. 그리고 기존에 PORT 값이 5000으로 고정값이였는데 heroku에서 연 포트가 사용될 수 있도록 process.env.PORT를 추가했다. 

// server.js

import express form 'express';
import path from "path";

const PORT = process.env.PORT || 5000;
const __dirname = path.resolve();

app.use(express.static(path.join(__dirname + "/.." + "/client/build")));
app.get("/", (req, res)=> res.sendFile(path.join(__dirname + "/.." + "/client/build"));

 

2) 최상단 폴더에 npm init을 통해 package.json 파일을 생성 후 다음과 같이 스크립트를 추가했다. 먼저 client 폴더로 이동해 파일을 빌드하고, server 폴더에서 서버를 실행하도록 작성된 스크립트이다.

// package.json

"scripts": {
    "heroku-prebuild": "cd client && npm ci && npm run build ",
    "start": "cd server && npm ci  && npm run start",
    "test": "echo \"Error: no test specified\" && exit 1"
  },

 

 

#. Heroku 세팅 및 DB 연결

heroku에 가입을 하고 app을 생성한다. 그리고 깃허브를 연동시키고 Resources 탭으로 이동해 JawsDB MySQL을 설치한다. JawsDB MySQL을 설치하는 이유는 기존에 내 노트북에 있던 DB를 외부에서도 24시간 아무때나 접속할 수 있도록 만들기 위해서다. 처음엔 ClearDB MySQL을 이용했는데 ClearDB MySQL는 json 데이터 타입을 제대로 인식하지 못했다. 그래서 JawsDB MySQL로 변경했다. (이것 저것 수정해보면서 추측해보기로는 JawsDB MySQL과 ClearDB MySQL의 characterset 설정 값이 달랐는데 이거 때문인 것 같다)

 

다음 내 노트북에 있던 DB를 JawsDB MySQL에 옮기는 작업을 했다. 처음부터 다시 DB 테이블을 만들어도 되지만 나는 기존의 DB 파일을 export, import 하는 방식을 선택했다. mysql workbench를 이용해 손쉽게 데이터를 옮길 수 있었다. 그리고 다시 heroku 사이트에서 setting 탭에 데이터베이스 관련 환경변수들을 모두 저장해줬다.

 

이렇게 모든 세팅이 완료된 후 deploy 버튼을 눌러 배포를 실행해서 내 프로젝트로 접속할 수 있는 배포된 URL을 얻을 수 있었다.