AWSWordpress日記

AWS ELB WordPress SSL https ロードバランサーを使用した構成

By
2 Mins read
382
0
Share

AWS
ELB（ロードバランサー）
SSL
Apache 2.4.39
Wordpress 5.1

■通信環境
クライアントPC
↓
(port:443)
↓
ELB[SSL証明書設定][ELBルールで外部からの80アクセスは443へリダイレクト]
↓
(port:80)
↓
EC2(EC2内は80設定のみでOK)

■事象
・ブラウザからメインhttps(443)へアクセス
・EC2内は80環境として設定しているのでWordpressはhtml生成時にcssなどheader内URLをhttp(80)とする
・ブラウザがheader内URLにメインURLと違うhttp(80)が存在するとセキュリティエラーとして読み込みストップ
・ブラウザ上に正しくhtmlが表示されない

■.htaccessのrewriteのみパターン

# BEGIN K.Miyakoshi

# AWS ELBからのアクセスをHTTPSへ変更する
SetEnvIf X-Forwarded-Proto ^https$ HTTPS=on

# httpアクセスをhttpsへリダイレクトする
RewriteEngine On
RewriteCond %{HTTP:X-Forwarded-Proto} ^http$
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R,L]

# END K.Miyakoshi

# BEGIN WordPress

RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]

# END WordPress

■「conf.d」などvhost.confなどでガッツリパターン

#============================================
# ELB 共通ログ対応 K.Miyakoshi
#============================================
# AWS ELB 対応 クライアントIP取得のため[%{X-Forwarded-For}i]追加
LogFormat "%{X-Forwarded-For}i:%{X-Forwarded-Port}i %h %l %u %t \"%r\" %>s %b \"%{Referer}i\" \"%{User-Agent}i\"" elb-accesslog
ErrorLogFormat "[%{u}t] [%-m:%l] [pid %P:tid %T] %7F: %E: [client\ %{X-Forwarded-For}i:%{X-Forwarded-Port}i %a] %M% ,\ referer\ %{Referer}i"

# AWS ELB 対応 ヘルスチェックアクセスを通常ログから除外
SetEnvIf User-Agent "ELB-HealthChecker.*" nolog
# AWS ELB 対応 ヘルスチェックアクセスを別ログファイルに出力する設定
SetEnvIf User-Agent "ELB-HealthChecker.*" elb-log
# imgやjsなどログから除外
SetEnvIf Request_URI "\.(gif|jpg|png|ico|jpeg|js|css)$" nolog

# 通常のログ設定
CustomLog logs/access_log elb-accesslog env=!nolog
ErrorLog logs/error_log

#============================================
# ELB WordPress 対策 https(443)→http(80)リダイレクト問題
#============================================
# AWS ELBがhttpsで受けている場合はHTTPSを有効にする
SetEnvIf X-Forwarded-Proto ^https$ HTTPS=on

# httpアクセスはhttpsにリダイレクトする
<IfModule mod_rewrite.c>
	RewriteEngine On
	RewriteCond %{HTTP:X-Forwarded-Proto} ^http$
	RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R,L]
</IfModule>

#============================================
# default
# ELBのヘルスチェックに使用(Aliasでも良い)
#============================================
<VirtualHost _default_:80>
	ServerName _default_:80
	ServerAdmin admin@hoge.com

	DocumentRoot "/opt/lampp/htdocs"
	<Directory "/opt/lampp/htdocs">
		AllowOverride All
		Options FollowSymLinks
		Require all granted

		Options +IncludesNoExec
		AddOutputFilter INCLUDES html
	</Directory>

	CustomLog "| /opt/lampp/bin/rotatelogs /opt/lampp/logs/htdocs/access_%Y%m%d.log 86400 540" elb-accesslog env=!nolog
	CustomLog "| /opt/lampp/bin/rotatelogs /opt/lampp/logs/htdocs/elb_%Y%m%d.log 86400 540" elb-accesslog env=elb-log
	ErrorLog "| /opt/lampp/bin/rotatelogs /opt/lampp/logs/htdocs/error_%Y%m%d.log 86400 540"

</VirtualHost>

#============================================
# taro.hoge.com
#============================================
<VirtualHost *:80>
	ServerName taro.hoge.com
	ServerAdmin admin@hoge.com

	DocumentRoot "/opt/lampp/taro"
	<Directory "/opt/lampp/taro">
		AllowOverride All
		Options FollowSymLinks
		Require all granted
	</Directory>

	CustomLog "| /opt/lampp/bin/rotatelogs /opt/lampp/logs/taro/access_%Y%m%d.log 86400 540" elb-accesslog env=!nolog
	# AWS ELB に[taro.hoge.com]DNSに紐づいて設定せれていればログ出力される
	CustomLog "| /opt/lampp/bin/rotatelogs /opt/lampp/logs/taro/elb_%Y%m%d.log 86400 540" elb-accesslog env=elb-log
	ErrorLog "| /opt/lampp/bin/rotatelogs /opt/lampp/logs/taro/error_%Y%m%d.log 86400 540"

