アルゴリア検索を導入してみたら、速くて便利で気に入った話!

じゃんくはっく
じゃんくはっく

静的サイトでも動作する検索を模索してみたよ

Google検索とかじゃなくて?

ぴー
ぴー
じゃんくはっく
じゃんくはっく

自分のサイトにもっと特化して検索できるやつが欲しかったのよ

このブログってGitHub Pagesでしょ? どうやるのかしら?

ぴー
ぴー

ゴールデンウィーク真っ最中ですね! 皆さんは何してますか?

僕は、まったりとPCと戯れて、世界中の面白いネタを探しています。もうね、あるわあるわ。面白ネタがたくさんあって、世界は広いなと、再認識しました。

さて、今回のネタは「検索」です。このブログはgithub pages ってのを使っていて静的なサイトなんです。見た目はWordPressのブログサイトっぽいのですが、htmlとcssとjsだけの構成でPHPとかデータベースとか動作していないんです。なので、自分のサイトの検索機能はGoogleのを使っているんですが、もっと良いのはないかなーと探していました。こういう分野のエンジニアは、フロントエンド・エンジニアと、いうんですが、自分は苦手分野なのであまり知識がありませんでした。

見つけたところは、Electronのサイト!

Electronえれくとろんっていう、仕組みがあるのですがこの本家サイトの日本語ドキュメントにその良い例が載っています。

Electron ドキュメント

https://www.electronjs.org/ja/docs/latest/

このサイトを見ると、キーボード操作 CMD+K で検索ウィンドウが出てきます。

こんな感じで、検索文字をタイプするごとにそのキーワードを含んだページとヒットした文字部分が出てくるわけです。検索キーワードの提案(サジェスト)が出るのではなく、検索結果がリアルタイムで表示されるイメージです。このキーワードに対して、その候補のページが出てくる仕組み・検索システムが優秀で使いやすいんです。

で、この仕組みってどうやって作っているんだろうなーと思っていたところ、このウインドウの下にはalgoliaあるごりあ と表示されています。どうやら、algolia の検索システムを使っているようです。

ちなみに、Electronっていのは、簡単に紹介すると以下です。そのうち、ネタにしようかなと思っています

Electron(エレクトロン)とは、ウェブ技術でデスクトップアプリケーションを作成できるテクノロジーです。 HTMLとCSS、JavaScriptを使って開発し、WindowsとmacOSの両OSのアプリケーションを1つのコードから作ることができます。

https://ics.media/entry/7298/

algolia の検索システムとは何なのか?

さて、algoliaの検索とはいったい何なのでしょうか? 英語サイトですが、サービス名称は「Algolia Searchあるごりあ さーち」と言うようです。

Algolia Search

https://www.algolia.com/products/search-and-discovery/hosted-search-api/

FAQのところを見ると、概要が見えてきます。まず、Algoliaは高速で、SaaSさーす製品でモバイル向けにも特化してあり、日本語も使えるようです。

機能は大きくわけて、2つあるようです。1つは、Autocompleteと呼ばれる、検索キーワードを入れると、リアルタイムで検索結果が出る仕組み。もう一つは、検索キーワードの提案(サジェスト)のAutoCompleteで、これは「Query Suggestions」を設定すると可能のようです。

こういうのは、まず使ってみるのが手っ取り早いです。幸い、WordPressでalgolia検索を使うのは簡単です。まずは、このサイトですでに実装してあるので、それを紹介してみます。

このブログでの実装例

このブログでは、キーボード操作「/」スラッシュをタイプすると、以下のような検索ウィンドウが出てきます。

検索テキスト入力エリアにフォーカスするには、「.」ドットをタイプするかマウスでフォーカスします。適当な検索ワードをタイプすればその結果を含むページが下に表示されます。これは、検索キーワードのサジェストとは違いますが、検索結果がすぐに出てくるので検索結果に遷移しなくても良くて便利です。検索ワードをタイプしてから、検索結果が出てくるのが異常に速くないでしょうか?

WordPressに入れてみる

では、このブログと同じことをしてみたい人向けに具体的な手順の紹介です。2つプラグインを入れるのですが、まず、1つ目は以下です。

