search

Ayato-kosaka / spelieve

1 stars 0 forks source link

【BUG】web のサムネイル保存で写真が映らない #963

Closed Ayato-kosaka closed 5 months ago

Ayato-kosaka commented 6 months ago

Bug report

Describe the bug

A clear and concise description of what the bug is.

console.error Access to image at 'https://firebasestorage.googleapis.com/v0/b/itinerary-4aee3.appspot.com/o/ec7635c1-45a1-4fa0-94ba-fdec33218ffd?alt=media&token=d2f22f30-d020-472e-a77b-76a465d59e8d' from origin 'https://www.spelieve.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

To Reproduce

Steps to reproduce the behavior:

  1. Go to '...'
  2. Click on '....'
  3. Scroll down to '....'
  4. See error

Expected behavior

A clear and concise description of what you expected to happen.

Screenshots

If applicable, add screenshots to help explain your problem.

Environment

Additional context

Add any other context about the problem here.

Solution result

Cause (バグの原因)

https://github.com/Ayato-kosaka/spelieve/issues/861 の解消確認漏れ Google Cloud Storage の CORS 設定の開発/本番乖離

How to fix (どのようにして解決したか)

本番環境の Google Cloud Storage の CORS 設定を実施。 参考 https://qiita.com/chima91/items/0cd46b5965e087609ef5

Roll Out

他機能への影響範囲と対応計画を記載する

解消確認をリリース後に本番環境で漏れ → リリース手順に本番環境で解消確認することを明記

Google Cloud Storage の CORS 設定の開発/本番乖離 → Google Cloud Storage の CORS 設定のバージョン管理を開始。GitHub Actions を用いたデプロイは gutil の使用方法がわからないため、一旦保留

Ayato-kosaka commented 5 months ago

ローカル環境で立ち上げると画像を保存できる。

861 で対応したはず。

~■ リリース漏れ？~ 379a7a6 で対応したはず。 main ブランチに入っている。 https://github.com/Ayato-kosaka/spelieve/actions/runs/7099908583 で 12/5 にリリースされているはず。 Hosting -> サイトの管理 を見るに、 513eb8 が該当する。

■ #861 の解消確認漏れ →要対策検討

~■ storage-rule のデプロイ漏れ？~ → spelieve-dev/storage と tinerary-4aee3/storage のルールに差分を検知。 → 上書きしたが、解消されず。 →恒久対応として https://github.com/Ayato-kosaka/spelieve-firebase でバージョン管理したいが、一旦本番環境のルールを開発環境に合わせる。

~■ #861 の対応（#796 の対応）が入っていない？~

■ API 呼び出し元が悪いのか、呼び出し先が悪いのか 開発環境のフロントエンドから本番環境のストレージにつないで見る。 →CORS エラーとなる → つまり、本番環境の Firebase Storage の設定がなにかおかしい

■ Google Cloud Storage の設定がおかしい？ → gsutil cors get gs://itinerary-4aee3.appspot.com で確認したところ、開発環境では CORS の設定がされているが、本番環境ではされていない。 → 解消 参考 https://qiita.com/chima91/items/0cd46b5965e087609ef5