静的HTMLをWordPressから作るには?

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

静的ページでミラーサイト作りたいな!

WordPressからHTML作るやつですね!

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

GitPagesとかNetlifyとかでブログ運用できるからね

コメントとかメール送信とかは?

ぴー
ぴー

ここんところ、WordPressから静的なHTMLを吐き出して運用するにはどうしたらいいかっていう事を研究していました。このブログは、現在スマホのPixel3やUmidigiF2で作られていますが、静的なHTMLページにできたら、かなり処理負荷が減り、またセキュアな運用ができるので実現してみたいなと思っています。

WordPressは設計が古い、王道のWEB-DBアプリ

WordPressは最初のバージョン1.xがリリースされてもうすぐ20年になろうとしています。付き合いは古く1.xと2.xの変わり目あたりからWordPressをいろんな用途で使っていました。基本的な設計は今も変わっておらず、WEB-DBアプリケーションの位置づけです。

WorePressは、アクセスされる側(フロントと俗にいいます)にPHPがあり、記事の実態や設定などは裏方(俗にバックエンドといいます)でMySQLデータベースが処理する王道なWEB-DBアプリです。図では以下のようになります。

PHP処理時間や、データベース処理時間をなくせば劇的に速くなります。今テストで2つのサーバに静的なHTMLを出していますので、記事の後半で視覚的に評価してみます。

静的なHTMLを吐き出すとどんなメリット・デメリットが?

WordPressがこの構成をしているのは、動的に処理ができるからです。記事の検索や各種プラグイン処理、コメント処理、メール送信機能などです。たとえば、この記事には「目次」がありますが、これは「LuckyWP Table of Contents」というプラグインが自動的に挿入してくれています。こういう固定表示系のプラグインは静的なHTMLを吐き出しても問題ありません。しかし、コンタクトフォーム 7などメール送信系やコメント部分、あるいは検索系は静的なHTMLでは実現できません。

普通にブログを書いて、コメントはあきらめ、PingBack(もう今はその恩恵もあまりない機能)やメール送信、その他動的に生成される機能を無視すれば、WordPressが出す静的HTMLで十分なんじゃないかなと思ったりします。

どうやって静的なHTMLを取得するか?

前置きが長くなりましたが、どうやって実現するかです。クライアント側でwgetコマンドなどを使い取得する方法や、WordPress本体側(プラグインを使って)から取得する方法の2つに大別されます。今のところ、プラグインを使ってHTMLを吐き出す方法が良さそうかなと思っています。実際に試して評価したのは以下2つです。

Simply Static

https://ja.wordpress.org/plugins/simply-static/

もう一つはこちら。

Export WP Page to Static HTML/CSS

https://wordpress.org/plugins/export-wp-page-to-static-html/

両方とも、Pro版があります。今のところ、後者の「Export WP Page to Static HTML/CSS Pro」は現時点の最新がver1.0.4ですがバグがあり正常に取得できません。またスラッグ にマルチバイト文字列があるとファイル生成時にURLエンコードされたファイル名で保存されてしまいます。(リンクされず404になる)この問題はSimply Staticでもありますが、英数字スラッグ であればSimply Staticでは問題ありません。もう少し様子を見て、良さそうならSimply StaticのPro版を検討しようかなと思っています。こちらはGit連携があるようで、完全に静的HTMLを他のWEB領域にデプロイすることができそうです。

Simply StaticのGitHub統合

https://patrickposner.dev/docs/simply-static/github/

静的ファイルをGitHub Pagesに出してみた

このブログを微調整した開発サイトから、Simply Staticを使い静的なHTMLを出力しGitHub Pagesにコミットしてみました。ドメインは独自ドメインにマッピングしてあります。SSLも自動ですので便利。

Github Pagesミラーサイト

https://jh2.gpl.jp/

こちらの応答時間はsite24x7の監視で以下のようです。

東京観測地点からの平均値は128ms です。速いですね。

静的ファイルをNetlifyに出してみた

GithubPagesのリポジトリにコミットすると、Netlifyにもデプロイされるようにしています。こちらも、ドメインは独自ドメインにマッピングしてあります。SSLも自動ですので便利ですね。

