AMPバージョンはこちら

エロジン渾身のアップデートver2020のお知らせ

日付2020-01-08T13:02:00
分類
画像2枚
訪問数

新しいエロジンへようこそ。約2年ぶりのアップデート変更点は以下になります。

コメントリアルタイム反映

2.gif
1/2
0

元々ブログのコメントは投稿と同時に反映されるものですが、アクセス数が多くなるとページ表示と同時にその記事のコメントを調べて表示させているので膨大な負荷が掛かってしまい、2ちゃんねるのイチローの時のようにサーバーダウンしてしまいがちです。 そこでキャッシュを利用するのですが、WEB系のキャッシュには3つほど種類があります。

・ブラウザのキャッシュ
お使いのデバイスに保存されるページキャッシュ。ブラウザ「戻る」などの2回目に見る時、サーバにわざわざ行かずブラウザ側で保存したものをそのまま読み込む。

・サーバのオープンファイルキャッシュ
サーバがファイルにアクセスする際に取得するタイムスタンプや場所情報を一時的tempファイルに保存するキャッシュ。

・サーバのプロキシキャッシュ
サーバがアクセスされたページに返した情報をまるごと保存して、以降削除されない限り恒久的に同じものを表示させるキャッシュ。

他にもCDNやAMPキャッシュ、データベースのキャッシュなどありますが割愛します。

サーバのプロキシキャッシュは誰かがAの記事にアクセスすると、Aはその時点でキャッシュが作られるので以降他の人がAにアクセスした際に同じキャッシュを返します。これが非常に強力であり、サーバへの負担は軽減されますが削除されない限り同じHTMLを表示し続けます。よってコメントを付けても反映されることはありません。

このプロキシキャッシュは本来削除するのに全てのキャッシュを削除するしかなかったので、crontabで3時間毎に削除していました。そのためコメントしても3時間の間反映されません。

Nginx Proxy Cache Purgeエンジンエックスプロキシキャッシュパージ

このモジュールを利用することによって、URLに/purge/のついた同じページのキャッシュを削除することが可能になりました。コメントをした時、fetchで勝手にアクセスさせてあげることで、付与されます。JavaScriptの使えないAMPモードでは、投稿ボタンを押した直後にキャッシュ削除させるボタンを付与することによって実現しました。 purgeモジュールを利用するにはNginx Plus、もしくはhttp://labs.frickle.com/から取得できます。

Nginxをソースからコンパイルしたときに./configure

--add-module=/usr/local/src/ngx_cache_purge-2.3

を追加します(2.3のバージョンは時代によって変えてください)。元々コンパイルでインストールした人はnginx -Vででてくるものをコピペして、最後尾に追加すればよいです

nginx -V
nginx version: nginx/1.17.6
built by gcc 4.8.5 20150623 (Red Hat 4.8.5-39) (GCC)
built with OpenSSL 1.1.1d 10 Sep 2019
TLS SNI support enabled

configure arguments:
--prefix=/usr/share/nginx
--sbin-path=/usr/sbin/nginx
--modules-path=/usr/lib/nginx/modules
--conf-path=/etc/nginx/nginx.conf
--error-log-path=/var/log/nginx/error.log
--http-log-path=/var/log/nginx/access.log
--pid-path=/run/nginx.pid
--lock-path=/var/lock/nginx.lock
--user=nginx
--group=nginx
--with-openssl=/watanabe/dev/openssl-1.1.1d
--with-openssl-opt=enable-ec_nistp_64_gcc_128
--with-openssl-opt=no-nextprotoneg
--with-http_sub_module
--with-http_stub_status_module
--with-http_v2_module
--with-http_secure_link_module
--with-debug
--add-module=/usr/local/src/ngx_cache_purge-2.3
--with-cc-opt='-O2 -g -pipe -Wall -Wp,-D_FORTIFY_SOURCE=2 -fexceptions -fstack-protector-strong
--param=ssp-buffer-size=4 -grecord-gcc-switches -m64 -mtune=generic'
--with-ld-opt=-Wl,-E

Nginx /etc/nginx.conf

proxy_cache_path /var/cache/nginx keys_zone=zone_name:1m max_size=1g inactive=7d;
location ~ ^/purge/(.+?) {
proxy_cache_purge zone_name $1;
}

あとはコメント投稿ボタンを押したときにさっき書いたpurgeのURLへアクセスさせます。JavaScriptならこう書きます

comment.onclick = () => {
fetch("/purge" + location.pathname)
}

無事成功すればNginxから200ステータスのレスポンスを返してくれます。

09.jpg
2/2
0

タイトル、本文、タグに加え、記事に書かれたコメント本文までヒットします。

AMPバグ奮闘記

このサイトは2種類の表示形式に分かれており通常版とAMP版があります。(厳密には3種類)通常版はJavaScriptが使える一般的な形式のHTMLですが、AMP版はGoogleにコンテンツをキャッシュさせサイトの表示をシームレスに軽快にすることができますが、いろいろな制約に基づいて書いていかなければなりません。そこで生じるさまざまなバグに対応していきます。

クエリーバグ

12月30日、一通り作業が終わってエラーログをtailでリアルタイムにみていると404のURLがズラズラと表示されていきます。

eromanga/summarjourney?_gl=1*1be16km*_ga*QTVHNUdubEdJbHZ0TVRSeTRCRG5mRi1ReVFJVz...
eromanga/quickorslow?_gl=1*1vtdtpi*_ga*RlNsdE40bmdTVVpITml5YUoxQVR6REtnN0kzUzjc...
eromanga/greed_of_the_aoki?_gl=1*1mdj35y*_ga*dlRZM3dpN2xpQ1I3U1NHeUJVNGZHaGc3M3...
eromanga/shoujikigirlparty?_gl=1*1be16km*_ga*QTVHNUdubEdJbHZ0TVRSeTRCRG5mRi1ReV...

URL(eromanga/summarjourney)の後ろにハテナをつけてデタラメな文字列が並んでいます。 URLの文字数を1000文字ほど打ってサーバの負担を増やしていく嫌がらせかと思ったんですが、どうやらGoogle検索からAMPページに訪れた場合のリファラーURLだったんです。 サーバに https://erozine/jp/eromanga/XXXXXX のページを通った場合、太字のようにエロ漫画カテゴリ/スラッグの記事をデータベースで探して表示させていました。

つまり上記のようにの次に変な文字列が続くとサーバはeromanga/XXXXX?_gl=1*1be16km*_ga*QT...のURLを探します。

当然そのようなURLは無いので404を返してしまうということです。 URLはURLとしてクエリはクエリとして分けるよう定義することで解決しました。

bodyが二つ入れ子になるバグ

上記で厳密には3種類あるといったのは、自分で作ったAMP版の他に「Google検索から訪れた場合のAMP版」というのが存在します。それぞれソースとURLが異なります。これは普通に作っていたらまず気づくことはない(自分のサイトはブックマークに入れているはずなのでアクセスする際にエロジンとわざわざ検索しない、あるいはURLにerと打ち込んだだけで候補でエロジンにアクセスできる)

https://erozine-jp.cdn.ampproject.org/v/s/erozine.jp/amp?usqp=mq331AQCKAE%3D&_js_v=0.1

[未完]
この記事は未完で終わりましたがもったいないので公開だけします

日付2020-01-08T13:02:00
分類
画像2枚
訪問数
最後までお読みいただき有難うございました
Thank you for watching until the end

似たような記事