Webサイトのリニューアルを進めている

S.F.@SFPGMR

2019/10/19 8:03:43

今nodeのexpress 4.xを使ってwebを運用してるんだけど、HTTP/2を動かすのに使っているnode-spdyというモジュールがnode 11以降では動かないという問題があったんだけど、どうなったんだろうな。結局。。

SPDY fails in node >= 11.1.0 · Issue #350 · spdy-http2/node-spdy · GitHub

Hi, Couple of short investigation, why SPDY drop error message //------------------------------------------------------------------------------------------------------- buffer.js:72 class FastBuffe...

でまあやむなくnode 10.xで動かしている。express 5であれば、ビルトインのhttp/2モジュールが使えるらしいからそっちに移行したいところだが、どうもexpress 5 というのはまだアルファ版らしいんだな。。

GitHub - expressjs/express at 5.0

Fast, unopinionated, minimalist web framework for node. - expressjs/express

なんかこのexpressというモジュールはnodeではかなり重要なものだと思うんだけど、なんかコミットの周期みててもそんなに活発じゃなさそうな感じがするんだな。。

そもそも静的コンテンツをserveするような用途だとexpressを使う意味はないんだけど、一部そういうところがあって、それならということで静的コンテンツ配信も一緒にまとめてしまおうというのが今のうちのサーバーの状況。コンテンツが…

S.F.さんのツイート: "そもそも静的コンテンツをserveするような用途だとexpressを使う意味はないんだけど、一部そういうところがあって、それならということで静的コンテンツ配信も一緒にまとめてしまおうというのが今のうちのサーバーの状況。コンテンツがアップデートされとらんのでどんどん腐っていってはいるが。。"

“そもそも静的コンテンツをserveするような用途だとexpressを使う意味はないんだけど、一部そういうところがあって、それならということで静的コンテンツ配信も一緒にまとめてしまおうというのが今のうちのサーバーの状況。コンテンツがアップデートされとらんのでどんどん腐っていってはいるが。。”

もともとはnginxをフロントに使っていて、

１．静的コンテンツはnginxで配信
２．動的コンテンツはnginxをリバース・プロキシとして用い、expressにリクエストを転送

としていたんだけどね。HTTP/2の処理もng…

No Image

ただWebサーバーのフレームワークもいろいろあるようですな。。

The Best 10 Node.js Frameworks for 2019

A comparasion of the 10 most downloaded node.js frameworks

expressしか知らんかったけどね。。

今の状況

・express 4.xはhttp2をサポートしない
・express 5.xはhttp2をサポートしているがまだアルファ版だし、開発の動きが遅く正式バージョンがいつリリースされるか不透明
・express 4.Xでは…

S.F.さんのツイート: "今の状況 ・express 4.xはhttp2をサポートしない ・express 5.xはhttp2をサポートしているがまだアルファ版だし、開発の動きが遅く正式バージョンがいつリリースされるか不透明 ・express 4.Xではnode-spdyを使うとhttp/2のサポートは可能だがnode 11.1以降ではnode-spdyが動作しない"

“今の状況

・express 4.xはhttp2をサポートしない
・express 5.xはhttp2をサポートしているがまだアルファ版だし、開発の動きが遅く正式バージョンがいつリリースされるか不透明
・express 4.Xではnode-spdyを使うとhttp/2のサポートは可能だがnode 11.1以降ではnode-spdyが動作しない”

今の状況というか８か月くらい前の状況か。

No Image

S.F. Blog:静的サイトジェネレータのアップデート（nginx→express）

はじめに去年からWebサーバをnginxからexpressにアップデートした。途中放置気味であったがようやくまとも動くようになったので、テストを兼ねてこの記事を書くことにする。約8か月振りのブログ更新となる。静的サイト・ジェネレータ私が今使っているServers Man VPSは月額467円のエントリープラン、メモリ1GB/HDD50GBのものを使用している。最初はメモリ256MBであったがだんだ...

node-spdyの該当issueはこれかな。

node 11.1.0 onStreamRead params have changed · Issue #6 · spdy-http2/handle-thing · GitHub

Keeping track of #5 (comment)

なんかこれ見てる限り大したissueではないような気もするんだけどな。。

状況としては現在もあまり変わっとらんと、そういうわけですわな。。私としては、

・nodeをlatestバージョンにupdateしてexpressをhttp2で動かしたい

のだが、それは今時点ではかなわないというわけですわな。。

expressを5にしてもいいけどalphaだからなあ。。

