本番環境でのエラー RuntimeErrorを解決したい

Question

前提・実現したいこと

いつもお世話になっております。
現在SNSのようなアプリケーションを作成しており、
一度本番環境にデプロイをしたいと思い、S3にバケットを作成、デプロイ先にアクセスみたところ下記のようなエラーが起きました。

エラーログを読むと原因は「yalファイルにタブを使っている事」らしく、後述しますが、目視はもちろん

https://jsonformatter.org/yaml-formatter

このようなサイトを幾つか使用し試行錯誤をしましたが、結果は変わりませんでした。

発生している問題・エラーメッセージ

デプロイ後にアクセス先に表示されたメッセージ

Application error
An error occurred in the application and your page could not be served. If you are the application owner, check your logs for details. You can do this from the Heroku CLI with the command
heroku logs --tail

heroku logs --tailを試してみたところ

 /app/vendor/bundle/ruby/2.7.0/gems/activestorage-6.0.3.4/lib/active_storage/engine.rb:113:in `rescue in block (2 levels) in <class:Engine>': YAML syntax error occurred while parsing /app/config/storage.yml. Please note that YAML must be consistently indented using spaces. Tabs are not allowed. Error: (<unknown>): did not find expected key while parsing a block mapping at line 1 column 1 (RuntimeError)

(<unknown>): did not find expected key while parsing a block mapping at line 1 column 1 (Psych::SyntaxError)

heroku run rails cを試してみたところ

curred while parsing /app/config/storage.yml.
Please note that YAML must be consistently indented using spaces. Tabs are not allowed. Error: (<unknown>): did not find expected key while parsing a block mapping at line 1 column 1 (RuntimeError)

このようなメッセージになっており、ymlファイルに何か問題があるのではないかと仮説を立てました。

該当のソースコード

storage.yml

test:
 service: Disk
 root: <%= Rails.root.join("tmp/storage") %>

local:
 service: Disk
 root: <%= Rails.root.join("storage") %>

amazon:
 service: S3
 access_key_id: <%= ENV['AWS_ACCESS_KEY_ID'] %>
 secret_access_key: <%= ENV['AWS_SECRET_ACCESS_KEY'] %>
 region: ap-northeast-1
 bucket: rank-top-32010

databese.yml

default: &default
  adapter: mysql2
  encoding: utf8
  pool: <%= ENV.fetch("RAILS_MAX_THREADS") { 5 } %>
  username: root
  password:
  socket: /tmp/mysql.sock

development:
  <<: *default
  database: rank_top_development

test:
  <<: *default
  database: rank_top_test

production:
  <<: *default
  database: rank_top_production
  username: rank_top
  password: <%= ENV['RANK_TOP_DATABASE_PASSWORD'] %>

試したこと

heroku run rails cのメッセージを翻訳したところ
空白が影響がある。と書いてあったので、その部分を注視し修正しました。
また過去にデプロイした物を参照し、順番が入れ替わっていた箇所があったので過去の物と同じように修正

結果変わりませんでした。

gem "aws-sdk-s3", require: false　の記述があるのかを確認しました。

初学者なので間違っているかも知れませんが、
１行目に問題があるのようなメッセージであるため、ymlファイル以前に問題を起こし、メッセージに現れたのがこのようなケースという場合はあるのでしょうか？

Answer 1

at line 1 column 1

なので

多分、お使いのエディタによってBOMが先頭に挿入されており
Rails側はそれをゼロ幅空白として認識してしまっているのかと思います。

対処としては、お使いの環境によって具体的な方法は異なってきますが
なんらかの方法でBOMを削除するとよいかと思います。

Comments

[Pro01x19]

@asm　さん　回答ありがとうございます！

BOM　という物がどういった物なのか理解が出来ず調べて参りました！
CSVファイルを出力する物と関連性のある物、といったことは理解ができました。
しかし、どの箇所にBOMが仕込まれているかを調べる方法までたどり着けませんでした。

何か調べる方法などございますでしょうか？
使っているエディターはVsCordを使用しています

[asm]

> CSVファイルを出力する物と関連性のある物
CSV特有のものか？というと違いますし本来の意味からは少し乖離していますが
「文字コードを特定するためのヒントとなる見えない文字を先頭にくっつければ文字化けせずにファイルを開ける。」
みたいな感じです。

> どの箇所に
「line 1 column 1」つまり先頭行の先頭文字です。
なお、お使いのエディタがBOMを認識している場合はこの文字は無視されます。
非対応の場合でも不可視文字ですので基本的に表示はされません。

> 何か調べる方法などございますでしょうか？
$ ruby -e "p File.read('config/storage.yml', 3, encoding: 'utf-8')"
の結果が"tes"ならばBOMなし、"\xEF\xBB\xBF"ならばBOMありです。

また、プログラマが使うべきテキストエディタならば基本的にbomの判別・付与・削除ができるかと思いますので調べてみるとよいでしょう。
(win10のメモ帳ですらできるらしいですし)

[Pro01x19]

ありがとうございます。エディタの使い方についてもう少し探ってみたいと思います。

ruby -e "p File.read('config/storage.yml', 3, encoding: 'utf-8')"を試みた結果なのですが
"ama"と出てきました。amazon のamaかと思い記述、削除をしてみても結果は同じでした。
やはり１行目に何かあると考えるのが正しかったようです

[asm]

amazonの「ama」かと思いますね。
おそらく見ているファイル(config/storage.yml)がherokuにあげているファイル(/app/config/storage.yml)とは別なのかと思います。

[Pro01x19]

Heroku環境でのconfig/storage.ymlを見て書き換える必要があるということでしょうか...
今まで開発環境しか触ってこなかったので全くの無知で申し訳ございません。
そのようなことは可能なのでしょうか？

[Pro01x19]

VsCode側からエンコード付きで保存などの仕組みを使ってみましたが
なかなか改善されません。もう少し探ってみます。

[Pro01x19]

S3に画像をアップロードする仕組みの理解が足りていなかったようです。
SNS上のユーザーにアイコンのような画像を選択してもらうようにしていたのですが、そのアイコンがアプリケーション内に保存されてしまっていたので、そちらを改善したら治りました。

asmさん。ありがとうございました。
丁寧な回答で非常に勉強になりましたし、モチベーションを落とさずにエラーに取り組めました。