Reactで作成したアプリをHerokuでデプロイする方法です。
Herokuでデプロイするのはとても簡単に行えました。
デプロイするアプリはHerokuのチュートリアルで作成した五目並べアプリを例に紹介します。
前提条件
- ローカル環境で動作するReactアプリがあること
- Herokuアカウントを作成済み
デプロイ手順
Herokuにログインする
Herokuにアクセスし、作成したアカウントでログインします。
![](https://yuhabeem.com/wp-content/uploads/2021/06/スクリーンショット-2021-06-05-9.29.44-1024x575.png)
アプリを作成する
ダッシュボードの右上から「Create new app」を選択します。
![](https://yuhabeem.com/wp-content/uploads/2021/06/スクリーンショット-2021-06-12-10.11.24-1024x341.png)
「App name」を入力して、「Create app」を選択します
「App name」をすでに利用されていると使えないので、入力後にエラーが表示される場合は、別の名前に変更してください。
![](https://yuhabeem.com/wp-content/uploads/2021/06/スクリーンショット-2021-06-12-10.14.28-1024x381.png)
アプリが作成されます
以下のような画面が表示されれば成功です。
![](https://yuhabeem.com/wp-content/uploads/2021/06/スクリーンショット-2021-06-12-10.33.06-1024x713.png)
アプリをデプロイする
Windowならコマンドプロンプト、Macならターミナルを開きます
以下のコマンドを入力すると、デプロイが完了します。
// herokuにログインする
// 「heroku: Press any key to open up the browser to login or q to exit:」と聞かれるので、Enterキーを押してください。
// ブラウザでログイン画面が表示されるのでログインしてください。
$ heroku login
// Herokuのリモートリポジトリをクローンします。
$ heroku git:clone -a tic-tac-toe-test-webapp
// アプリを作成したディレクトリに進みます
$ cd work/tic-tac-toe/
// ソースをプッシュします。
$ git init
$ git add .
$ git commit -am "make it better"
$ git push heroku master
Herokuのリモートリポジトリにプッシュするだけでデプロイが完了します。
アクセス先のURLは「Settingタブ」の「Dimains」に表示されます。
![](https://yuhabeem.com/wp-content/uploads/2021/06/スクリーンショット-2021-06-12-10.46.04-1024x212.png)
![](https://yuhabeem.com/wp-content/uploads/2021/06/スクリーンショット-2021-06-12-10.46.20-1024x287.png)