Herokuにデプロイしたアプリのビューの背景画像が表示されず困ったときのこと

事象

ローカル開発環境では表示されていたビューの背景画像が、本番環境（Heroku）では表示されない。
それ以外は、正常にデプロイできている。

% git push memo-space master

    ...

remote:        Done: 88.5M
remote: -----> Launching...
remote:        Released v12
remote:        https://memo-space.herokuapp.com/ deployed to Heroku
remote: 
remote: Verifying deploy... done.
To https://git.heroku.com/memo-space.git
   c05fd9d..8919aad  master -> master

→　背景画像が表示されない
　　背景画像以外は正常にデプロイされている。

前提条件

背景画像の読み込みをscssファイルで記載している。

試したこと

画像ファイルを読み込んでいるscssファイルを確認

app/assets/stylesheets/modules/_contents.scss

&__contents {
  @import "mixin/mixin";
  @import "contents_left";
  @import "contents_center";
  @import "contents_right";
  @import "contents_index";

  background-image:  image-url("beach.jpg");
  // background-image:  image-path("beach.jpg");
  // background-image:  asset_path("/images/beach.jpg");
  background-size:  cover;
  overflow-y: scroll;
  overflow-x: hidden;

  width: 100%;
  height: calc(100vh - 80px);
  display: flex;
}

いろいろ試してみる

画像イメージの読み込むメソッドを変えてデプロイし直してみる

background-image:  image-path("beach.jpg");

→　変化なし

画像イメージの読み込むときのパス指定を変えてみる

background-image:  asset_path("/images/beach.jpg");

→　変化なし

Herokuのデプロイ手順をやり直したり

ハマること２時間

.gitignoreファイルを眺める

原因

背景画像を置くディレクトリが、.gitignoreにデプロイ対象外として記載されていたことでした。