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

公開:2020-01-22 06:01
更新:2020-02-15 04:37
カテゴリ:webサイトリニューアル,koa.js

はじめに

久しぶりにWebサイトのリニューアルに取り組んでいる。去年もそこそこいじったのでその振り返りと今やっていること、そして今後について書いておこうと思った。ブログを更新するのもMarkdownで文章を書くのも久しぶりである。。

去年行ったこと

nginxからexpress.jsへ移行

正確には2018年の暮れからになるのだが、Pure JSなWebサーバー環境構築をしたくてWebサーバーをnginxからexpress.jsに移行した。http/2対応はnginxの時に行っていたので、expressでもhttp/2でいこうと思ったが、express 4がネイティブhttp/2モジュールに対応していないため、node-spdyというモジュールを使ってhttp/2化を実施した。

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

図

http/2化自体うまくいったのだが、node 11のあるバージョンからnode-spdyが動かなくなってしまった。そのためしばらくサーバーはLTS(node 10.xx)で運用していたが、LTSも12となってしまい、対応が必要となった。

express.jsからkoa.jsへ移行

expressはバージョン5であればhttp/2に対応しているがアルファレベルで正式リリースを待っていたが開発は停滞している。待てど暮らせど正式版は出てこない。やむなく代替版を探していたら、koa.jsというexpressの開発メンバーが新たに立ち上げているモジュールの存在を見つけた。koa.jsはネイティブhttp/2モジュールに対応しているし、かなりexpressに似ているため移行した。

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...

2019/10/19 8:07:59

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

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

2019/10/19 8:10:09

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

2019/10/19 11:06:22

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

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

2019/10/19 11:08:29

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

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

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

No Image

2019/10/19 11:10:10

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

The Best 10 Node.js Frameworks for 2019
A comparasion of the 10 most downloaded node.js frameworks

2019/10/19 11:10:31

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

2019/10/19 11:15:24

今の状況

・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が動作しない”

2019/10/19 11:17:17

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

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

2019/10/19 11:29:53

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

node 11.1.0 onStreamRead params have changed · Issue #6 · spdy-http2/handle-thing · GitHub
Keeping track of #5 (comment)

2019/10/19 11:46:28

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

2019/10/19 11:48:20

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

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

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

2019/10/19 12:02:25

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

2019/10/19 12:05:58

そしてなんとなく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

2019/10/19 18:35:33

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

2019/10/20 6:39:13

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

2019/10/20 18:42:40

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

2019/10/21 7:04:38

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.

2019/10/21 7:06:09

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

2019/10/21 7:19:15

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

2019/10/21 7:25:38

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

No Image
Skeleton: Responsive CSS Boilerplate

koa.jsにはそんなに苦労せずに移行できたつもりだったが、ちょこちょこ対応漏れが発生した。対応漏れのおかげでアクセスが激減したが、今は移行前程度に回復している。

対応漏れに関するTweet

S.F.@SFPGMR

2019/12/3 11:57:35

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

2019/12/3 11:58:09

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

2019/12/3 21:28:58

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

2019/12/3 21:28:58

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

2019/12/3 21:37:02

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

send/index.js at master · sfpgmr/send · GitHub
Transfer static files. Contribute to sfpgmr/send development by creating an account on GitHub.

2019/12/3 21:38:11

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

2019/12/3 21:39:09

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

2019/12/3 21:42:43

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

2019/12/3 21:47:27

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

2019/12/3 21:50:12

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

2019/12/3 21:51:12

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

2019/12/4 6:09:26

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

2019/12/4 6:10:28

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

No Image

2019/12/24 20:58:38

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

2019/12/24 21:01:10

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

No Image

2019/12/24 21:18:18

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

2019/12/24 21:18:19

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

2019/12/24 21:20:39

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

2019/12/24 21:21:44

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

2019/12/26 18:04:44

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

2019/12/27 4:46:54

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

>curl --head

S.F. Web
Programming,Music,Game,etc..

HTTP/1.0 403 Forbidden
C…
No Image

2019/12/27 4:48:30

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

2019/12/27 4:50:09

どうも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...

2019/12/27 5:51:43

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

2019/12/27 6:01:38

send/index.js at master · sfpgmr/send · GitHub
Transfer static files. Contribute to sfpgmr/send development by creating an account on GitHub.
https://t.co/hZutYlai3F

2019/12/27 6:03:29

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

No Image

2019/12/27 6:07:06

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

No Image
ブロック崩し
https://t.co/kTdrbuZMCG

2019/12/27 6:08:11

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

2019/12/27 6:09:07

wsl$ curl --head

S.F. Web
Programming,Music,Game,etc..
--insecure

HTTP/2 200
content-length: 0
last-modified: Tue, 24 Dec 2019…
No Image

2019/12/27 6:09:24

うーむ。。

2019/12/27 20:29:04

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

2019/12/28 10:31:53

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

2019/12/28 10:35:07

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

2019/12/28 10:44:27

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

2019/12/28 11:02:49

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

-- 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...

2019/12/28 11:03:22

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

2019/12/28 11:05:37

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

2019/12/28 11:07:48

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

2019/12/28 11:08:44

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

2019/12/28 11:09:39

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

2019/12/29 19:37:36

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

2020/1/9 5:20:59

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

2020/1/9 5:24:04

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

2020/1/9 5:26:13

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

2020/1/9 5:29:08

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

2020/1/9 5:36:32

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

2020/1/9 5:46:57

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

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

2020/1/9 6:05:19

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

2020/1/9 6:05:56

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

2020/1/9 6:10:01

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

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

2020/1/9 6:13:08

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

2020/1/9 6:13:28

https://t.co/SElZQ0Al4A

2020/1/11 9:52:54

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

2020/1/11 11:08:53

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

2020/1/11 11:08:54

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

2020/1/13 17:54:58

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

No Image

2020/1/13 17:58:05

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

webservices/make-images.mjs at master · sfpgmr/webservices · GitHub
node.jsで作ったWebサービスたち. Contribute to sfpgmr/webservices development by creating an account on GitHub.

2020/1/13 17:58:39

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

2020/1/13 17:59:25

これね。。

No Image
sharp - High performance Node.js image processing

2020/1/13 18:02:58

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

2020/1/13 21:21:18

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

No Image
Galaxy Fight Game
https://t.co/bm7eS07rYQ

サーバーの移行

話は前後するが、使っていたクラウドのサーバーも移行した。

S.F.@SFPGMR

2019/10/14 16:45:54

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

2019/10/14 17:06:24

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

2019/10/14 17:12:38

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

2019/10/14 17:14:20

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

2019/10/14 17:19:41

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

ConoHa VPS (ubuntu 16.04) 初期設定メモ - Qiita
さくらVPSをずっと使っていたが、ConoHa VPSへの乗り換えを検討中。お安くて悪くない。

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

2019/10/14 17:23:13

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

2019/10/14 17:23:18

Ubuntuに最新のNode.jsを難なくインストールする - Qiita
この記事は [慶應義塾大学SFC村井&徳田研 Advent Calendar 2015](http://www.adventar.org/calendars/1053) の10日目の記事です。

---
[UbuntuにNod...

2019/10/15 6:24:31

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

S.F. Web
Programming,Music,Game,etc..

2019/10/15 12:40:39

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

GatsbyJS

2019/10/15 18:08:17

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

2019/10/15 18:12:42

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

2019/10/15 18:13:27

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

2019/10/16 5:48:30

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

2019/10/16 5:49:07

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

2019/10/16 5:49:34

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

2019/10/16 21:13:41

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

今後

現在はコンテンツを修正しつつ、ページのリニューアルデザインを考えている。