Netlify (ねっとりふぁい)ミラーサイト

https://jh.gpl.jp/

世界にはいろんな静的サイトホスティングがありますが、このNetlifyは無償でも使える有名なところです。こちらの応答時間はsite24x7の監視で以下のようです。

Netlifyの方は、東京から平均835ms です。Github Pagesのほうが速いですね。

比較のため、スマホサーバからの応答時間も

スマホサーバ、WordPress+NGINX+php7.4.x+mariadbでの応答も比較のため出しておきます。これは、KeyCDNを使ったりキャッシュを調整したりいろいろチューニングしています。

Pixel3 スマホサーバ
 WordPress+NGINX+php7.4.x+mariadb KeyCDN

https://hack.gpl.jp/

site24x7の監視で以下のようです。

東京観測地点からは、平均385msです。ちなみに、KeyCDNを経由する前は以下のようです。

平均1.27秒なんでかなり遅いですね。KeyCDNの効果は劇的です。でも1ヶ月に1000円弱かかるんですよね。

また、これ以外にもLargest Contentful Paint(LCP)という指標があり、簡単に言えばユーザーがそのページにアクセスしたとき、一番大きな画像またはテキストブロックが描画される時間です。具体的にウチのブログの場合は、以下がそれです。

これも、KeyCDNを使うと1.3秒くらいまで縮まりますが、使わないと4秒くらいかかってしまいます。しかし静的HTMLサイトなら、時間帯にもよりますが1秒から1秒弱くらいになります。

WordPress構成のサイトだと、いろいろチューニングしないとこのくらいの速度にはなりません。結構面倒で、CDNを契約するとそれなりにコストがかかります。月間1万ページビューくらいのブログでも1000円くらいはCDNに持っていかれます。何も意識しなくても、静的HTMLページだとそれより速いですからね。しかも、GitHub Pagesや、Netlifyを使えば無料の範囲で実現できます。

まとめ

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

・静的HTMLファイルだけで運用してみる価値は十分にあるが、迷う
・とりあえずミラーサイト的な位置づけで実験運用
・静的HTMLにした場合、検索、メール、コメント、Feedをどうするか?
・逆にそれ以外はほぼ、WordPressの動的機能を使う必要性は感じない
・全記事、スラッグ を英語にするにはどうしたら?自動変換してくれるプラグインとか?

あとがき

ほんとWordPressって手間がかかりますね。こういうのが面倒なんで、アーキテクチャーがオワコンとか言われているんです。

しかし、WordPress がnode.jsで動作して、設計も一新される時がいつかくるかもしれません。新しいものが必ずしも良いとは限りませんが、確実にアーキテクトは変化していきますので、何が最適なのかはいろいろ実験して手法を知っておくことが大切だなと思っています。チューニング次第では、apacheもnginxに近づけますし(面倒ですが)、WordPressも静的サイトに近づけることは可能です。まぁでも、実際は楽でセキュアなのが良いですよね。今時、sendmailなんて使いませんし、WEBサーバはnginxが主流です。

仕事では、あまり実験できないので趣味の範囲でいろいろ実験しておいて使えそうだなと思った手法は実際に仕事にフィードバックしていきたいですね。月〜金で仕事でmac使って、土日もほとんど同じような事をやっていますので、この業界が好きなんでしょうね。というか、オタクなだけですが。。。

ネットとPCと通販があれば、場所はどこでも生きていけそうです。ログハウスとか、手作りしながら、ブログ、Youtubeで配信する生活に憧れます。

著者にメッセージ

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

1つ目のWordPressの記事を2つ目のWordPressにコピーするプラグインはどこかに無いかな?

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

今日もWordPress触っていくよ〜!

ってか、最近暑いわね!

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

1つ目のWordPressの記事を2つ目のWordPressにコピーするプラグインとか誰か作ってないかなーと探してる

MainWPってのはどう?

ぴー
ぴー

AサイトのWordPressとBサイトのWordPressの記事を管理してみたいので、そんなプラグインがあるか探してみました。大体、だれかが何か作っていたりするので、まずはリサーチです。やりたいことは、言葉で書くとわかりにくいので、図に書くとこうなります。

