create-react-app を Heroku-22 で動かす

create-react-app で作成したWEBフロントのアプリケーションはHerokuに簡単にデプロイが行えていましたが、それを実現していた Buildpacks が deprecated になり、 Heroku-22 には対応されなくなりました。

After a long, useful run, this buildpack is now at its end of life 🌅

The underlying static web server buildpack is deprecated and will not be supported on Heroku-22 or newer stacks.

Please look into using Next.js or Remix to develop React apps which are deployable using the Node.js buildpack.

原文へのリンク

Heroku-22 に更新してpushすると以下のエラーメッセージが出力されてデプロイが失敗します。

remote: Stack heroku-22 is not supported!
remote:  !     Push rejected, failed to compile React.js (create-react-app) multi app.
remote:
remote:  !     Push failed

Heroku-20 のEOLが迫る中で Heroku-22 に対応したアプリケーションの形式に書き換えるのは大変な作業です。
そこで既存の create-react-app の内容を変えずに、配布用のWEBサーバーを立ち上げて対処する方法の共有です。

Heroku-22 で動かすために

基本的には以下の記事の内容をそのまま活用させてもらいました。
Express を配布用のWEBサーバーとしてHeroku上で立ち上あげて create-react-app の静的アセットを配布できるようにするというものです。

参考記事

やるべきこと

1. package.json に Express の追加
2. Heroku上で Express を動かすためのJavaScriptの追加、および Procfile の追加
3. Heroku APP の 既存の Buildpacks の削除

リンク先のJavaScriptだとESlintなどでエラーになるので以下のように修正したものを利用しています。

const express = require('express');
const path = require('path');
const app = express();
const port = process.env.PORT || 3000;
app.use(express.json());

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

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

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

app.listen(port, () => {
  console.log(`Server is running on port: ${port}`);
});

package.json は以下のような変更を行いました。
なお、2022年10月25日時点でHerokuの Node.js のバージョンのデフォルトが 18系 になっていてデプロイが失敗したので　16系 が適用されるようにバージョンを指定しています。

{
  // 中略
  "dependencies": {
    // 中略
    "express": "4.18.2"
  },
  // 中略
  "engines": {
    "node": "16.x"
  }
}

既存の Buildpacks を削除する必要があるのでHerokuのWEBコンソールから削除を行ってからデプロイしてください。