Edited at

ELB配下のEC2にCakePHPアプリケーションを置いたらCSSが当たらない


概要

自社開発したサービスをELBにぶら下げたEC2インスタンスにデプロイしていざアクセスするとリダイレクト処理が繰り返し行われるというエラーが起こった。AWSで構築されたサイトをSSL化しようとしたらリダイレクトループではまったを参考に.htaccessを編集してそれを解消したら今度はcssが当たらないという状態になり。きっと.htaccessがまだ間違ってるんだろうと深みにハマった。結局、ELBの仕組みを把握してないことから招いたエラーだった。


結論(原因と変更)


  • 構成: ->port443->ELB->port80->EC2

  • ELBからEC2への通信にはポート80で通信していた。

  • コード中でポート80での通信の時はフルパスをhttp://~に設定する記述をしていた。

    if($_SERVER["HTTP_PORT"] == 443){

define('SITE_URL', 'https://' . $_SERVER["SERVER_NAME"]); //本番環境の場合
}else{
define('SITE_URL', 'http://' . $_SERVER["SERVER_NAME"]); //ローカル環境の場合
}


  • http://~のパスでcssをリクエストしてたのでnotfoundを返してスタイルが当たらなかった。

  • 設定部分で["HTTP_X_FORWARDED_PORT"]を参照するように変更した。

    if($_SERVER["HTTP_X_FORWARDED_PORT"] == 443){

define('SITE_URL', 'https://' . $_SERVER["SERVER_NAME"]); //ELBでSSL監視してる場合
}else{
define('SITE_URL', 'http://' . $_SERVER["SERVER_NAME"]); //ローカル環境の場合
}

※ここから下は細かい話です


.htaccessを疑う

まず最初にこの現象が発生した。

AWSで構築されたサイトをSSL化しようとしたらリダイレクトループではまった

(あんまりよく読まずに)なるほどこの.htaccessの内容にすればいいのねと丸コピして適応。

んでこのエラーは解決したものの今度はcssが当たらないという事態が発生。

キャプチャ.PNG

赤いところ全部参照できてない。調べてみたら全部http://~のパスで探してる。https://~じゃないからnotfoundになってエラーが吐かれてた。


httpsなのにportが80?

適当な画面でvar_dump($_SERVER[HTTP_PORT])してポート番号を確認すると80番と返される。httpsリクエストしてるのになんで80なんや??と混乱。きっとさっき編集した.htaccessでまだ変更しないといけないんだろうとググって調べて分からなくてハマる。


ELBの働きを知ろう!

解決できなくて消耗しまくる。んでアーキテクチャ構成担当者に相談したところ

HTTP ヘッダーおよび クラシックロードバランサーを読んでときた。

ELBはポート443でリクエストを受け付けてEC2のポート80に受け渡すのが役割。

つまり$_SERVER[HTTP_PORT]は80を返す!

ELBを通った時HTTPヘッダーに["HTTP_X_FORWARDED_PORT"]という項目が追加され、これがELBへアクセスされたポート(443)が格納されているのでこれを利用してコードを変更して解決できた!

初歩的なエラーながらかなりてこずったけれどELBの仕組みとかアーキテクチャの理解が深まったのでいい経験だった。ご参考になれば幸いです。