Kusanagi Nginx に Google PageSpeed を追加する方法

既存の Kusanagi の Nginx にGoogle の PageSpeed モジュールを追加してみた。

 

 

PageSpeed Nginx の作成+設置方法

以下の方法は既にインストールされている nginx に PageSpeed モジュールを追加する場合に応用できる。

 

まず、既存の nginx の configure オプションを調べる。

 

# rpm -qa|g nginx
kusanagi-nginx-1.15.2-3.noarch

nginx -V

nginx version: nginx/1.15.2
built by gcc 4.8.5 20150623 (Red Hat 4.8.5-28) (GCC)
built with OpenSSL 1.0.2p 14 Aug 2018
TLS SNI support enabled
configure arguments: --conf-path=/etc/nginx/nginx.conf --add-module=./extensions/naxsi/naxsi_src --sbin-path=/usr/sbin/nginx --error-log-path=/var/log/nginx/error.log --http-log-path=/var/log/nginx/access.log --pid-path=/var/run/nginx.pid --lock-path=/var/run/nginx.lock --http-client-body-temp-path=/var/cache/nginx/client_temp --http-proxy-temp-path=/var/cache/nginx/proxy_temp --http-fastcgi-temp-path=/var/cache/nginx/fastcgi_temp --http-uwsgi-temp-path=/var/cache/nginx/uwsgi_temp --http-scgi-temp-path=/var/cache/nginx/scgi_temp --user=nginx --group=nginx --with-http_ssl_module --with-http_realip_module --with-http_addition_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_stub_status_module --with-http_auth_request_module --with-mail --with-mail_ssl_module --with-file-aio --with-http_v2_module --with-http_image_filter_module --with-http_geoip_module --with-http_perl_module --add-module=./extensions/ngx_cache_purge --add-module=./extensions/nginx-ct --add-module=./extensions/ngx_brotli --add-module=./extensions/passenger/src/nginx_module --with-cc-opt='-O2 -g -pipe -Wp,-D_FORTIFY_SOURCE=2 -fexceptions -fstack-protector --param=ssp-buffer-size=4 -m64 -mtune=generic -I/usr/local/openssl/include' --with-ld-opt=-L/usr/local/openssl/lib --prefix=/etc/nginx

 

 

の通りにしてみる。

 

 

NPS_VERSION=1.13.35.2-stable
cd
wget https://github.com/apache/incubator-pagespeed-ngx/archive/v${NPS_VERSION}.zip
unzip v${NPS_VERSION}.zip
nps_dir=$(find . -name "*pagespeed-ngx-${NPS_VERSION}" -type d)
cd "$nps_dir"
NPS_RELEASE_NUMBER=${NPS_VERSION/beta/}
NPS_RELEASE_NUMBER=${NPS_VERSION/stable/}
psol_url=https://dl.google.com/dl/page-speed/psol/${NPS_RELEASE_NUMBER}.tar.gz
[ -e scripts/format_binary_url.sh ] && psol_url=$(scripts/format_binary_url.sh PSOL_BINARY_URL)
wget ${psol_url}
tar -xzvf $(basename ${psol_url})  # extracts to psol/

NGINX_VERSION=1.15.3
cd
wget http://nginx.org/download/nginx-${NGINX_VERSION}.tar.gz
tar -xvzf nginx-${NGINX_VERSION}.tar.gz
cd nginx-${NGINX_VERSION}/

