밍부스30) heroku랑 싸워서 이긴썰 푼다.

minji jeon·2022년 8월 9일

TIL_

목록 보기

46/61

우선 이 이야기는 헤로쿠와 일요일부터 월요일까지 씨름하다 화요일에 드디어 깨달음을 얻고 db.json을 쏘아올리는데 성공한 이야기를 담고 있다.

시작하기 앞서 헤로쿠가 뭔데 나를 힘들게 하는걸까

무료로 웹 호스팅을 제공하는 서비스로
무료 버전의 경우, 최대 5개의 어플리케이션을 올릴 수 있고 30분 동안 이용을 하지 않을 시, sleep상태로 빠져 다시 웹이 깨어나는 데 시간이 걸린다.
만약 내가 프로젝트를 배포하는데, db데이터도 배포할곳이 필요하다 하면 간단하게 하기 좋은 곳이라고 하는데 나한테는 간단하지가 않네...?^^
비슷한 서비스로는 gearhost, aws, bonus:cloudways등이 있다고 한다.
heroku는 나의 프로젝트를 간단히 발표용으로 띄워야 할때 사용하기 좋다고 한다.

여러시도 끝에 알게된 방법들을 정리해보았다.

1. json-server 설치하기

npm i json -server

2. json-server 실행하기

npm json-server --watch db.json --port 3001

이 명령어는 db.json 파일의 제이슨서버를 3001포트로 띄워죠!! 만약 db.json파일이 없다면 파일도 만들어죠!! 라는 의미다.

3. db.json과 Procfile이라는 파일 자체를 파일최상단에 둔다.

Procfile은 heroku가 서버를 띄울 파일을 가리켜준다.

db.json과 Procfile을 만들고 최상단에 위치한뒤, procfile에 이렇게 입력하면
헤로쿠야 db.json을 서버에 띄워죠!!!라는걸 의미한다. 일종의 화살표역할 이랄까

procfile이 필요한 이유는 만약 리액트앱 파일내에서 헤로쿠서버를 띄울경우 리액트 앱자체가 서버에 올라가게 된다. (사실 리액트 앱안에 db.json도 있기 때문에 리액트앱자체를 띄워도 db연결은 가능하다고 한다...)

따로 폴더에 담지 않고, db.json과 procfile을 최상단에 가져다 놓은 이유는 procfile이 db.json을 찾기 쉬우라고 저 위치에 놓았다.
나의 경우 폴더를 만들어 db.json을 넣어놓았더니 헤로쿠 이자식이 db.json을 찾지 못하는 일이 발생하였다. 만약 procfile에서 경로설정을 잘해주기만 한다면 문제가 되지 않을 것이다. 나는 아직 경로설정이라던가, heroku이놈이 익숙치 않기 때문에 쉬운방법을 택하였다.

4. server.js파일 생성하기

const jsonServer = require("json-server");
const path = require("path");

const server = jsonServer.create();
const router = jsonServer.router(path.resolve(__dirname + "/db.json"));
const middlewares = jsonServer.defaults({
  static: path.resolve(__dirname + "/../build/"),
});

const port = process.env.PORT || 3001;

server.use(middlewares);

server.use(jsonServer.bodyParser);

server.use(router);
server.listen(port, () => {
  console.log("JSON Server is running");
});

** 5~6번은 노드모듈의 환경변수를 설정하는 부분이다.

5. cross-env설치하기

npm i cross-env

npm 에 들어가 명령어를 확인하다 보니 아래에
주의!! 오타로 멀웨어를 받는일이 없도록 하세요 라고 써있다.
이름이 비슷한 멀웨어가 있나보다 했는데

꽤나 큰 문제였나보다 다들 조심하길...!!

6. pakage.json수정하기

"scripts": {
    "start": "node server",
    "dev": "cross-env NODE_PATH=src react-scripts start",
    "build": "cross-env NODE_PATH=src react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject",
    "heroku-postbuild": "cross-env NODE_PATH=src npm run build"
  },

// 원래코드
"scripts": {
  "start": "react-scripts start",
  "build": "react-scripts build",
  "test": "react-scripts test",
  "eject": "react-scripts eject"
},

이렇게 될 경우 npm start를 입력시
리액트 앱이 실행이 되지 않을 것이다.
npm run dev를 입력하면 실행이된다.

7. 빌드하기

npm run build

8. 헤로쿠 설치, 회원가입 및 로그인

https://devcenter.heroku.com/articles/heroku-cli

heroku login

터미널에 입력시 자동으로 사이트가 실행된다. 여기서 회원가입도 가능하다.

9. 헤로쿠를 깃에 커밋하기

여기가 제일 혼란스러웠다.
갑자기 깃에올린다고...?
왜...?
---> git에 헤로쿠를 올리게 되면 자동으로 헤로쿠 저장소가 따로 생기게 되고, 그곳에 나의 db.json이 저장된다.

10. 헤로쿠 프로젝트 생성하기

heroku create <프로젝트명> # 프로젝트명을 공백으로 하시면 이름이 자동으로 랜덤설정 됩니다.

heroku config:set NPM_CONFIG_PRODUCTION=false 
// devDependency 도 설치하게 설정합니다

git push heroku main

--> 그리고 꼭 main에서만 실행이 가능하다.
만약 내가 브랜치에서만 작업이 가능하다면