[AWS] AWS 上の WordPress が HTTPS で正常に表示されない場合の対処

Amazon Web Service Elastic Load Balancing に起因する事例。

[markdown]
## 症状

– HTTPS でアクセスしているが JavaScript や CSS が HTTP で呼ばれており、表示が乱れている。
– ログインもできない。

当初はサイト URL の設定を疑ったが、これでは解決しません。

> * [サイト URL の変更 – WordPress Codex 日本語版](https://wpdocs.osdn.jp/%E3%82%B5%E3%82%A4%E3%83%88_URL_%E3%81%AE%E5%A4%89%E6%9B%B4)

## 対応

サーバ構成図などの情報が得られなかったが、AWS 上で構築されているらしいとの情報あり。
[Elastic Load Balancing](https://aws.amazon.com/jp/elasticloadbalancing/) （以下、ELB）の振る舞いが原因ではないかと推測し、同様の症状を探しました。

具体的にはこちらが見つかりました。
ありがとうございます。

> * [ELB + SSL + WordPressについて | 日記の間 | あかつきのお宿](https://norm-nois.com/blog/archives/3869)
> * [【AWS+ELB+SSL+Wordpres】ELB配下のWordpressでサイト全体をSSL化しようとしてハマった – zuntan02のはてなブログ](http://zuntan02.hateblo.jp/entry/2016/07/01/204208)

WordPress Codex には、以下の記述がありました。

> Websites behind load balancers or reverse proxies that support HTTP_X_FORWARDED_PROTO can be fixed by adding the following code to the wp-config.php file, above the require_once call:
>
> [Function Reference/is ssl « WordPress Codex](https://codex.wordpress.org/Function_Reference/is_ssl)

wp-config.php の冒頭に下記の記述を書き加え、解決しました。

“`php:wp-config.php
if (isset($_SERVER[‘HTTP_X_FORWARDED_PROTO’]) && $_SERVER[‘HTTP_X_FORWARDED_PROTO’] == ‘https’)
$_SERVER[‘HTTPS’] = ‘on’;
“`

PHP の[スーパーグローバル変数](http://php.net/manual/ja/language.variables.superglobals.php)の値を書き換えています。

> * [PHP: $_SERVER – Manual](http://php.net/manual/ja/reserved.variables.server.php)

## 何故なのか

ELB の SSL Termination 機能により、アプリ側は HTTPS ではなく HTTP リクエストを受け取っていた。
これにより挙動が変わっていた。

ELB の設定と振る舞いに関しては、こちらが大変参考になりました。
ありがとうございます。

> * [SSL Termination(ELB)でアプリ(EC2)がHTTPSのチェックを行えない場合 | cloudpack.media](https://cloudpack.media/525)

3つの解決策が提案されていました。

### アプリケーション

> アプリ側で `HTTP_X_FORWARDED_PROTO` の値が `https` かどうかチェックする。
> PHP の場合は、`$_SERVER[‘HTTP_X_FORWARDED_PROTO’]`。

### Web サーバ

> Webサーバ(Apache)の設定(httpd.conf)で環境変数をセットする。

“`prettyprinted
SetEnvIf X-Forwarded-Proto https HTTPS=on
“`

### ELB

> ELBでSSLの処理(SSL Termination)をした後に、再度HTTPS通信にして、EC2にリクエストする。
> この場合ELB経由でもEC2のWebサーバはHTTPSで接続される。

## 補遺

> * [AWS-CloudDesignPattern](http://aws.clouddesignpattern.org/index.php/%E3%83%A1%E3%82%A4%E3%83%B3%E3%83%9A%E3%83%BC%E3%82%B8)

[/markdown]