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の画面が表示される