</VirtualHost>

#============================================
# jiro.hoge.com
#============================================
<VirtualHost *:80>
	ServerName jiro.hoge.com
	ServerAdmin admin@hoge.com

	DocumentRoot "/opt/lampp/jiro"
	<Directory "/opt/lampp/jiro">
		AllowOverride All
		Options FollowSymLinks
		Require all granted
	</Directory>

	CustomLog "| /opt/lampp/bin/rotatelogs /opt/lampp/logs/jiro/access_%Y%m%d.log 86400 540" elb-accesslog env=!nolog
	# AWS ELB に[jiro.hoge.com]DNSに紐づいて設定せれていればログ出力される
	CustomLog "| /opt/lampp/bin/rotatelogs /opt/lampp/logs/jiro/elb_%Y%m%d.log 86400 540" elb-accesslog env=elb-log
	ErrorLog "| /opt/lampp/bin/rotatelogs /opt/lampp/logs/jiro/error_%Y%m%d.log 86400 540"

</VirtualHost>

#============================================
382
0
Share
Related posts
LinuxPHPWordpressパソコンのこと

Wordpress "mixed content the page at ' url ' was loaded over https" nginx reverse proxy

By
1 Mins read

Nginx のリバースプロキシ環境において、フロントエンドの Nginx が 443 (HTTPS) でリクエストを受け付け、内部では 80 (HTTP) でラウンドロビン方式の負荷分散を行っている場合、Chrome で Mixed Content エラー が発生することがあります。

この問題を解決するために、wp-config.php の冒頭に以下の設定を追加すると効果的です。

/** mixed content the page at ' url ' was loaded over https wordpress nginx */
/** プロキシ設定の場合、httpsでリダイレクトするように設定が必要！ */
/** HTTP_X_FORWARDED_FOR の環境変数名はAWSなどお使いのサーバー環境により若干変更されている時があるので要確認すること */
if (!empty($_SERVER['HTTP_X_FORWARDED_FOR'])) {
    $_SERVER['HTTPS'] = 'on';
}

内部では 80 (HTTP)側の nginx.conf ファイルを操作できる方は、以下の設定でも対応可能です。

どちらかお好みでOK

location ~ \.php$ {
    include fastcgi_params;

    # mixed content the page at ' url ' was loaded over https wordpress nginx
    # プロキシ設定の場合、httpsでリダイレクトするように設定が必要！ここから
    fastcgi_param HTTPS on;
    fastcgi_param HTTP_X_FORWARDED_PROTO https;
    # ここまで

    fastcgi_intercept_errors on;
    fastcgi_pass php-fpm;
    fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
}
Windows11パソコンのこと日記

リモートデスクトップ 音が出ない Windows11

By
1 Mins read
  • 状況
    • リモートデスクトップ接続でリモート側のアプリからホストへ音が出ない場合
    • リモート側のSleep後に音が出なくなった場合
  • 環境
    • host側：Windows11 22H2
    • remote側：Windows11 22H2
  • 対応方法
    • remote側のWindowsの検索で「service」と入力
    • サービスアプリをダブルクリックで起動する
    • 「Windows Audio」というサービスを選択し、右クリックから「サービスの再起動」
日記

Swagger EditerをDockerでローカル起動

By
1 Mins read

swagger

API開発で設計したDocment管理として使用できサンプルコードとしてJSONにしてくれて、よしなにPostmanみたいな動きしてくれるやつ

最近現場で使っているところが増えてる

ローカルでサーバー起動（例は３つ、外部APIサーバーが３つある場合などなど）

docker pull swaggerapi/swagger-editor
docker run -d -p 8090:8080 swaggerapi/swagger-editor
docker run -d -p 8091:8080 swaggerapi/swagger-editor
docker run -d -p 8092:8080 swaggerapi/swagger-editor

http://localhost:8090 などをブラウザで開き

ソース管理と一緒にリポジトリ内などにあるyamlファイル内容をコピペでブラウザ左Windowへ貼り付け

get、postなどテストをおこなう

※APIなので多少仕様の理解が必要となる

よく一緒に使われるのが OpenAPI

こちらはAPI設計ファイルとなったyamlファイルを読み込ませることにより指定した言語としてI/O部分のソースコードを自動でジェネレートしてくれるツール、ただし良いところばかりではなく、間違ったソースもジェネレートしてくるから地雷除去が必要な場面に出くわすこと多い

 

 

チームを強化する

サービスの
サブスクリプションの利点を説明するテキストを追加します。