Reactで新規アプリを作成して、Herokuにデプロイするまでの手順をメモ。

環境

macOS Catalina 10.15.6

Herokuの導入

せっかくなのでHerokuの導入から書きます

brewで Heroku をインストール

$ brew install heroku/brew/heroku

Heroku がインストールできたか確認

$ heroku --version

Heroku にログインしてそれぞれ入力

$ heroku login
Enter your Heroku credentials:
Email: katsube@example.com
Password: ****************
Logged in as hogehoge@example.com

ReactでAppを新規作成するところから

以下の公式サイトからインストーラをインストールして、ダウンロードを実行
公式サイト https://nodejs.org/ja/

yarn は brew でインストール（楽だから）

$ brew install yarn

アプリの名前は my-app で新規作成

$ npx create-react-app my-app
& cd my-app

$ git init.
$ git add .
$ git commit -m 'create: myapp'

$ yarn start

$ heroku login   // Enterを押す

$ heroku create

$ heroku buildpacks:set https://github.com/mars/create-react-app-buildpack.git

$ git push heroku master
$ heroku open

以上です！

原因: rootを設定していない
対策: rootを設定する

package.json

  "homepage": "./"                  # 追加

remote: -----> Build failed
remote:  !     Two different lockfiles found: package-lock.json and yarn.lock

原因: package-lock.json と yarn.lock が競合
対策: package-lock.jsonを削除してデプロイ

$ rm -rf package-lock.json
$ yarn install
$ git add yarn.lock
$ git commit -m "Updated Yarn lockfile"
$ git push heroku master
$ heroku open