WP Search with Algolia

https://ja.wordpress.org/plugins/wp-search-with-algolia/

次に、algolia のサイトではアカウントを作成し、Applicationを作成し、APIキーを参照します。

で、その各種項目を先ほどのWordPressプラグインに設定します。

少し説明は端折りますが、「Search Page」では、とりあえず真ん中の「Use Algolia in the backend」を選んでおけば良いでしょう。Autocomplete では、検索させる対象、たとえば「投稿」を選択してインデックスを再作成しておきます。

WP標準の検索ウィンドウで確認

WP標準の検索ウィンドウで、検索キーワードを入れたら、検索結果が出てくるようになっていれば成功です。

アイキャッチ記事の画像があれば、こんな感じで表示されるかなと思います。

キーボード操作で検索ウィンドウを出す

続いて、キーボード操作で、検索窓がポップアップする部分です。検索結果に遷移しなくて良いので、どのページからも検索ウィンドウが表示されれば便利かなと思いました。

そのような動作をするプラグインを昔みたことがあったので検索してみました。「wp-keyboard-nav」というのがあったので、それには検索窓がついていないので、少し手直しして、以下のような野良プラグインを作ってみました。

Keyboard PopUP algolia search
WordPress の野良プラグインです。プラグイン名称は、Keyboard PopUP algolia search です。 キーボード操作でポップアップする検索ウィンドウです。algolia検索と組み合わせて使うために、改造しました。元ソースは、wp-keyboard-nav LINK というプラグインです。

https://github.com/take-i/wp-keypopup-algolia

こちらは何も設定は必要ありません。プラグインを入れれば、すべてのページでキーボード操作で検索ウィンドウが出てくるかと思います。

レスポンス時間はどのくらいなのか?

検索ウィンドウに1文字づつタイプするごとに、Algolia のAPIにリクエストが飛び、レスポンスされます。何回か試したのですが、ほとんどが100ms 以内に帰ってきています。

以下のように、20ms以内くらいで帰ってくるようです。劇速いです!

まとめ

今回、なんとなくわかったのは以下となります。

・Algolia の無料枠は、10,000検索リクエスト/月
・検索対象の数制限は、10,000 レコード
・無料枠利用にカード登録は必要なし
・個人用サイトなら無料枠で足りそうだが、しばらく運用してみる
・有料版は、1000リクエスト/月 で1.5ドル
・検索クエリーは1文字づつ、APIリクエストが飛んでいる
・その、ほとんどが20ms以内にレスポンスされている
・検索結果が検索窓に検索キーワードを入れた時点で表示される
・↑これがすごく便利で気に入りました
・日本語にも対応していている
・紹介はしきれなかったが、静的サイトでも少しの手入れで動作する
・速いというのは、正義だなと改めて実感
・キーボードで出てくる検索ウィンドウは思ったより、便利
・algolia にINDEXデータを入れる部分はwordpressで可能
・algoliaの管理画面でAnalyticsがあり、検索ワードや表示ページなど統計データが見れる

あとがき

英語サイトの情報なので、まだあまり日本語の情報がないのですが、この手のサイト内検索を商材にするサービスは他にもたくさんあります。商用のサイトなら、たくさんある商品や情報の中から、お客さんが希望するモノにたどり着きやすくするため、サイト内検索は結構重要だと思っています。

今回の話は、バックエンドにデータベースがあって、それを直接検索参照させる従来のやり方ではないケースです。このブログのように、静的なページがあってそれを対象に高速で検索させる場合は何が正解なのでしょうか。ある人は、全文検索エンジンを入れたらどう? とか。検索用のインデッックスを持ったDBを用意すればよいとか。

このブログの場合は、記事の作成時点ではWordPressで管理していて、書き出すときに静的なHTMLにしています。全ての記事のインデックス(目次情報)は、WordPressで動作している時点でAlgolia に投げられます。静的ページからの検索は、JavaScript経由でAlgoliaに参照され、文字が入るたびにリアルタイムに検索結果が表示される仕組みです。

データベースは無く、作るつもりもないので静的ページをどうやって手間なく、検索させるか? の1つの解だとは思います。

