Laravel × EC2ロードバランサ(ELB)でSSL化したアプリケーションのCSSが崩れる
前提
- ACMでSSL証明書を作成
- ロードバランサーの作成
- Route53で設定を変更する
- セキュリティグループの変更
参考サイトを元に上記を進めて、サイト自体はSSL化した状態で表示できる。しかしCSSが全く効いていない状態。
現象
Laravel * EC2環境でデプロイしたものをSSL化したのだが、Mixed Contentのエラーが出てしまってhttpsのURLにはアクセスできるが、中身のコンテンツが全部httpのURLに生成されてしまっていて、スタイルが効かない状態になってしまっていた。
Nginxの設定かな？とも思ったが、今回はロードバランサーでSSL化したので、Nginxの設定はそのままで解決できました。
開発環境
Amazon Linux 2023
Nginx 1.22.1
MySQL 8.0
Laravel 9
php 8.1
原因
Laravelの公式ドキュメントに原因が書かれていた
TLS／SSL証明を行うロードバランサの裏でアプリケーションが実行されている場合、アプリケーションがときどきHTTPSリンクを生成しないことに、気づくでしょう。典型的な理由は、トラフィックがロードバランサにより８０番ポートへフォワーディングされるため、セキュアなリンクを生成すべきだと判断できないからです。
解決策
信用するプロキシの設定をLaravel側でする必要があるみたい。
App\Http\Middleware\TrustProxiesミドルウェアを使用すると、アプリケーションにとって信用できるロードバランサやプロキシを簡単にカスタマイズすることができる。
信用できるプロキシをこのミドルウェアの
headersも設定できます。 proxiesプロパティへ配列としてリストしてください。信用するプロキシの設定に加え、信用できるプロキシの
と、公式ドキュメントには書かれている。
↓こんな感じで配列にリストしていく。
protected $proxies = [
'192.168.1.1',
'192.168.1.2',
];
AWSの場合はロードバランサのIPアドレスがわからないため*を書く。
Amazon AWSや他の「クラウド」ロードバランサプロバイダを使用している場合は、実際のバランサのIPアドレスは分かりません。このような場合、全プロキシを信用するために、*を使います。
protected $proxies = '*';
全文
<?php
namespace App\Http\Middleware;
use Illuminate\Http\Middleware\TrustProxies as Middleware;
use Illuminate\Http\Request;
class TrustProxies extends Middleware
{
/**
* The trusted proxies for this application.
*
* @var array<int, string>|string|null
*/
protected $proxies = '*';
/**
* The headers that should be used to detect proxies.
*
* @var int
*/
protected $headers =
Request::HEADER_X_FORWARDED_FOR |
Request::HEADER_X_FORWARDED_HOST |
Request::HEADER_X_FORWARDED_PORT |
Request::HEADER_X_FORWARDED_PROTO |
Request::HEADER_X_FORWARDED_AWS_ELB;
}
参考URL
Discussion