読者です 読者をやめる 読者になる 読者になる

コーヒーアンドキーボード

コーヒーとキーボードにまみれて生活してます。一応専門はデジタルマーケ。

No usable default provider could be found for your system.

なんかvagrant upするとエラーが出て困っていたのだけど、単にvagrantは入っていたけどvartualboxが入っていなかっただけっていうオチだったのでエラーメッセージをメモしておく。

$ vagrant up
No usable default provider could be found for your system.

Vagrant relies on interactions with 3rd party systems, known as
"providers", to provide Vagrant with resources to run development
environments. Examples are VirtualBox, VMware, Hyper-V.

The easiest solution to this message is to install VirtualBox, which
is available for free on all major platforms.

If you believe you already have a provider available, make sure it
is properly installed and configured. You can see more details about
why a particular provider isn't working by forcing usage with
`vagrant up --provider=PROVIDER`, which should give you a more specific
error message for that particular provider.

なんかvagrant-awsを入れてからアンインストールしたらなった気がするけど、vagrant-awsがそもそもvartualbox不要だったから気が付かなかったのかな。

1x1透過Gifによる広告のインプレッション計測

1x1透過Gifによるインプレッション計測を行うためのメモ。まず、DNS設定でb.danshihack.comをロギング用のサーバーのIPアドレスに飛ぶばすように設定。次にサーバー側で1x1透過Gifを設置して、rooting設定する。

server {
    listen      80;
    server_name b.danshihack.com;
    root        /var/www/vhosts/b.danshihack.com;
    index       b;
    charset     utf-8;

    access_log  /var/log/nginx/b.danshihack.com.access.log  main;
    error_log   /var/log/nginx/b.danshihack.com.error.log;
    
}

あとは/var/www/vhosts/b.danshihack.com/bに1x1透過Gifを置いて完成。画像はここ(↓)からいただきました。

空白スペース用☆透過画像

PHPでCSSキャッシュバスターを実装する(その2)

前回設定したキャッシュバスターですが、メインのCSSにだけ利用していたのですが、JSにも使ってみることにしました。

というのも、男子ハックで は海外のCDNサービスであるCloudFlareを使っているので、HTMLやら画像やらJSがキャッシュされていて、毎度それを削除するのが非常に面倒なんです。

ということでWordpressの関数とPHPを組み合わせてこんな感じになりました。

