Deploy React Frontend App on Heroku

Heroku가 PaaS형태의 서비스로 app의 코드만 올려서 서비스가 가능합니다.

이번 포스트에서는 create-react-app으로 만들어진 기본앱을 heroku에 올리는 방법을 소개합니다.

예제를 시작하기 전에 heroku 계정을 있어야 합니다. 여기서는 소개하지 않습니다.

1. app을 생성합니다.

create-react-app my-frontend-app --template typescript

2. heroku에 app을 생성합니다.

cd my-frontend-app
heroku create my-frontend-app --buildpack https://github.com/mars/create-react-app-buildpack.git

3. static.json 을 추가합니다.

{
  "root": "build/",
  "routes": {
    "/**": "index.html"
  }
}

4. git에 commit 하고 heroku 에 push 합니다.

git add .
git commit -m "add static.json for heroku"
git push heroku master

5. app을 엽니다. (자동으로 기본 브라우저로 열립니다.)

heroku open

아래는 위의 과정을 6분정도로 간단히 해보는 동영상입니다.

Be a GURU