そしてなんとなくkoa.jsに移行するというのはどうだろうかと思ってるが果たしてどうか。。もしくはnginxをフロントにするのを復活するか。。

GitHub - koajs/koa: Expressive middleware for node.js using ES2017 async functions

Expressive middleware for node.js using ES2017 async functions - koajs/koa

koa.jsはexpressの開発メンバーが開発しているらしく、こちらのほうがアクティブなように見えるな。。私は大したことしてないからkoa.jsに移行するのも簡単かもしれん。。

そういうわけでブランチ作ってexpress→koaに移行することにしてみた。

開発環境でkoa.jsを使ってhttp2で動かすことができるようになった。あとは自作のミドルウェア？を移植するだけですな。。

webhookのハンドラ、いいのがあったのでこれに差し替えるか。。

GitHub - Mr-six/koa-webhook: a koa webhook

a koa webhook. Contribute to Mr-six/koa-webhook development by creating an account on GitHub.

あとはトップページをどうするかですな。。デザインを変えたいんだよな。。

cssも機能アップしてるから、キャッチアップが大変ですわ。。

これシンプルで良さそう。

No Image

Skeleton: Responsive CSS Boilerplate

S.F.@SFPGMR

2019/12/3 11:57:35

自サーバへのアクセスがものすごく減少してるなと思ってたら、express -> koa.js移行時の作業漏れで404エラーが出まくってるせいだった。原因は判明したので対応せんといかんな。。

コードの書き換えが必要。

解決策としてはkoa-staticで使用しているkoa-sendのパスをdecodeしてるとこを修正した。
まずデコードなしでファイルのチェックを行い、ない場合はデコードありで行うようにしたのだ。

サーバー内のローカルのファイル名はurlencodeしたままで保存しているが、ウェブサーバがリクエストURLを取得したとき、urldecodeしてローカルファイルを検索するため404エラーとなってしまってた。

修正した部分はここ。適当なのでまだBugはあるかもしれん。。

send/index.js at master · sfpgmr/send · GitHub

Transfer static files. Contribute to sfpgmr/send development by creating an account on GitHub.

なんでurl encodeしたままのファイル名にしてるかというと、ファイル名で使用できない文字もエスケープできるし、windows/linux双方のファイルシステムでも化けないという利点があったのでね。。

この修正は私のような変なことをしているときのみに必要なものである。。

あとsitemapも作り直さないといかんわ。古いまま放置されとるし、gzipしたsitemapもなくなってるし。これはサーバー移行時の作業漏れである。。

今回のトラブルによるアクセスの激減は別として、ブログの更新はことしの５月以降ほとんど行っておらず、アクセスも漸減している傾向。もともとしょぼいPVではあるんだけど、もうちょっと盛り返したいなあと思うんだよね。。

トップページの改修を終えたらゲーム音源作りに戻り、並行してコンテンツの充実も図っていこうか。あと自作のブログプラットフォームも手をいれようか。もうちょっとコンテンツアップを容易にできるようにしないと書く気がおきん（笑）

冬休みにならんと買ったゲームはできそうにない。。

ディレクトリを走査し、sitemapを吐くコードは過去に書いたものがあったのでそれを少し修正して動かし、sitemapを更新した。これで少し様子を見てみることにする。

ちなみに吐いたsitemapはこんな感じ。。

No Image

これをGoogle Search Consoleに読み込ませるとなぜかエラーになる。「取得できません」ってなんでかな？ https://t.co/NayuRIXNVB

express → koa.jsにしたときにいろいろケアが漏れていて404が多発していた時期があって、そのせいかなあと思っている。昨日も拡張子が指定されていないファイルに自動的に.html/.htmを付与するのを忘れてていくつかの…

No Image

Search ConsoleでURL検査すると、クロールエラーとなってしまっている。robot.txtも問題ないようだ。とするとなんだろうな。いったい。。 https://t.co/qe0m2wkepw

どうも短い文のHTMLファイルはインデックスされなくなったようだが、それはまあいいかなと思うのだが。Twitterのような短さの文をブログに入れてたりとかもするので。。

ちょっとこのサイトのコンテンツはやはり見直さないといけないよな。おそらくブラウザのアップデートで動かないコンテンツもそこそこあると思うし。ドメインも変えて再出発するのもいいかもしれない。

トップページの見直しも含め、大改造しようかね。。

curlでヘッダをみたりしてたら、なんとなくこの件の原因がわかってきた感じ。。ヘッダ自体は問題じゃないんだけどね。。

