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 の設定で画像だけを置換しないように設定することもできるのだが、今は元に戻したままにしておく。

 

  • Google の Indexing API を使うと、新しい投稿記事を瞬時にGoogleの検索エンジンに登録できる。 WordPress のプラグインとしてインデックスAPIが利用できる。使い方は英語 ...
  • Yoast SEO を停止して、Rank Math SEO プラグインを使ってみたらGoogle の検索結果に表示される記事抜粋スニペットの文字数が短過ぎに見えてびっくりした。#1 Yoast Alt ...
  • WP_CRON を停止して、Linux の crontab に移行する設定をこれまでに何度も試みたがうまくいかなかった。 毎日バックアップされるはずの、UpdraftPlus プラグインのクロンが動い ...
  • Kusanagi WordPress プラットフォームでは Fcache とBcache がある。 Fcache とはNginx ヱブサーバーのキャッシュ機能であり、Kusanagi の独自機能ではな ...
  • 目次 1 HTTPD アクセスログの日本語化 2 Logwatch も日本語化 HTTPD アクセスログの日本語化 Nginx,  Apache ヱブサーバーのアクセスログを見ると、日本語URLはエン ...
  • ヱブサイトの再構築中には、スタイルシート、style.css を頻繁に調整更新する。 CSSを追加、編集する度に再読み込みを繰り返して、変更の反映を確認していた。 これで編集者は反映を確認できるのだが ...
  • WordPressで使える頁カウンターをいくつか同時に使ってカウントの仕方の違いを比べてみた。WP-PostViews    長期常用中 Post Views Counter  新規インストール Go ...
  • Pjax で非同期画面遷移するWordpress テーマ Pjax Blog に変えてみた。 Pjax Blog テーマでは、Barba.js が使用されている。Pjax Blog | Unique ...

タグクラウド

WordPress カテゴリ人気記事 Views most

WordPress・サーバー カテゴリ人気記事 月間

20180925

タグ関連記事

閲覧履歴

    //cookieが無い場合の処理
2019
GA-views: 198
20180925