記事Item 1Item 2Item 3
WordPress B
WordPres…
WordPress A
WordPres…
記事Item 1Item 3
Viewer does not support full SVG 1.1

つまり、Aサイトの投稿済み記事をBサイトに個別にコピーするという感じです。画像などのリソースもそのままBサイトに入れば最高です。

AサイトもBサイトも設定やプラグイン構成やテーマが違うので、記事とそのリソース(画像など)を複製できればいいのですが、、、そんなことはどうやったら実現できるでしょうか。それを今日は検討しています。

MainWPプラグインはどうかな?

MainWPっていうのがありました。使い方は省略しますが、こんな事が実現できることはわかりました。

・管理WPから、複数の新規記事を複数のWPサイトへ発行できる。
・MainWP本体プラグインを管理WPに入れる。配信するWPにはMainWP Childを入れる
・2台構成の場合は、管理WPに、MainWPとMainWP Childを入れる

残念ながら、Aサイトのすでに投稿済みの記事を個別に選んで、Bサイトにコピー(投稿)することはできないそうです。Pro版を使ってもダメみたい。どうりでそんなインターフェイスがないわけだ。

 ということで、何か違う方法を模索。XML-RPC経由か、DBにトリガーを作るか。または、、、、うーん、DBだけだったら、レプリケーションフィルターオプションとかで行けそうかも。WordPressの機能を使ってやるのが良さそうですが。

記事をコピーしてどうするの?

はい、実は今研究中の課題がありまして、それはGitHubのPagesにWordPressコンテンツを静的ファイルにして書き出すというものです。

GitHubのpagesにコミットしたWordPressの静的ページ(テスト中)

https://junkhack.github.io/

このページは、WordPressから書き出した静的なファイルです。それを吐き出すようの専用のWordPressを作って、メインサイトから記事を同期させたかったわけです。メインサイトとは、プラグイン構成やテーマファイルが変わる予定なので、これらを実現するには、記事のコピーが必要だったわけです。

GitHub pagesは、まだテスト中なので、リンクが切れていたり、画像がgithubからじゃなかったりするページがありますが、全体としては結構使えるんじゃないの? という感触です。たとえば、ニューヨークからの接続時間は、現在のスマホサーバに接続すると以下のような時間となりますが、

GitHubのpagesにコミットした静的ページだと、以下のように速くなります。

さすが、htmlやcssやjsだけの静的ファイルになると速いですね。Githubのリソースだから自動的にCDN経由になりますしね。速度的には以下な感じです。測定拠点はワシントンです。

PageSpeed Insights(GoogleのWEB速度チェック)でも、いい感じでした。

GitHub Pagesのリソース制限は?

リソース制限などは、以下のサイトにまとまっています。

GitHub Pagesでホストするサイトのアクセス上限は月10万リクエストが目安
::(抜粋)
 GitHub Pagesソースリポジトリの推奨制限は1GB
 公開されているGitHub Pagesサイトは1GB以下
 GitHub Pagesサイトは、1か月あたり100GBまたは100,000リクエストの帯域幅制限
 GitHub Pagesサイトは、1時間あたり10ビルドの制限

LINK

個人サイトのブログ程度なら、ミラーサイトとして問題なさそうな感じですかね。

まとめ

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

・MainWPを使ってみた
・しかし、これは個別で投稿済みの記事をBサイトにコピーはできない
・GitHub Pagesのリソース制限は個人サイトくらいなら問題なさそうかな?
・WordPressを静的に吐き出して利用するには、まだまだいくつか考慮するポイントがありそう。

あとがき

世の中は広いから、大抵のものはだれかが作っています。 リサーチしてると面白いものがどんどん発掘されて、当初の目的を忘れていたりします。w さて、次はWordPressの静的ファイルに書き出す仕組みづくりを検討です。

著者にメッセージ

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

TermuxでPHP7を使いたい! PHP8からPHP7にして使う。

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

今年の初めくらいからtermuxのPHPは7から8に上がったようですね!

何か不具合でも?

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

WordPressを動かすには少々、問題ありで。

