Q&A
公開しています、とありますが、masterブランチはソースコードが空の状態です。
質問している内容はどのブランチで検証したものですか？
###症状
Firefox上では問題なく動いていますが、その他ブラウザ上では画像が透過されており反映されません。
以下の写真のような状態です。(上画像：Firefox 下画像；Chrome)
ウェブURL:https://squjap.herokuapp.com/
###開発環境
Django==3.2.6
gunicorn==20.1.0
psycopg2==2.9.1
wagtail==2.14
DB == postgres
server == Heroku stack-18
s3
###開発コード
github v2ブランチにてコードは公開しています。
DB情報、AWS情報についてはカットしています。
s3には、どのブラウザからアップロードした場合もしっかりと反映されています。
ご存じの方、原因の推測が可能な方がおりましたら、ぜひ教えてください。よろしくお願いいたします。
申し訳ございません。v2ブランチです。
あと、念の為確認なのですが、
- それぞれのブラウザでアクセスしているURLは全く同じものですよね？
- 「画像が透過されており反映されません」というのは「画像が表示されない」という意図でしょうか？透過の問題ではなく、そもそも画像ファイルにアクセスできていないようですが…。
変更しました。どうぞよろしくお願いいたします。
mather 様
-全く同じURLでございます。質問分に添付いたしました。
-表示されないということです。管理者画面では透過されてみえたのでそういう風に解釈してしまいました。画像ファイルにアクセスできないとはどういうことでしょうか？一応、s3上にはアップロードされていて普通であれば、問題なく反映されるのではと考えております。
Chromeの開発者ツールの「Network」タブを開いた状態でページをリロードして確認してほしいのですが、証明書エラーによってブラウザがS3へのアクセスを差し止めています。
回答に記載しますね。
mather 様
承知いたしました。ありがとうございます。
回答1件
0
ベストアンサー
開発者ツールを使うと表示されていない画像についてのHTTPリクエストのエラーがチェックできます。
今回は net::ERR_CERT_COMMON_NAME_INVALID というエラーがコンソール部分に表示されていますね。
正しい証明書の検証ができなかったため、エラーが検出されています。
実際にこのURLにアクセスして検証してみると、証明書のチェックが出来ます。
*.s3.amazonaws.com に対する有効な証明書は見つかったのですが、
squeeze-japanese.com.s3.amazonaws.com はこの証明書のドメインに対応していません。（ . が多い）
おそらくS3のバケット名に . が使われていることで発生しているエラーだと思われます。
互換性を最も高くするには、静的ウェブサイトホスティング専用のバケットを除き、バケット名にドット (.) を使用しないことをお勧めします。バケット名にドットを含めると、証明書の検証を独自に実行しない限り、HTTPS 経由の仮想ホスト形式のアドレス指定は使用できません。これは、バケット名にドットが含まれていると、バケットの仮想ホスティング用のセキュリティ証明書は機能しないためです。
投稿2021/08/25 10:27
総合スコア6753
ご回答ありがとうございます。昨夜s3バケットの名前変更はできないとのことでしたので、新たに作成いたしましたところ、設定は特に元バケットと変えていないにもかかわらずcollectstaticしてもs3バケットへ反映されなくなってしまいました。一度、すでに別のバケット入れたことのあるstaticファイルは新バケットにはコピーされないのでしょうか？runserverで開いてみるとフロントサイドのみcssが適用されていません。また新しく画像を追加するとmediaファイルがs3へ生成されます。ちなみに、プロジェクト内部にはcollectされております。
あなたの回答
tips
プレビュー
