React Appを新規作成してHerokuにデプロイ

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

環境

macOS Catalina 10.15.6

Herokuの導入

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

Herokuをインストール

brewで Heroku をインストール

$ brew install heroku/brew/heroku

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

$ heroku --version

Herokuのユーザ設定

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

$ heroku login
Enter your Heroku credentials:
Email: [e-mail]
Password: ****************
Logged in as [e-mail]

公式サイト https://devcenter.heroku.com/articles/heroku-cli
参考 https://blog.katsubemakito.net/macos/setup_heroku-cli

React Appを作成

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

Node.jsをインストール

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

Yarnをインストール

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

$ brew install yarn

Reactアプリを新規作成

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

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

Gitのステージングまであげる

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

サーバーを起動

$ yarn start

以下にアクセス
http://localhost:3000/

参考 https://qiita.com/taskooh/items/f67d34f9f5c8eab08dc0

Herokuにデプロイ

Herokuにログイン

$ heroku login   // Enterを押す

Herokuアプリ作成

$ heroku create

Heroku buildpacks

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

デプロイ

$ git push heroku master
$ heroku open

以上です！

起きたエラーたち

画面が真っ白

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

package.json

  "homepage": "./"                  # 追加

Two different lockfiles found: package-lock.json and yarn.lock

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