termux はダウングレードできないですよね?

ぴー
ぴー

先日、termux上でNGINXとPHP-FPMの設定記事を書いたときに気がついたんですが、termuxのPHPって7から8になってPHP7はもうPKGがなく入れられませんでした。

TermuxでNGINX+php-fpm+mariadbを動かす具体的な設定例

Link

で、一つ前の記事でPHP7を暫定配布していたのですが、ビルドしたのでその過程とビルドしたPHP7のdepパッケージをどうやって入れるのかネタにしようかと思います。

ビルドしたPHP7のダウンロード先

GITHUBに、ビルドしておきました。arm64bitのCPUを使っている方向けです。32bit版はありません。

Github: termux-php7

LINK

インストールの仕方は簡単に記載しておきます。

(1) 一旦、PHP8関連を入れておく

とりあえず一旦、アップデートしておきます。アップデートできない人は1つ前の記事を見てください。

$ pkg update $$ upgrade

その後、php8やphp-fpm、php-apacheなど入れておきます。

$ pkg install php php-fpm php-apache

今入っているバージョンを再確認しておきます。

$ dpkg -l | grep php

2021/06/01現在ですと以下が最新です。

$ dpkg -l | grep php | cut -b 4-35
 php                8.0.6       
 php-apache         8.0.6       
 php-fpm            8.0.6 

PHP8関連だけ消す

例えば、上の3つPHP8関連だけ消したい場合は以下のようにします。

$ apt purge php php-apache php-fpm

ちゃんと消えたか、1つ上のコマンドをタイプして確認してみましょう。

PHP7をダウンロードしてインストール

php-pgsqlは今回入れないので、消しておきます。

$ wget https://github.com/take-i/termux-php7/raw/master/php7.4.12-aarch64-deb.zip
$ unzip php7.4.12-aarch64-deb.zip
$ cd php7.4.12-aarch64-deb.deb/
$ rm php-pgsql*
$ dpkg -i ./php* ./libicu_67.1_aarch64.deb

以下のようになっていればOKです。

$ dpkg -l | egrep "php|libicu"
ii  libicu             67.1           aarch64
ii  php                7.4.12         aarch64
ii  php-apache         7.4.12         aarch64
ii  php-fpm            7.4.12         aarch64

apache や、nginxの設定をしてみてphpinfo()関数が動作することを確認しておきました。libicuだけ最新の環境から下がっていますので、何かこれ関連で入れられないパッケージが出るかもしれません。何かあれば教えてください。

PHP7をアップデートしないよう設定

今入れたのがアップデートされないよう設定しておきます。

$ apt-mark hold libicu php php-apache php-fpm

確認は以下で。

$ apt-mark showhold
libicu
php
php-apache
php-fpm

ホールドを解除したい場合は、apt-mark unhold <package-name> で解除できます。

まとめ

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

・ビルドするときは、dockerイメージをubuntuに実機に作ってあれこれする
・これはまた次回に紹介
・termux独自のパッケージ管理のバージョンなどについては未調査
・とりあえず、PHP7はapacheでもnginxでも使えるようになった

あとがき

WordPressなんかを動かすときは、まだPHP7が安定しています。この前、PHP8で動かしてみたんですが対応していないプラグインなどもあり、またWP-CLIというコマンドラインのツールも警告を出します。ということで、PHP8はもう少し、様子見となりました。termuxでPHP7とか勉強している人もいると思うので今回のネタは少しは需要があるかもしれません。やっぱりビルドするって、面倒ですしね。いつか、その過程も紹介していきたいです。

著者にメッセージ

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

Termuxでpkg updateできなくなって困ってる人へ

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

5/1からGoogleStoreから入れたTermuxはパッケージのアップデートできなくなっています。

えっ!そうなの?

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

では、どうすればいいの?っていう記事になります。

日本語の情報ってば、ほとんどないですね!

ぴー
ぴー

2021/5/1から、termux で、pkg update などできなくなてエラーになります。こんな感じ。

