json-server heroku 배포하기 (에러만났을 때 대처법) WSL2

1. Procfile 만들기 타입스크립트면 ts , 일반이면 js

//Procfile
web: node server.js

 

2. server 파일 만들기

 

//server.js

const jsonServer = require("json-server");
const server = jsonServer.create();
const router = jsonServer.router("./db.json");
const middlewares = jsonServer.defaults({
  static: "./build",
});
const port = process.env.PORT || 4000;

server.use(middlewares);
server.use(
  jsonServer.rewriter({
    "/api/*": "/$1",
  })
);

server.use(router);

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

 

3. package.json 파일에 script 추가하기

 

  "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"
  },

npm i cross-env

설치해야 작동함

 

https://www.npmjs.com/package/cross-env

cross-env

 

 

 

4. Heroku CLI 설치

 

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

The Heroku CLI | Heroku Dev Center

 

 

wsl2 유저는 이것 설치 

 

curl https://cli-assets.heroku.com/install.sh | sh

 

버전확인 heroku -v

 

 

 

5.본인 프로젝트 마스터 브런치 혹은 default 브런치에서  heroku login 

 

$ git init
$ git add .
$ git commit -am'initial commit'

그 이후

$ heroku create <프로젝트명> # 프로젝트명을 공백으로 하시면 이름이 자동으로 랜덤설정 됩니다.
$ heroku config:set NPM_CONFIG_PRODUCTION=false # devDependency 도 설치하게 설정합니다
$ git push heroku master

 

 

에러가 날 경우 

 

heroku buildpacks:set mars/create-react-app

터미널에 입력

 

 

참고 블로그

 

https://bogmong.tistory.com/11

React Application을 Heroku에 Deploy하며 겪은 오류(Error H10)

https://redux-advanced.vlpt.us/3/09.html

3-9. 최적화 및 히로쿠에 디플로이하기 · GitBook

https://github.com/mars/create-react-app-buildpack

GitHub - mars/create-react-app-buildpack: ⚛️ Heroku Buildpack for create-react-app: static hosting for React.js web apps

https://github.com/jesperorb/json-server-heroku#deploy-to-heroku

GitHub - jesperorb/json-server-heroku: Deploy json-server to Heroku & Glitch & Azure

https://heeyeonjeong.tistory.com/102

Heroku로 react 프로젝트 배포하기 (json-server 포함)