まあこれが原因かなあと。。curl --head sfgpmr.netとすると

>curl --head

S.F. Web

Programming,Music,Game,etc..

No Image

あ、これは古いcurlの場合で、wsl2に入れているcurlだと無応答になってしまうんだな。。

どうもkoa.jsにおけるHEADリクエストの処理がおかしいっぽいんだなあ。。expressの時は問題なかったと思うんだけど。。koa-sendの中身を見るとちょっとケアが必要かなあと思ってる。。

how to send a 200 HEAD request without setting a body? · Issue #98 · koajs/koa · GitHub

not sure how you would do that right now. seems plausible since you're not supposed to send a body with a HEAD request and you generally send a 200 status code with one. maybe this.request.body...

というわけでHEADリクエストを返すようにしてみた。

send/index.js at master · sfpgmr/send · GitHub

Transfer static files. Contribute to sfpgmr/send development by creating an account on GitHub.

ctx.body = ''はいらんかもね。
ちょっと無理やり感ただようが。これでGoogle Search ConsoleのURL検査が通るかというと通らなかった。。まだ何か足らんのだろうなあ。。仮にnginxでうごかしてみるとど…

No Image

githubでホストしているコンテンツはエラーにならんからねえ。まだ何か足らんのだろうなあ。。

No Image

ブロック崩し

そもそもkoa.jsをそんなに理解しとらんのがいけないのだが（笑）

wsl$ curl --head

S.F. Web

Programming,Music,Game,etc..

No Image

うーむ。。

Search Consoleのライブテストというのをやっても、Googleからサーバーへのアクセスのログが残っていないことを考えると、このテストは直接サーバーへのアクセスをして行うものではないような感じだなあ。。

試しにBing Webmaster Toolでsitemap.xmlを送ってみると、403 Forbiddenになっていることが分かった。 https://t.co/OwG9adQotD

あれ、Chromeからだとちゃんと表示されるのにな。。と思ってたが。Google Search Consoleから送ってもエラーになるが何が原因なのかよくわからんかったが、例がどうもそのようだな。。 https://t.co/cj1GYqbinu

でBingbotとして取得で試してみると、403になっている理由がある程度判明したような。 https://t.co/WcLF0sSLjb

この情報でもってググるとこれだった。。

-- add {allowHTTP1: true} to my createSecureServer

http2 returns 403 and "read ECONNRESET" from Googlebot & lynx · Issue #29219 · nodejs/node · GitHub

Version: v12.8.1 Platform: Linux haus 4.15.0-51-generic #55-Ubuntu SMP Wed May 15 14:27:21 UTC 2019 x86_64 x86_64 x86_64 GNU/Linux Subsystem: N/A I'm using the default provided documentation fo...

ちゅうわけで成功しましたがな。。 https://t.co/2qGfJO4Urt

どうもクローラはhttp/2に対応しておらず、そのせいで403が出ていた。http1.1にフォールバックするように設定したらOKになったということですな。。

ちゅうわけで検索サイトからインデックスされないのはテクニカルなエラーで、何かGoogleやBingからペナルティを与えられたからではないということがわかってよかったわ。。

年末に自サーバーのトラブルシューティングとは。。

いやーとりあえずこれで様子見ますわ。。 https://t.co/swLt2la72P

徐々にだけどインデックスされとるな。よかった。。 https://t.co/xoBPcFgiaN

しばらく経った。Search Consoleを見ると、クロールされるようにはなったがエラーが頻発している。。 https://t.co/4VfJ5r7d69

詳細を見てみる。クローラのエラーのようだ。 https://t.co/5XtzsB1ENP

ampページにエラーがいろいろあり、それでインデックスされとらんのですな。これは修正しないといかん。。 https://t.co/XQlqRtVPy1

ブログ記事はmarkdownファイルをampに準ずるように静的HTMLにレンダリングしているのだが、ちょこちょこ漏れがあるようだ。

今回のケースは記事のタグの記載方法に誤りがあるのだが。。

静的ブログジェネレータの中身を見直すか。。

No Image

S.F. Blog:キーワード「静的ブログジェネレータ」 のアーカイブ

キーワード「静的ブログジェネレータ」 のアーカイブ

一応該当部分を修正してみた。エラーはなくなった。 https://t.co/MPeKyTY4pw

1個1個見直していくことにするかな。。

ついでにjson-ldの出力部分もこれに倣って修正してみるかな。

Yoast SEOによるJSON-LD階層構造化マークアップの方法 | POCO