著者にメッセージ

間違いのご指摘など、コメントじゃなくて、個人的にやりとりしたい場合はこちらからどうぞ。お返事が遅くなるときもありますが、ご了承を。

WordPressをhtmlファイルに出してGitHub Pagesで運用するスタイルが最高

じゃんくはっく
じゃんくはっく

スマホサイトでWordPressも納得したしなー!

あ〜、例の記事をネタにするんですね!

ぴー
ぴー
じゃんくはっく
じゃんくはっく

やっぱり運用が楽なのがいいしね!

率直な感想なんかを聞いてみたいわ。

ぴー
ぴー

長らく、スマホ上でWordPress環境を作って、自家サーバで動かしていましたがSLAも納得の数値を出せたのでそろそろ違う環境にしようかなと、考えていました。

 今日のお話は、WordPressから静的なHTMLファイルを書き出してそれをGitHub Pages やNETLIFYで、独自ドメインを使って動かしてみた感想なんかを書きたいなと思います。具体的な手順なんかは記載していませんので、要望があれば別ネタにしたいなと思います。

WordPressでの編集から記事公開までの概略

全体の流れは、基本的に以下の3ステップです。

 (1) ローカル環境のWordPressで記事を書く

 (2) Simply Staticプラグインで、「静的ファイルを生成する」ボタンを押す

 (3) 上記でできたファイルを展開して、Github Pages のリポジトリへコミットする

Github Pages の設定をしておけば、こんな感じですね。(2) のファイル生成時間は、動作速度、記事数や画像数などにもよって変わりますが、自分の場合は1時間弱くらいでした。

WordPressのデータをどうやって、静的ファイルにするの?

これは非常によくできたプラグインがあります。それを使うだけ。いろいろ検討しましたが以下のが一押しです。

Simply Static
HTTPS://JA.WORDPRESS.ORG/PLUGINS/SIMPLY-STATIC/

これは、Pro 版と無償版があります。今使っているのは、無償版ですが、Pro版も検討しています。とりあえずは、無償版でも十分な機能を持っています。以下のように「相対 URL を使用する」でファイルを書き出す設定をしておきます。なぜ相対URLにしているかといえば、ミラーサイトにも公開しているからです。このブログの場合、以下のように複数のリポジトリへコミットしているからです。

 メインサイト:https://hack.gpl.jp/

 エイリアス:https://junkhack.gpl.jp/

 ミラーサイト:https://jh.gpl.jp/

あとは、「静的ファイルを生成する」でOKです。このブログの場合、583個の記事を1時間弱で書き出せました。

書き出したあとはどうするの?

無事に静的ファイルが描き出せたら、圧縮ファイルを展開してGithub Pages のリポジトリにコミットするだけです。自分は、Sourcetree を使っています。

自動化するならスクリプトを作ってコミットもできると思います。そのうち、やってみたいなと思っています。ちなみに、Simply StaticのPro版はGitHub連携も出来るので一手間減ります。

環境づくりで、注意する点