## kusanagi nginx に最初から組み込まれているモジュールのソースを取ってくる。 mkdir extensions cd extensions git clone https://github.com/nbs-system/naxsi.git git clone https://github.com/grahamedgecombe/nginx-ct.git git clone https://github.com/google/ngx_brotli.git git clone https://github.com/FRiCKLE/ngx_cache_purge.git wget https://www.phusionpassenger.com/latest_stable_tarball tar xzvf latest_stable_tarball mv passenger-5.3.5 passenger cd ./extensions/ngx_brotli && git submodule update --init && cd /root/nginx-1.15.3 ln -s /usr/bin/ruby2.4 /usr/bin/ruby ln -s /usr/bin/rake2.4 /usr/bin/rake yum install curl-devel ruby rubygem-rake perl-ExtUtils-Embed ./configure --add-module=$HOME/$nps_dir ${PS_NGX_EXTRA_FLAGS} --conf-path=/etc/nginx/nginx.conf --add-module=./extensions/naxsi/naxsi_src --sbin-path=/usr/sbin/nginx --error-log-path=/var/log/nginx/error.log --http-log-path=/var/log/nginx/access.log --pid-path=/var/run/nginx.pid --lock-path=/var/run/nginx.lock --http-client-body-temp-path=/var/cache/nginx/client_temp --http-proxy-temp-path=/var/cache/nginx/proxy_temp --http-fastcgi-temp-path=/var/cache/nginx/fastcgi_temp --http-uwsgi-temp-path=/var/cache/nginx/uwsgi_temp --http-scgi-temp-path=/var/cache/nginx/scgi_temp --user=nginx --group=nginx --with-http_ssl_module --with-http_realip_module --with-http_addition_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_stub_status_module --with-http_auth_request_module --with-mail --with-mail_ssl_module --with-file-aio --with-http_v2_module --with-http_image_filter_module --with-http_geoip_module --with-http_perl_module --add-module=./extensions/ngx_cache_purge --add-module=./extensions/nginx-ct --add-module=./extensions/ngx_brotli --add-module=./extensions/passenger/src/nginx_module --with-cc-opt='-O2 -g -pipe -Wp,-D_FORTIFY_SOURCE=2 -fexceptions -fstack-protector --param=ssp-buffer-size=4 -m64 -mtune=generic -I/usr/local/openssl/include' --with-ld-opt=-L/usr/local/openssl/lib --prefix=/etc/nginx cp -af /usr/sbin/nginx /usr/sbin/nginx.org.kusanagi # バックアップしておく make make install

 

以上で新しいNginx+ PageSpeed ができた。

kusanagi /usr/sbin/nginx  が入れかわった。

設定ファイルの編集

/etc/nginx/nginx.conf の http セクション内の最後の方に挿入追記する。

 

http {

pagespeed UsePerVhostStatistics on; pagespeed FileCachePath "/var/cache/nginx/ngx_pagespeed"; pagespeed MessageBufferSize 100000;
pagespeed GlobalAdminPath /pagespeed/pagespeed_global_admin;
pagespeed GlobalStatisticsPath /pagespeed/ngx_pagespeed_global_statistics;
pagespeed StaticAssetPrefix /pagespeed/pagespeed_static;
}

/etc/nginx/conf.d/mydomain_ssl.conf  の server セクションに次を挿入する。

server {
pagespeed On;
pagespeed FileCachePath "/var/cache/nginx/ngx_pagespeed";
pagespeed EnableFilters collapse_whitespace,trim_urls,remove_comments;
pagespeed StatisticsPath /pagespeed/ngx_pagespeed_statistics;
pagespeed MessagesPath /pagespeed/ngx_pagespeed_message;
pagespeed ConsolePath /pagespeed/pagespeed_console;
pagespeed AdminPath /pagespeed/pagespeed_admin;
pagespeed BeaconUrl /pagespeed/ngx_pagespeed_beacon;
pagespeed Statistics on;
pagespeed StatisticsLogging on;
pagespeed LogDir /var/log/pagespeed;
pagespeed Domain *;
pagespeed Domain *.com;
pagespeed EnableCachePurge on;

location /pagespeed/ {
auth_basic "Restricted"; # 認証時に表示されるメッセージ
auth_basic_user_file /pagespeed/.htpasswd; # .htpasswdファイルのパス
}

# Ensure requests for pagespeed optimized resources go to the pagespeed handler
# and no extraneous headers get set.
location ~ "\.pagespeed\.([a-z]\.)?[a-z]{2}\.[^.]{10}\.[^.]+" {
add_header "" "";
}
location ~ "^/pagespeed_static/" { }
location ~ "^/ngx_pagespeed_beacon$" { }



}

 

 

