Json-server, heroku, env (서버 배포)

1. JSON-SERVER

 1) json-server는 REST API를 구축을 짧은 시간에 할 수 있도록 지원해주는 라이브러리 입니다.

 2) 사용 이유 : BE에서 실제 DB와 API 서버가 구축 될 때 까지 FE 개발에 임시적으로 사용할 mock data

 

명령어

1) 설치

yarn add json-server

2) 실행 

json-server --watch db.json --port 3001
// yarn 으로 명령어 실행 가능
// json-server -watch [db.json] --port [포트번호]

3) db.json 설정

{
  "todos": [
    {
      "id": 1,
      "title": "json-server",
      "content": "json-server를 배워봅시다."
    }
  ]
}
{ 
	"이름" : [
    { 데이터 형태 }
    ]
}

2. env

1) API를 사용하거나 인증 관련 기능을 구현할 때 key를 노출하지 않기 위해서 환경 변수 파일에 key를 넣고 필요할 때 꺼내올 수 있다.

2) 환경 변수 파일인 .env는 설정할 수 있는 환경 변수를 설정할 수 있다.

 

리액트 설정 방법

//.env
REACT_APP_CLIENT_ID=[특정 값]
REACT_APP_CLIENT_HOST=[경로]
//REACT_APP_을 붙이고 이름 설정

 

cross-env 설치

yarn add cross-env

package.json 수정하기

"scripts": {
    "start": "node server",
    "start: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"
  },

// yarn build 스크립트 명령어 실행
yarn build
// node server 제이슨서버 실행
node server

 

3. heroku

1) heroku 서비스를 이용하기 (깃 등록)

git init # 첫번째 명령
 
git add . # 두번째 명령

git commit -m "initial commit" # 세번째 명령

2) heroku 프로젝트 생성

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

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

git push heroku master