WordPress の環境作りでは、以下の点に気を付ける必要があります。

  • 書き出されるのは静的なHTMLとjsとcss と画像ファイルなのでコメントやメールフォームや検索など動的に動かすことができない
  • なので、コメントは全部閉じる
  • メールフォームなど、自分の場合はコンタクトフォーム 7を使わないようにした
  • 検索はGoogleのカスタム検索をWordPressのウィジェットに貼り付ける(https://programmablesearchengine.google.com/cse/
  • WordPressのスラグは全部英文字にしておく(日本語は使わない)
  • ローカル環境のPHP設定でメモリ関連の設定を上げておく

といったところでしょうか。静的化してもコメントやメールフォームを動かす別の方法もありますが、現時点ではまだ導入していません。そもそも、コメントやメールフォームは無くても良いかなと。あればコミュニケーションができますが、仕事の依頼系はメールでも十分かなと感じています。わざわざ、メールフォームにしておく必要性もないのが実際のところです。コメントについては、このブログの場合、ほとんど書き込みがないので無くても問題はありません。どうしても、コンタクト撮りたい場合は、メールしてもらえれば良いかなと現時点では思っています。

現時点で使っているプラグインは?

静的ファイルを書き出すSimply Staticを使っても、ちゃんと動作しているWordPressのプラグインは以下です。表示系ではない関係ないプラグインもありますが、表示系に関連するのは動いていることを確認しています。

+-------------------------------------------+----------+-----------+-------------+
| name                                      | status   | update    | version     |
+-------------------------------------------+----------+-----------+-------------+
| acf-quickedit-fields                      | active   | available | 3.1.6       |
| advanced-custom-fields                    | active   | none      | 5.11.4      |
| akismet                                   | active   | none      | 4.2.1       |
| autoptimize                               | active   | none      | 2.9.5       |
| backwpup                                  | active   | none      | 3.10.0      |
| bulk-media-register                       | active   | none      | 1.25        |
| admin-featured-image                      | active   | none      | 1.2         |
| export-all-urls                           | active   | none      | 4.1         |
| google-sitemap-generator                  | active   | none      | 4.1.1       |
| jquery-manager                            | active   | none      | 1.10.6      |
| list-urls                                 | active   | none      | 0.2         |
| luckywp-table-of-contents                 | active   | none      | 2.1.4       |
| multiple-domain-mapping-on-single-site    | active   | none      | 1.0.5       |
| permalink-manager                         | active   | available | 2.2.14      |
| search-regex                              | active   | none      | 2.4.1       |
| shortcoder                                | active   | none      | 5.6         |
| simply-static                             | active   | available | 2.1.5.2     |
| google-site-kit                           | active   | none      | 1.48.1      |
| ultimate-addons-for-gutenberg             | active   | none      | 1.25.2      |
| word-balloon                              | active   | none      | 4.18.4      |
| wordpress-importer                        | active   | none      | 0.7         |
| wp-external-links                         | active   | none      | 2.50        |
| wpfront-scroll-top                        | active   | none      | 2.0.7.08086 |
| wp-multibyte-patch                        | active   | none      | 2.9         |
| duplicate-post                            | active   | none      | 4.3         |
+-------------------------------------------+----------+-----------+-------------+

意外だったのは、目次を作っている「luckywp-table-of-contents」や吹き出し表示の「word-balloon」もちゃんと動作しています。

まとめ

今回、なんとなくわかったのは以下となります。

・運用コストが下がるので、今後はコンテンツネタに力を入れていきたい

・やっぱり静的ファイルは読み込みが速い!

・WordPressとは今後もローカル環境で付き合っていきます

あとがき

かなり前から、WordPress運用環境を変えたいなと検討していました。やっぱりシンプルが一番です。まだ切り替えたばかりなので、少し記事を書いてからまた感想などを書きたいなと思います。

著者にメッセージ

間違いのご指摘など、コメントじゃなくて、個人的にやりとりしたい場合はこちらからどうぞ。お返事が遅くなるときもありますが、ご了承を。

ジェットパックプラグインは死活監視サービスがあるのか!

今回引越しをやっていて、気が付いたことがいくつかあります。その1つに、ジェットパックプラグインには、WEBがちゃんと動いているかどうかをチェックしてくれるサービスが無料でありました。

じゃんくはっく
じゃんくはっく

Jetpackプラグインって機能いっぱいあるな!

使い切れるのかしら?

ぴー
ぴー

とにかく、たくさん機能があるんですよね。最近は、このジェットパックに有料機能をつける戦略のようで、バックアップとかSEOとかあるようです。今回は無料の機能で死活監視機能がどんなものか試してみました。

サーバが動いてないとき

こんな表示のメールが届きます。

サーバが再び動き出したとき

こんな表示のメールがきます。

ログには?

ちょうどこの時は、何か作業していてWEBを止めていたんだと思います。ログには以下のように出力されていました。

192.0.101.226 - - [15/Sep/2020:00:46:13 +0900] "HEAD / HTTP/1.1" 403 0 "-" "jetmon/1.0 (Jetpack Site Uptime Monitor by WordPress.com)"
192.0.101.226 - - [15/Sep/2020:00:54:50 +0900] "HEAD / HTTP/1.1" 403 0 "-" "jetmon/1.0 (Jetpack Site Uptime Monitor by WordPress.com)"
192.0.101.226 - - [15/Sep/2020:01:02:42 +0900] "HEAD / HTTP/1.1" 302 0 "-" "jetmon/1.0 (Jetpack Site Uptime Monitor by WordPress.com)"
192.0.101.226 - - [15/Sep/2020:01:02:44 +0900] "HEAD /wp-admin/setup-config.php HTTP/1.1" 200 0 "-" "jetmon/1.0 (Jetpack Site Uptime Monitor by WordPress.com)"
192.0.101.226 - - [15/Sep/2020:01:11:53 +0900] "HEAD / HTTP/1.1" 200 0 "-" "jetmon/1.0 (Jetpack Site Uptime Monitor by WordPress.com)"
192.0.101.226 - - [15/Sep/2020:01:18:32 +0900] "HEAD / HTTP/1.1" 200 0 "-" "jetmon/1.0 (Jetpack Site Uptime Monitor by WordPress.com)"
192.0.101.226 - - [15/Sep/2020:01:26:37 +0900] "HEAD / HTTP/1.1" 200 0 "-" "jetmon/1.0 (Jetpack Site Uptime Monitor by WordPress.com)"

何をしていたのかは忘れましたが、ログを見るとおそらく、ジェットパッックプラグインの再セットアップでもやっていたのでしょう。

無料でやってくれるなら、使ってみてもいいかなと。現在は、とりあえずこの機能を使うかどうか検討中なので一旦停止しています。

他の無料の外部から監視するサービスは?

お仕事では、Mackerel(マカレル)というサービスを使っていますが、これ無料では監視ができないんですよね。

Mackerel(マカレル) 料金

https://mackerel.io/ja/pricing/

すごく使いやすくて、警告をLineとかに飛ばしたりできるんで重宝(迷惑かも?w)しています。

無料のこれ系のサービスは今まで調査したことがないので、この機会に少し調べてみようと思います。これ系の検索ワードは、日本語では、外形監視 無料 とか。英語だとなんていうんでしょうかね? APM (Application Performance Monitoring) とかかな?

なんとなく、良さそうなものをピックアップしてみます。

New Relic

https://newrelic.co.jp/pricing

Site24x7

https://www.site24x7.jp/url-monitoring.html

StatusCake

https://www.statuscake.com/pricing

Freshworks Inc.

https://www.freshworks.com/website-monitoring/pricing/

あとがき

比較表を今作る元気はないので、とりあえずメモしておきます。Site24x7とかは、スピードテストとかでお世話になったことがあり知っていますが他は知りませんでした。結構、無料でもやれるんですね。今度、どれか採用してレポートしたいなと思います。

このブログは、スマートフォンの中に引越ししました!

えっ? と思われた方もいるかもしれませんが、このジャンクハックブログは引越ししました。それもスマートフォンの中にいます!

なんで、引越しをしたの?

はい、結論から言いますと今まで使っていたWordPress.comのパーソナルプランの料金が上がったからです。月額400円から500円で年間一括6000円となります。まぁ、100円くらい良いんですがなんとなく、年間で6000円かーと思いましてね。

今から2年ほど前、 WordPress.com 上のパーソナルプランっていうところを使い始めていました。

Linuxエンジニアがサーバを作らず結局、WordPress.com の有料プランに入ることにしたよ

https://hack.gpl.jp/2018/10/17/20181017/

レンタルサーバはたくさんあるんですが、WordPressのオートマチック(Automattic Inc.)がやっているサービスです。ビジネスプランまで契約しようかと当初は思っていましたが、このブログがそんな人気が出るわけでもなくチマチマとパーソナルプラン(当初月額400円)でやっていました。

更新期限が10月中旬ということもあって、2、3ヵ月前から自宅サーバを検討していました。ご興味があるかたは、以下から検索してね。(検索システムも速くしてあります)

Termuxとか、自宅サーバ関連

https://hack.gpl.jp/?s=Termux+自宅サーバ

月に500円、年間6000円支払うなら電気代に払って自宅サーバでブログを楽しみたいな! と思ったのであります。

スマホの中に引越しとは?

 はい、このブログはスマホの中から今見ているみなさんに提供しているんです。信じられませんよね!w

これは、Termux というAndroidアプリがありまして、それがつまりは Linuxなんですよね。正確にいえば、Android自体がLinux Kernelを採用したOSなんで、その上でLinux環境を構築するアプリなんです。

で、その環境にWEBサーバやら、データベースサーバやらを作り、WordPressを動作させているんです。回線は、普通のNTTの光回線に InterLinkのIP固定サービスでやっております。いわゆる自宅サーバというやつですね。

あとがき

これで、Pluginもテーマファイルもやりたい放題です。

ぴー
ぴー

やっぱりWordPressはカスタマイズしたいよね!

とりあず、今日は引越ししたよ! というネタをあげたかったので以上にします。またねー。

備忘録:設定ファイルの空白行(改行)とコメントを削除して表示したい

※ブロックエディターで編集したら、表示が壊れたので再投稿です。

いろんなやり方がありますが、自分が気に入ってるのは以下3つです。

$ grep . FILENAME | egrep -v ^*#

改行はまぁ出てもいいやという場合は、コメント行だけ削除。

$ egrep -v ^*# FILENAME

なんか空白(でたぶん改行が)多いなって場合は、パイプして、grep . をつければOK。 改行と、コメント行の場合は、こんな書き方も。

$ egrep -v '^*#|^$' FILENAME

大体の設定ファイルは、空白行じゃなく改行だけの行なのでこれで足ります。最後のやり方だと、設定ファイルだけ見る場合、↑(上矢印)で直近コマンド出して、最後のファイル名だけ変えればまた使えるので、便利です。ちゃんとコメント行と空白行(改行と空白行)を削除したい場合は、以下になりますがタイプしずらいですよね!

$ egrep -v '^*#|^\s*$' FILENAME

例えば、termuxのapache2の設定ファイル(デフォルト)httpd.confは改行とコメント行を抜くと以下です。

$ egrep -v '^*#|^$' httpd.conf.org 
ServerRoot "/data/data/com.termux/files/usr"
Listen 8080
LoadModule mpm_worker_module libexec/apache2/mod_mpm_worker.so
LoadModule authn_file_module libexec/apache2/mod_authn_file.so
LoadModule authn_core_module libexec/apache2/mod_authn_core.so
LoadModule authz_host_module libexec/apache2/mod_authz_host.so
LoadModule authz_groupfile_module libexec/apache2/mod_authz_groupfile.so
LoadModule authz_user_module libexec/apache2/mod_authz_user.so
LoadModule authz_core_module libexec/apache2/mod_authz_core.so
LoadModule access_compat_module libexec/apache2/mod_access_compat.so
LoadModule auth_basic_module libexec/apache2/mod_auth_basic.so
LoadModule reqtimeout_module libexec/apache2/mod_reqtimeout.so
LoadModule include_module libexec/apache2/mod_include.so
LoadModule filter_module libexec/apache2/mod_filter.so
LoadModule mime_module libexec/apache2/mod_mime.so
LoadModule log_config_module libexec/apache2/mod_log_config.so
LoadModule env_module libexec/apache2/mod_env.so
LoadModule headers_module libexec/apache2/mod_headers.so
LoadModule setenvif_module libexec/apache2/mod_setenvif.so
LoadModule version_module libexec/apache2/mod_version.so
LoadModule slotmem_shm_module libexec/apache2/mod_slotmem_shm.so
LoadModule unixd_module libexec/apache2/mod_unixd.so
LoadModule status_module libexec/apache2/mod_status.so
LoadModule autoindex_module libexec/apache2/mod_autoindex.so




LoadModule negotiation_module libexec/apache2/mod_negotiation.so
LoadModule dir_module libexec/apache2/mod_dir.so
LoadModule userdir_module libexec/apache2/mod_userdir.so
LoadModule alias_module libexec/apache2/mod_alias.so


ServerAdmin you@example.com

AllowOverride none
Require all denied

DocumentRoot "/data/data/com.termux/files/usr/share/apache2/default-site/htdocs"
<Directory "/data/data/com.termux/files/usr/share/apache2/default-site/htdocs">
Options Indexes FollowSymLinks
AllowOverride None
Require all granted


DirectoryIndex index.html

<Files ".ht*">
Require all denied

ErrorLog "var/log/apache2/error_log"
LogLevel warn

LogFormat "%h %l %u %t \"%r\" %>s %b \"%{Referer}i\" \"%{User-Agent}i\"" combined
LogFormat "%h %l %u %t \"%r\" %>s %b" common

LogFormat "%h %l %u %t \"%r\" %>s %b \"%{Referer}i\" \"%{User-Agent}i\" %I %O" combinedio

CustomLog "var/log/apache2/access_log" common


ScriptAlias /cgi-bin/ "/data/data/com.termux/files/usr/lib/cgi-bin/"



<Directory "/data/data/com.termux/files/usr/lib/cgi-bin">
AllowOverride None
Options None
Require all granted


RequestHeader unset Proxy early


TypesConfig etc/apache2/mime.types
AddType application/x-compress .Z
AddType application/x-gzip .gz .tgz


Include etc/apache2/extra/proxy-html.conf


SSLRandomSeed startup builtin
SSLRandomSeed connect builtin

空白行は、ないでしょ。つまり改行だけなんで、上記のように表示されます。空白行を含む表現は、以下なんでタイプ数が多いので面倒なんです。

'^\s*$'

まぁ、どうでもいい話ですが。w

スマホ上に作った自宅サーバのWordPressで、テスト評価がほぼオールAになった!

はい、ただ今引っ越し準備中でして、このブログをスマートフォン上に作ったWordPressサーバに引っ越しします。9月末か10月頭予定で各種チューニングをやっていましたが、ついにスピードテスト系の評価サイトでほぼオールAを取ることに成功しました。

いくつかある評価サイトの中では、ここが一番好きです。ここの計測サイトは東京リージョンもあり、また各種グラフが見やすくビデオプレビューまで付いて来ます。

WEBPAGETEST

https://www.webpagetest.org/

主な評価観点は、左から以下のようになっています。

  1. セキュリティ
  2. 初期アクセスまでの時間
  3. Keep-alive通信がONか?
  4. 圧縮転送されているか?
  5. イメージの圧縮はどうか?
  6. 静的コンテンツがキャッシュされているか?
  7. CDNを使っているか?

7番のCDNは一部、WordPressのをつかっていますが、全部は使っていないので、x になっています。これはどうするかまだ迷っています。一度、国内のCDNをテストで使ってみようと思ったのですがうまく動作せずでした。まだ原因がわかっていません。

 難易度的には、簡単なものから3・4・5・6・2・1・7で難しかったです。今回は、自分なりの考えをメモりつつ、1つづつ紹介していきたいなと思います。必ず正解っていう部分はないところでもあるので、あくまで自分はこんな対策と対応をしたよっていう感じです。いろいろツッコミどころはあるとは思いますが、何かあればコメントでお気軽にどうぞ。

難易度G・Keep-alive通信がONか?

これは apache を使おうが、nginx を使おうが最初からデフォルトONになっているので意識せずともAになると思います。今回は、最終的に nginx を使うことにしましたので、nginx.conf に以下を設定しています。タイムアウト時間は短いほうが良いと思います。でも、ここは突き詰めると難しい部分です。興味がある方は、以下などを一読されると良いかなと思います。

ぜんぶTIME_WAITのせいだ!

https://qiita.com/kuni-nakaji/items/c07004c7d9e5bb683bc2
http {
::(省略)
    keepalive_requests 100;
    keepalive_timeout  3;
::(省略)

termux 上の android OSでは、一般的なLinuxと違ってKernelパラメータも調整されているはずですので、ここが何が適切なのかを明確にするには root権限のあるスマホで termux を動かし負荷テストをしながら、各種TCPの状態遷移を見ていくのが正しい姿勢です。という意味では一番難しい部類ですが、今回はそこまで突っ込まないことにします。

難易度F・圧縮転送されているか?

圧縮レベルは1でも十分という意見はありそうです。

http {
::(省略)
    gzip  on;
    gzip_vary       on;
    gzip_proxied    any;
    gzip_comp_level 6;
    gzip_types      text/plain text/css text/xml text/javascript
                    application/json application/javascript application/x-javascript
                    application/xml application/rss+xml application/atom+xml
                    image/svg+xml;
::(省略)

難易度E・イメージの圧縮はどうか?

これは今回は、ジェットパックのプラグインでwordpress のCDN側から画像が出ています。そこで適切に圧縮してくれているので簡単です。ただ、やりだすと奥が深いので、中間くらいの位置付けにしてあります。

難易度D・静的コンテンツがキャッシュされているか?

これは、レスポンスヘッダにNo max-age または expiresをつければ解決します。具体的には、nginxの設定で以下を設定すればOKです。

location ~* \.(jpg|jpeg|gif|png|css|js|swf|ico|pdf|svg|eot|ttf|woff)$ {
    expires 60d;
    add_header Cache-Control "public, no-transform";
    access_log off;
}

難易度C・初期アクセスまでの時間

これは、WordPress側でキャッシュを作るのが一番最速です。各種プラグインがありますが、いろいろ試した結果、今の所はAutoptimizeに落ち着いています。

デフォルト設定でも十分効果はあります。迷ってる設定としては、Google フォントの削除 をするかしないかです。表示の綺麗さを取るか、お客様に快適にアクセスしてもらうのを取るか ですね。あとは、ネットワーク的な速度の部分があります。今は InterLink の回線上にいますが、少し工夫してある部分といえば、常時利用する経路とは分離してあるくらいでしょうか? WiFiの5G接続でもこのくらいは出ますよという参考値になればと思います。WiFiルーターの側にスマホ(サーバ)は置いてあります。距離を離すと応答速度が遅れます。

難易度B・セキュリティ

これが結構難しかったです。まず、WordPress の最新を使ってもjquery 1.12.4でした。これは脆弱性があるので、あげて置きたいところですが WordPressはIE8のことも考えて意図的に落としているようです(たぶん)。なので、以下プラグインで上書きしています。

しかし、これ以外もやることがあって以下のチェックサイトに行ったほうがわかりやすいかもしれません。各種セキュリー関連のhttpヘッダーを付与する必要があります。

https://securityheaders.com/

最初はここ、真っ赤でF判定だったです。

対策としては、NGINXの設定でヘッダに以下をつければA判定となりクリアになりますが、まだiFrameの設定が未完結です。X-Frame-Optionsは、古く Content-Security-Policy の指定で行うのが良さそうです。frame-ancestors を指定し組み込める参照元を制限する方法が良いということはわかっているのですが、まだ設定値が決まりません。A判定は取っていますが、内容がない状態です。

add_header Strict-Transport-Security "max-age=15552000"; 
add_header X-XSS-Protection "1; mode=block";
add_header X-Frame-Options SAMEORIGIN;
add_header X-Frame-Options "ALLOW-FROM https://www.youtube.com";
add_header X-Content-Type-Options nosniff;
add_header Content-Security-Policy "default-src * 'self' data: 'unsafe-inline' 'unsafe-eval' ;";
add_header Referrer-Policy strict-origin always;
add_header Permissions-Policy "fullscreen=() geolocation=()";

難易度A・CDNを使っているか?

ここは、DNSの向け先を変えたり、CDNのキャッシュをコントロールしたりする必要があり、運用とも関わる部分です。一度設定したのですが、うまく動作せずここは今の所一番の課題となっています。そもそも、月間5000ページビューにも行かないこのサイトでCDNを導入する必要があるかどうか? という点もありますが、一度やって見ないとわかりません。あと仕事ではなく、趣味なので無料のものしか使う気はありません。さて、どこがいいんでしょうかね?

あとがき

このサーバは、スマホで動いていてWiFiの無線で繋がっていますが、こんなちっさな筐体でもWordPressが動く、しかもA評価までもらえるなんて! 感動です。Termuxは最高のアプリですね。神アプリ認定です。

 しかも、常時SSL対応ですよ。もちろん、無料のSSL証明書です。なんだか時代は刻々と進化していますね。