* https://mydomain.npn/pagespeed/pagespeed_admin/

 

にアクセスすると、現在の設定状況、統計情報などが表示される。

 

 

今現在、次のフィルターが有効になっている。

Version: 14: on

Filters
ah	Add Head
cw	Collapse Whitespace
cc	Combine Css
jc	Combine Javascript
gp	Convert Gif to Png
jp	Convert Jpeg to Progressive
jw	Convert Jpeg To Webp
mc	Convert Meta Tags
pj	Convert Png to Jpeg
ws	When converting images to WebP, prefer lossless conversions
ec	Cache Extend Css
ei	Cache Extend Images
es	Cache Extend Scripts
fc	Fallback Rewrite Css 
if	Flatten CSS Imports
hw	Flushes html
ci	Inline Css
ii	Inline Images
il	Inline @import to Link
ji	Inline Javascript
js	Jpeg Subsampling
tu	Left Trim Urls
rj	Recompress Jpeg
rp	Recompress Png
rw	Recompress Webp
rc	Remove Comments
ri	Resize Images
cf	Rewrite Css
jm	Rewrite External Javascript
jj	Rewrite Inline Javascript
cu	Rewrite Style Attributes With Url
cp	Strip Image Color Profiles
md	Strip Image Meta Data

 

WordPress の Autoptimize プラグインで、css と JavaScript を最適化した後に、この pagespeed を on にしている。

 

html のソースを見ると、かなり変換されているようであるが、実際に高速化されているのかはよくわからない。

 

背景画像が表示されていない時

 

背景画像が jpeg から .webp に変換されていて、not found で表示されない頁があった。

それでその頁のキャッシュを一度削除したらよくなった。

 

pagespeed EnableCachePurge on;

 

にしないといけない。

 

* https://mydomain.npn/pagespeed/pagespeed_admin/cache#purge_cache

 

でキャッシュをパージ Purge 除去できる。

 

どうやら、ブラウザが chrome の時だけ .jpeg が.webp に変換される場合があるようだ。

全部の画像が変換されるわけではない。

確かに画像サイズは小さくなっている。が not found にはなってほしくない。

 

 

使用停止

その後、WPP(Wordpress Popular Post)の画像などが表示されていないことに気付き、

 

pagespeed Off;

 

にした。

 

Webmin でシステムアップデートの時に kusanagi-nginx だけアップデートしないようにしたのだが、依存性の問題で勝手にアップデートされてしまった。

それでもとの pagespeed なしのnginxに戻った。

そうなると設定ファイルから pagespeed 関連の行を總て削除しないと nginx は起動しない。

 

pagespeed-nginx は kusanagi-nginx の10倍の大きさがある。

 

-rwxr-xr-x 1 root root 4.3M Oct 10 09:55 /usr/sbin/nginx
-rwxr-xr-x 1 root root  42M Sep 25 14:05 /usr/sbin/nginx.pagespeed