$ pkg update
Checking availability of current mirror: ok
Ign:1 https://dl.bintray.com/grimler/game-packages-24 games InRelease
Ign:2 https://dl.bintray.com/grimler/science-packages-24 science InRelease
Hit:3 https://termux.mentality.rip/termux-packages-24 stable InRelease
Err:4 https://dl.bintray.com/grimler/game-packages-24 games Release
  403  Forbidden
Err:5 https://dl.bintray.com/grimler/science-packages-24 science Release
  403  Forbidden
Reading package lists... Done
E: The repository 'https://dl.bintray.com/grimler/game-packages-24 games Release' does no longer have a Release file.
N: Metadata integrity can't be verified, repository is disabled now.
N: Possible cause: repository is under maintenance or down (wrong sources.list URL?).
E: The repository 'https://dl.bintray.com/grimler/science-packages-24 science Release' does no longer have a Release file.
N: Metadata integrity can't be verified, repository is disabled now.
N: Possible cause: repository is under maintenance or down (wrong sources.list URL?).

これはリポジトリの参照先が閉鎖されたからです。今まで、見ていた先は上のログからもわかるように「bintray」というところでした。この対応策は以下で書かれていますが、日本語で書かれた情報がなかったので書いておくことにしますね。

[README] Bintray repositories are down now #6726

Link

もう少し速く記事を書こうかなと思っていたのですが、ずるずると5月末になってしまいました。

リポジトリの参照先を変更する

GooglePlayからtermuxを入れた人が、この現象にあっていると思いますが、次のコマンドでリポジトリを変更できます。実行はリモートのsshからでもOKです。

termux-change-repo

すると、以下のようにCUIインターフェイスの画面が出てきます。

3つとも選択して、OKを押します。

次の画面にて、上から3つめのGrimler を選択します。

OKを押すと以下のよう表示され、ターミナル入力に戻ります。

[*] Grimler's mirrors selected
    Changing main repository
    Changing game repository
    Changing science repository
[*] Running apt update
Hit:1 https://grimler.se/termux-packages-24 stable InRelease
Hit:2 https://grimler.se/game-packages-24 games InRelease
Hit:3 https://grimler.se/science-packages-24 science InRelease
Reading package lists... Done
Building dependency tree       
Reading state information... Done
62 packages can be upgraded. Run 'apt list --upgradable' to see them.

そうしたら、以下のコマンドをパッケージのアップデートを行なっておきます。このコマンドは、インストールされている packages が最新のバージョンにアップグレードされます。

$ pkg upgrade

一応、PHP7など入れている場合は、PHP8になりますので(ダウングレードはtermuxはできません)注意してくださいね。WordPressはまだphp7で動作させたほうが良いです。php8.x は、いくつかのプラグインはwp-cliでエラーや警告がでます。

まだ、テスト中ですが取り急ぎ php7のパッケージを作っておきました。

Github: termux-php7

Link
../php7.4.12/
   ├── apache2_2.4.46-4_aarch64.deb
   ├── libicu_67.1_aarch64.deb ★
   ├── php-apache_7.4.12_aarch64.deb
   ├── php-fpm_7.4.12_aarch64.deb ★
   ├── php-pgsql_7.4.12_aarch64.deb
   └── php_7.4.12_aarch64.deb ★

★のは動作することを軽く確認済み。

また、今度これらのネタについてはブログ記事にしたいと思います。

まとめ

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

・termuxのオフィシャルは、GooglePlayより、F-Droidからインストールを進めています。
・これにはちゃんと理由があるようで、そのあたりも次のネタで取り上げる予定
・Bintray側は、告知ページで「Into the Sunset on May 1st」と表現しています。Sunsetって、つまりクローズってことです!
・取り急ぎ、クロスビルド環境でPHP7.4.12をビルドしましたがこれもネタにしたいです。
・nginxとphp-fpmの組み合わせでは軽くテストしました。

あとがき

今年も折り返しの月に入りましたね! バイク関連のDIYをいろいろやりたいのですが、休みの日も急に仕事が入ってなかなか手がつけられずでした。ありがたいことなんで、仕事はやりますが趣味のDIYもやりたいので、うずうずしています。夏にはカスタム完了したバイクでツーリング行きたいですからね!

著者にメッセージ

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