このページではYoast SEOが発表したJSON-LDによる階層構造化マークアップの考え方と実装について解説します。またPOCOで独自に実装したコードとYoast SEOのコードを比較し、ブログ記事向けのアレンジコードを紹介します。

Blog部分の構造化データテストをするとなんか変なエラーになってるんだよな。記事はArticleを継承しているBlogPostingで、BlogPostingに必要な属性は設定しているのだが、なぜか継承元のArticleでエラーが出ている。

https://t.co/SElZQ0Al4A

不具合は徐々に修正していっている。自作静的ブログジェネレータも久しぶりに動かしたけど、CPU変えたせいでめちゃめちゃ動作が速くなった。ちょっとびっくりした。私のプログラムはAMDのCPUにフィットしてるのだろうか（笑）。

PageSpeed Insightsでの計測結果。これはAMPページ。
結構いいスコアは出ている。 https://t.co/xuOnhMcX5q

通常のHTMLはモバイルページのレスポンスが遅いと出た。 https://t.co/r6VpcnICe8

今旧コンテンツの整理や修正を兼ねて、コンテンツのリッチスニペットやサムネイル用の画像を作っている。画像作成にあたり、画面のスクショなどを保存してそれをsharpでリサイズし、所望の大きさの画像（1x1画像・4x3画像・16x9画像…

No Image

書いたコードはこのような簡単なもの。。

webservices/make-images.mjs at master · sfpgmr/webservices · GitHub

node.jsで作ったWebサービスたち. Contribute to sfpgmr/webservices development by creating an account on GitHub.

sharpのおかげでこの作業はだいぶ楽になった。。

これね。。

No Image

sharp - High performance Node.js image processing

過去のものはドラフトレベルのAPIを使って作ったりしてるからAPI側の仕様変更によって動かんようになっとることが多い。それを動くようにしようかなとは思っている。

ちゅうわけで古いコードを修正していっている。。

No Image

Galaxy Fight Game

S.F.@SFPGMR

2019/10/14 16:45:54

ServersMan VPSのOSをアップグレードしようとしたら死んだので、いきおいVPS自体を引っ越すことにした。新しいサーバーはConohaにした。

sshの設定からやり直しか。。たまらんな。。面倒くさい。。

ちゅうわけでサーバー構築中。。

ブログはしばらく更新してないけど、オリジナルのはメンテがもう面倒だし、Keystoneとかにすっかなあ。。

この辺を参考にセットアップ中。iptablesの設定はがちがちにしとかんとなあ。。あとはSSHのポートも変えとかんとね。。

ConoHa VPS (ubuntu 16.04) 初期設定メモ - Qiita

さくらVPSをずっと使っていたが、ConoHa VPSへの乗り換えを検討中。お安くて悪くない。

# ConoHa VPSの契約
RAM1GB/SSD50GBプラン＠東京リージョンを契約。月900円。お安い。
- ひとまずポート制限は...

nodeはこの情報でインストール。入れるのはLTS。

Ubuntuに最新のNode.jsを難なくインストールする - Qiita

この記事は [慶應義塾大学SFC村井&徳田研 Advent Calendar 2015](http://www.adventar.org/calendars/1053) の10日目の記事です。

---
[UbuntuにNod...

仮レベルだがhttp/2でexpressを動かして、ウェブサーバーを復活した。。

S.F. Web

Programming,Music,Game,etc..

静的サイトジェネレータの部分をgatsby.jsで書き換えようかなと思ってるところ。。

GatsbyJS

もうちょっとモダンなサイトにしたいよなあ。。

starter のCMSサンプルがよくできてるので、ちょっと手を加えればいけそうなんだけどね。Reactは好みでないがまあ長い物に巻かれる感じですかな。。

GraphQLとやらもちょっといじってみたいし。。

と思ったが、やめとこう。CSSフレームワークを導入してデザインを変えるのと、TwitterとYoutubeのポストをまとめるコードを書くくらいに留めよう。あとやるとするとAMPのエラーを直すくらいだろうかね。トップページは作り直そうかなと思う。

ここに自分のリソース費やすと音源を作る時間が無くなってしまうもんな。。

そうでなくても忘れっぽくなってるというのに。。

うーむ。HTMLのデザイン・テンプレートをベースにごにょごにょしようかなと思うけどいろいろあるなあ。。いいなあと思っても、jqueryやbootstrapゴリゴリで、それはちょっと避けたい。できるだけ軽量ですましたいなあ。AMP対応も考慮せんといかんしなあ。。