pagespeed の設定で画像だけを置換しないように設定することもできるのだが、今は元に戻したままにしておく。

 

  • GCPからGCPへの移転方法AWS, Azure 等の他のクラウドサーバーからGCP(Google Cloud Platform)に移転する方法はよく論じられているが、GCPのAアカウントからBアカウントに移転するにはどうしたらよいのだろうか? Compute Engine のVMインスタンスを、他のGCP アカウントのCompute Engine に移転又はコピーするにはどうしたらよいのだろうか? プロジェクトの共有 試行錯誤の上、たどり着いたのがプロジェクトの共有であった。GCPのトップページ、ダッシュボードの最初にプロジェクト情報のカードがあり、其の中に「このプロジェクトにユーザーを追加」という項目がある。そこをクリックして、他のGCPアカウントのGma...
  • またまたこのサイトのSSL証明書が期限切れになった。 Kusanagi の自動更新ができていない。 それで手動であれこれしてみても、こんなエラーが出る。# kusanagi update cert Challenge failed for domain makotoiwasaki.com Challenge failed for domain www.makotoiwasaki.com Attempting to renew cert (makotoiwasaki.com) from /etc/letsencrypt/renewal/makotoiwasaki.com.conf produced an unexpected error: Some challenges hav...
  • Google の Indexing API を使うと、新しい投稿記事を瞬時にGoogleの検索エンジンに登録できる。 WordPress のプラグインとしてインデックスAPIが利用できる。使い方は英語だが、この通り: ⏱️ Get Google To Index Your Website Instantly Using the Indexing API ⚡Take a look at how you can use Google's new indexing API & to get your website's pages and content crawled instantly instead of waiting for Google to...
  • Yoast SEO を停止して、Rank Math SEO プラグインを使ってみたらGoogle の検索結果に表示される記事抜粋スニペットの文字数が短過ぎに見えてびっくりした。#1 Yoast Alternative You Deserve - Rank Math SEO vs. Yoast SEORank Math SEO plugin for WordPress is hands down the best Yoast alternative WordPress plugin. And the best thing is, Rank Math is completely FREE!Rank Math
  • WP_CRON を停止して、Linux の crontab に移行する設定をこれまでに何度も試みたがうまくいかなかった。 毎日バックアップされるはずの、UpdraftPlus プラグインのクロンが動いていない。やっと成功した設定方法を記録しておく。wp-config.php に次の行を追加する。define('DISABLE_WP_CRON', true);/var/spool/cron  に、  httpd という名前のファイルを作成し、次の1行を追加する。 所有者を httpd.www など、httpd nginx サーバーの稼働ユーザー名と同じにする。nginx.conf に書いてある。root@s4:/v...
  • Kusanagi WordPress プラットフォームでは Fcache とBcache がある。 Fcache とはNginx ヱブサーバーのキャッシュ機能であり、Kusanagi の独自機能ではない。Nginx のアクセスログを眺めていると、  BYPASS MISS EXPIRED のみで、HITが殆どない。 トップ頁、アーカイブリストの頁ではHIT、 個別投稿頁では、BYPASS MISS EXPIRED ばかりでHITがない。Kusanagi fcache on とすると、fcache は有効になったかのように思えるが、本当にキャッシュが効いているのかどうかはログで確認しないとわからない。まず、Wordpressの編集画面にログインし...
  • HTTPD アクセスログの日本語化 Nginx,  Apache ヱブサーバーのアクセスログを見ると、日本語URLはエンコードされていて読めない。 そこで、デコードして表示させる。 ログのファイル名が ssl_access.log だとすると、tail -f ssl_access.log| perl -ne 'use URI::Escape; print uri_unescape($_);' tail -f access.log | php -R 'echo urldecode($argn)."\n";'で、日本語URlが読める状態で出力される。 Apacheのログをデコードする方法 - Life with ITプログラマ x ...
  • ヱブサイトの再構築中には、スタイルシート、style.css を頻繁に調整更新する。 CSSを追加、編集する度に再読み込みを繰り返して、変更の反映を確認していた。 これで編集者は反映を確認できるのだが、一般閲覧者はわざわざ再読み込みしたり、キャッシュを削除したりするはずはないので、変更が反映されていない崩れたデザインを見ているかもしれない。わざわざリロードしたりキャッシュを削除したりしなくても変更が確実に反映されるような設定方法を発見した。wp_enqueue_scripts で CSS、JS の読み込みを管理している場合には、次のようにfunctions.php に記述する。// 子テーマのstyle.cssを最後に読み込む add_acti...

WordPress カテゴリ人気記事 Views most

タグ関連記事

閲覧履歴