<?php
function echo_url_with_filedate($file_name) {
    $tmp_dir_uri = get_template_directory_uri();
    $file_path = dirname(__FILE__)."/".$file_name;
    if (file_exists($file_path)) {
        $file_date = date('YmdHis', filemtime($file_path));
        echo $tmp_dir_uri."/".$file_name."?date=".$file_date;
?>
<script src="<?php echo_url_with_filedate("js/content-auto-adsense.js") ;?>"></script>

こいつを使うとURLのクエリパラメータにCSSやJSファイルを編集した時刻が挿入されるので、編集するたびにブラウザくんが新しいファイルを読みに行ってくれるわけです。

// いままで
<script src="http://www.danshihack.com/wp-content/themes/cedar/js/content-auto-adsense.js"></script>

// これから
<script src="http://www.danshihack.com/wp-content/themes/cedar/js/content-auto-adsense.js?date=20141103121536"></script>

ここを参考にしました。

キャッシュを有効にしつつ、cssやjsファイルの変更を確実に反映させる | doop

mitmproxyを導入したい

今回導入したいのはこれ。CUIでProxy監視ができるらしい。

mitmproxy - home

ここで知りました。

CUIならmitmproxy、MacでGUIならCharlesがオススメ - supermomonga のコメント / はてなブックマーク

インストール

Macからpipで突っ込もうとするとエラー

brew install mitmproxy

足りないパッケージを順に入れます。

sudo pip install flask
xcode-select --install
sudo pip install Pillow
brew install mitmproxy
No module named lxml.html
sudo pip install lxml

はまったところ

PILがどうしても入らなかったが、Qiita見たらxcodeいじれって書いてありました。

MacをMarvericksにアップデートしたらPythonのライブラリが行方不明になっちゃっていたので、入れなおしていたら、こんな状況でPILが入りませんでした。 色々ググってみつけたのが、このあたりのstack overflow

MarvericksにしてPILのインストールがコケる件 - Qiita

PHPでCSSキャッシュバスターを実装する

WordPressで負荷軽減のためにキャッシュを利用することは珍しいことではないんですが、だいたいCSSのキャッシュが効きっぱなしで変更が上手くできたのか、イマイチ判断できないので、CSSキャッシュバスターを導入する。

ここをパクって実装したんだけど、毎回'file not found'が出てしまいハマる。

function echo_filedate($filename) {
    if (file_exists($filename)) {
        echo date('YmdHis', filemtime($filename));
    } else {
        echo 'file not found';
    }
}

原因はfilenameの指定が間違っていたから。 dirname付きで指定してあげれば解決。

<link rel="stylesheet" href="<?php echo $td ;?>/css/mobile.css?date=<?php echo_filedate(dirname(__FILE__).'/css/mobile.css'); ?>">

結果として、こんな感じでCSSの更新時間に応じてHTMLのCSS読み込みが変化します。

<link rel="stylesheet" href="http://www.danshihack.com/wp-content/themes/cedar/css/pc.css?date=20140615093917">

参考 : キャッシュを有効にしつつ、cssやjsファイルの変更を確実に反映させる | doop

CloudFlare経由のアクセスログを正しいIPアドレスに書き換えたい

問題

CloudFlareがCDNしてくれるので、サーバーの負荷が少なくて嬉しいんですが、問題もあって、アクセスログIPアドレスがCloudFlareサーバーになってしまうんです。

本来はどこから人が来ているかが知りたくて、もっと言えば、変なアタックをしてくる輩のIPアドレスが知りたいのです。だから、Nginxのアクセスログを由緒正しい元のIPに書き換える方法を調べました。

あ、ApacheじゃなくてNginxのときのケースです。

対策

NginxのHttpRealipModuleを使います。Nginxのバージョンを見て「--with-http_realip_module"」が入っていればOK。どうやらAmimotoには標準装備になっているみたい。

$ nginx -V
nginx version: nginx/1.4.7
built by gcc 4.8.2 20131212 (Red Hat 4.8.2-7) (GCC) 
TLS SNI support enabled
configure arguments: --prefix=/usr/share/nginx --sbin-path=/usr/sbin/nginx --conf-path=/etc/nginx/nginx.conf --error-log-path=/var/log/nginx/error.log --http-log-path=/var/log/nginx/access.log --http-client-body-temp-path=/var/lib/nginx/tmp/client_body --http-proxy-temp-path=/var/lib/nginx/tmp/proxy --http-fastcgi-temp-path=/var/lib/nginx/tmp/fastcgi --http-uwsgi-temp-path=/var/lib/nginx/tmp/uwsgi --http-scgi-temp-path=/var/lib/nginx/tmp/scgi --pid-path=/var/run/nginx.pid --lock-path=/var/lock/subsys/nginx --user=nginx --group=nginx --with-file-aio --with-ipv6 --with-http_ssl_module --with-http_spdy_module --with-http_realip_module --with-http_addition_module --with-http_xslt_module --with-http_image_filter_module --with-http_geoip_module --with-http_sub_module --with-http_dav_module --with-http_flv_module --with-http_mp4_module --with-http_gunzip_module --with-http_gzip_static_module --with-http_random_index_module --with-http_secure_link_module --with-http_degradation_module --with-http_stub_status_module --with-http_perl_module --with-mail --with-mail_ssl_module --with-pcre --with-google_perftools_module --with-debug --with-cc-opt='-O2 -g -pipe -Wall -Wp,-D_FORTIFY_SOURCE=2 -fexceptions -fstack-protector --param=ssp-buffer-size=4 -m64 -mtune=generic' --with-ld-opt=' -Wl,-E'

うん、うちの場合は無事入っていました。

参考:suz-lab - blog: NginxでELB対策(アクセスログにクライアントIP)

あとは、CloudFlareのIPアドレスを指定して、リアルなIPに書き換える命令を渡すだけです。

# Cloudflare
set_real_ip_from   199.27.128.0/21;
set_real_ip_from   173.245.48.0/20;
set_real_ip_from   103.21.244.0/22;
set_real_ip_from   103.22.200.0/22;
set_real_ip_from   103.31.4.0/22;
set_real_ip_from   141.101.64.0/18;
set_real_ip_from   108.162.192.0/18;
set_real_ip_from   190.93.240.0/20;
set_real_ip_from   188.114.96.0/20;   
set_real_ip_from   197.234.240.0/22;
set_real_ip_from   198.41.128.0/17;
set_real_ip_from   162.158.0.0/15;
set_real_ip_from   104.16.0.0/12;
set_real_ip_from   2400:cb00::/32;
set_real_ip_from   2606:4700::/32;
set_real_ip_from   2803:f800::/32;
set_real_ip_from   2405:b500::/32;
set_real_ip_from   2405:8100::/32;
real_ip_header     CF-Connecting-IP;

あ、書きこむ場所はhttp {}の中みたいです。

実は...

公式ヘルプにも情報があったんですね。

参考:Does CloudFlare have an IP module for Nginx? – CloudFlare Support

AWSの複数インスタンス間でWordPressのファイルを同期して冗長化(Lsyncd & Rsync)

何度もハマって、丸一日溶かしたのですが、最終的できたのはこの方法。

Nginx + lsyncd で WordPress を負荷分散させる | dogmap.jp

やりたい事

  • AWSWordPressの開発環境と本番環境を運用したい。
  • 問題となるのは本番環境では、wp-content/uploadsやwp-content/pluginが 日々更新され、差分がでてくる。
  • WP内の特定フォルダを指定して「本番環境→開発環境」へ同期したい。

構成

全体のイメージ

日々の更新を開発環境へ反映

wp-content/uploadsとwp-content/plugin ※今回やるのはこれ

開発環境 <---- (Lsyncd & Rsync) <---- 本番環境

MySQL

開発環境 <---- (Lsyncd & Rsync) <---- 本番環境

テーマ開発をで管理して本番へデプロイ

wp-content/themes

開発環境 ----> (GitHub) ----> 本番環境

本番環境(サーバー1)

Lsyncd をインストール

sudo yum -y install rsync xinetd

設定ファイルで注意をしたいのはsync.targetに記載する接続先。 AWS EC2のPrivateIPを入れること。ElasticIPじゃないよ。(当たり前なのかもしれないですが)

settings{
    statusFile = "/tmp/lsyncd.stat",
    statusInterval = 1,
    logfile = "/var/log/lsyncd/lsyncd.log",
}

sync {
    default.rsync,
    source = "/var/www/vhosts/i-xxxxxxxx/wp-content/test/",
    target = "[開発環境(サーバー2)]::test",
}

開発環境(サーバー2)

xinetd をインストール。(rsyncAWSの場合は既に入っているはず)

sudo yum -y install xinetd

設定ファイルで注意をしたいのはhosts allowの設定もAWS EC2のPrivateIPを入れること。 また、ここで指定した名前[test]がLsyncd側でtarget指定する名前になります。

log file = /var/log/rsyncd.log
[test]
    path = /var/www/vhosts/i-xxxxxxxx/wp-content/test
    hosts allow = [本番環境(サーバー1)]
    hosts deny = *
    list = true
    uid = root
    gid = root
    read only = false