トップ コーディング herokuデプロイ時に自動ビルドしたディレクトリをキャッシュして動作させる方法
# heroku # npm # webpack
herokuデプロイ時に自動ビルドしたディレクトリをキャッシュして動作させる方法
HerokuでNode.jsアプリを動作させるためのbuild周りの記述、キャッシュの仕組み等
2021/10/10 16:32

npm run build 時に distディレクトリ配下にアプリケーションデータが生成されるような、 Webpack ベースの Web アプリケーションは、distディレクトリは .gitignoreに登録し、ローカル環境、ステージング環境、本番環境それぞれでnpm run buildで生成されたdistディレクトリを使用できるようにするのが一般的です。

しかし、プラットフォームが Heroku の場合、基本的にファイルのキャッシュがされないため、一工夫必要になります。

必要な設定

package.json
{
  "name": "プロジェクト名",
  "version": "バージョン",
  //
  //
  "cacheDirectories": ["dist"]
  //
  //
}

のように、cacheDirectories プロパティで、生成先ディレクトリを指定します。

また、Heroku/Heroku 以外 でnpm run buildの実行内容を変えたい場合は

package.json
"scripts": {
    "build": "****", // Heroku以外でのnpm run build 実行内容
    "heroku-postbuild": "**** ***”, // Heroku上でのnpm run build 実行内容
}

のように記述すると、heroku-postbuildが存在する場合は buildは無視され、heroku-postbuildの内容が実行されるようです。

Heroku 公式ドキュメント - Heroku の Node.js サポート > キャッシュの動作
https://devcenter.heroku.com/ja/articles/nodejs-support#cache-behavior

Breaking Codes