環境
- Laravel 9.19
- react 18.2
- vite 3.0
混合コンテンツエラーの出力
検証環境へアプリケーションをデプロイしたところ、Chromeのコンソールに混合コンテンツエラーが出力されました。
Mixed Content: The page at xxx.com was loaded over HTTPS, but requested an insecure...
エラーの内容から、httpsとhttpのサイトが混合しており、読み込めないことが原因でした。
Chromeの検証ツールから、cssファイルやJavaScriptファイルへアクセスする際にhttp://localhostへアクセスしており、検証環境のドメインになっていないことがわかりました。
対応方法
検証環境へドメインするために、コンテンツファイルのURLを環境変数を設定する必要がありました。
.envファイルで環境変数を管理している場合は、下記の記述で設定可能です。
.env
ASSET_URL=https://example.com
余談
無駄にSSL化が適用されていないことや、フロントのビルドツールの設定やオプションに誤りがあるなどを疑ってしまい、解決に時間を費やしてしまいました。。。
今後の自分のためにも忘備録として、記事にさせていただきました。