(AWS)Amplify ビルドエラーは、画像ファイルのスペースが原因でした

Amplifyビルド実行時にエラーが発生しました。
結論から言うと、
「画像ファイルの名称にスペースが含まれていることで、ファイルの読み込みに失敗している」
でした。
わかってしまうと”な~んだ”となる様な事象です。

ビルドログを見ると、ファイル読み込み失敗していることがわかるのですが、こういうことを経験していないとなかなか気付けないものです。

経緯)
・ログイン画面に画像ファイル(ロゴマーク)を読み込ませるようにしました。
 フロントエンドの環境は、Vue.jsを利用しています。
・開発環境では、問題なく画像ファイルは表示されました。
・試験も終わって、Amplify Pushを行い、ビルドを実行したところ、エラーが発生して、本番へのデプロイができませんでした。
・ビルドログを見ると、画像ファイルの読み込みに失敗していました。

解決に至る作業)
・画像ファイルを変更してみるとビルドが成功することがわかりました。
 画像ファイルそのものの問題 or 画像ファイルの名称の問題 に絞り込まれました
・画像ファイルの名称を先に成功したファイルと同一名としたところ、ビルドに成功

→結果、画像ファイル名に問題があることがわかりました。
 画像ファイル名を見ていくと、スペースが含まれていたため、それを削除してビルドしたところ、成功!

終わってみると、”よくある事象” となりました。
「これまで何度も同じような経験をしていて、落ち着いて観察すればわかることなのに」と反省です。

(記事のお問合せ・無料相談 → こちら