ReactとExpressをHerokuにpushする

Hasuraが最近盛り上がっており興味を持ったため、久々にHerokuを立ち上げた。また、JavaScriptのフレームワークとしてはVue.jsを触ることが多かったが、TypeScriptとの相性や情報量の多さがReactのほうが多いと感じたのでReactを触ってみることにした。

今回は、Hasuraを使う前段としてReactとExpressをHerokuにpushする手順を書いておく。

ディレクトリ作成

まずは作業ディレクトリを作成する。

mkdir sandbox
cd sandbox
yarn init -y

Expressを作成する

Expressをインストールする

yarn add express

sandbox/index.jsを作成し次のコードを記述する

const express = require('express');
const path = require('path');

const app = express();

app.use(express.static(path.join(__dirname, 'client/build')));

app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname+'/client/build/index.html'));
});

const port = process.env.PORT || 5000;
app.listen(port);

sandbox/package.jsonにscriptsを記述する。Heroku上でindex.jsを実行するコードである。

"scripts": {
    "start": "node index.js"
}

一回Herokuへプッシュする。この段階ではアクセスしても、「Not Found」が表示される。

Reactを作成する

まずは、Reactを使えるようにインストールする。

yarn global add create-react-app

次に sandbox にて次のコードを実行する。実行することでsandbox/clientの配下にReactの資材が配置される。

create-react-app client

Heroku用の設定

sandbox/package.jsに次のコードを追記する。heroku-postbuildはビルドするコマンドを記述している。heroku-postbuildはbuildと区別され、heroku上だけで動かしたいコマンドを記述する

"scripts": {
    "start": "node index.js",
    "heroku-postbuild": "cd client && yarn && yarn run build"
  }

ここまでの変更をHerokuにプッシュすると、Reactの画面が表示される