orangeitems’s diary

クラウドで働くインフラエンジニアの日々の感想です(ほぼ毎日更新)。

はてなブログからWordPressに移行したものの、ものの数時間後に挫折して戻ってきた話

f:id:orangeitems:20200626204707j:plain

 

はてなブログ⇒WordPress・・断念

大変かっこ悪いのですが、昨日から今日にかけて、はてなブログからWordPressに移行をしようとして結局辞めて戻ってくるという残念な状況に陥ってしまいました。

かっこ悪いだけでは実が無いので、いろいろわかったことを共有します。

 

前提条件

今回、

・オリジンサーバー:EC2 (Amazon Linux 2)
・画像:S3
・CDN:Cloud Front

なんて言う凝った構成を作ってみたわけです。

 

なお、Wordpressの導入については下記を参考にしました。

qiita.com

 

CloudFrontについては下記を参考にしました。

 

qiita.com

 

S3については下記を参考にしました。

hacknote.jp

 

S3に画像を置く件についてはすごくうまくいきました。

そして、いろいろあったものの、CloudFrontでの公開までいきました。

なぜ、公開したあとに辞めたのか・・それはいろいろな問題に囲まれてしまったからです。

 

 

わかったこと

 

①パーマリンク問題

はてなブログのURLって、ほとんどの人が、

https://ドメイン名/entry/2020/06/25/084618

つまり、entry/YYYY/MM/DD/hhmmssという文字列になっていますよね?

WordPressではパーマリンクというのですが、なんと最近のWordPressにおいてはこのURLの形式では正しく動作しなくなっています。

 

webskillup.com

勝手にWordPress 5.4.1のアップデートのタイミング2020年4月30日〜2020年5月1日で、日付のみパーマリンク設定だと個別ページ(single.php)ではなく、日付アーカイブページとして表示される問題が発生。

はてブからWordPress移行の方は日付パーマリンクを使っている場合が多く、突然の仕様変更にダウングレードなどの対応をされています。

 

私もWordPressに文書をインポートしたら、文書が開かなくなって・・。

この情報、もっと広く知れ渡るべきだと思います。上記をお読みいただくとよくわかるのですが、.htaccessで全文書をあるべきURLに全部リダイレクトしないと対応できません。

私の文書は1700近くあったので、全部、

Redirect permanent ルートパス リダイレクト後URL
・・・・・・・・・・

と書いてリダイレクトさせましたが・・。

とにかく、はてなブログから最新のWordPressに移行すると、URLの形式が変わっちゃいます。URLはGoogle検索や、他の人の記事に大量に残っているので、これが変わってしまうというのはなかなか刺激的・・でした。

 

②リソース問題

さて、まあ私の目論見の失敗は、オリジンサーバーをt2.microにしたことです。1コア1GBの小さなサーバーですね。で、単純にオリジンサーバーとしては機能したのですが、いざ、Wordpressの管理画面でいろいろ編集していたら・・、apacheごと落ちちゃうのです。

まあ、当然ですよね、コアが1つしかない状態で、ローカルにあるmariadbに修正をかけながら、しかもCloudFrontのお相手をしないといけないわけです。

再起動しても再起動してもだんまりになるapache。

 

③apache落ちる問題

上記のapacheの件は、apacheのチューニングで改善はされました。そもそも最大接続数が小さすぎてつまっちゃっていたようでした。

 

下記を参考にしました。

qiita.com

 

ただ、やはりWordpressの管理画面のもたつきは否定できず・・。もっとパワフルなリソースがないと、Wordpressの運用は厳しいんだなと思いました。

一方で、ではリソースを増やせばいいじゃないか、と言う話ですが、そうやっていくと月のサーバー代も高騰していきます。はてなブログは月1,000円、年間契約だと600円ですから、雲泥の差かな・・と。

 

④CDNキャッシュのせいでプレビューができない問題

Wordpressの管理画面については、キャッシュしないようにしていたので運用には問題ないかなーと思っていました。

しかし、大変残念なことに、プレビュー画面のURLは、/wp-admin/*も*.phpでもないんですね。

すり抜けてキャッシュするせいで、プレビューが更新されない。

これじゃあ、記事が書けない。当初はWordpressが記事をどういうふうに表示するかわからんので、プレビューを表示させまくりたかったのですが、使い物にならん!、ということが起きてしまいました。

多分回避策はあるとは思うのですが、そろそろ記事が書きたくなったので、いやこれは移行はやめてもう戻そう、と考えましたね。

そもそも、やっぱり管理画面と、ブログの内容(コンテンツ)はサーバーを分けたほうが良い!。というので、もし仕事でやるなら、下記の構成がいいなと思いました。

 

sys-guard.com

 

このように、管理画面のホストはCDNを通さず、別サーバーにコンテンツを同期して、そこをCDNでホストするのが良いです。絶対。CDNと管理画面は非常に相性が悪い。

 

⑤Wordpressの無料テーマはほとんどが満足できない

Wordpressはテーマを入れ替えることでデザインや操作が大きく変わるのが特徴です。あんなにテーマがたくさんあるからどれか一つは使いやすいだろうと思ったのですが、無料版はほとんどが有料版のテーマのための客寄せでした。

はてなブログ並みの操作感が欲しければ、やっぱり有料版のテーマは必須だと思いました。サーバー代はかかる上にテーマ代までかけていくと、やっぱりコスパが悪いな、と。

なお、無料テーマでも、有料テーマ並みに機能がそろっているものがあります。

 

wp-cocoon.com

 

海外の無料テーマなんて、使うだけ時間のムダ。このテーマを入れれば結構なことができるようになるのですが、どうも、国内のwordpressサイトはほとんどCocoonベースのため、まとめサイトっぽくなってしまうのが玉に瑕という感触で、私は使いませんでした。

 

⑥アイキャッチ画像問題

はてなブログから、記事をエクスポートするのは簡単です。

 

help.hatenablog.com

 

でも、画像まではエクスポートできません。

はてなフォトライフに画像は保存されたままで、そのリンクごとエクスポートされます。Wordpressを運営しつつ画像ははてなフォトライフ見に行けってのも良くないので、以下の方法を取りました。

 

はてなフォトライフから画像を引っこ抜く。

 

www.zbuffer3dp.com

 

取得した画像を、S3に、アップロードする。

 

dev.classmethod.jp

 

S3では、画像をパブリックで見られるようにしておく。

 

docs.aws.amazon.com

 

Wordpressにインポートする前に、記事データの画像URLを一括変換し、S3のURLにアクセスするようにしておく。

インポートまでは下記の手順に沿いました。

 

sakagami3.com

 

まあ、これで、画像はS3にあり、記事もインポートできたのですが・・。

大きな問題が。

 

アイキャッチ画像が設定されていない!。

Wordpressのテーマのほとんどが、アイキャッチ画像前提となっていて、使わないとかなり寂しいデザインになってしまいます。

 

それで、アイキャッチの自動設定をしたんです。

 

www.aritai.net

 

で、無事、アイキャッチ画像は設定できたんです。

次にまた問題が起き、記事にて、アイキャッチ画像と、記事の頭にある画像の2つが並べて表示されるので、かっこ悪いことかっこ悪いこと。

 

CSSの修正で逃げました。

.entry-content img:first-child {display:none;}

って一行CSSに入れて、記事の初めに出てくる画像は消すという荒業(笑)。

 

多分、ほとんどの方は、アイキャッチ画像を設定した後に、記事を一つ一つ開いて、記事頭の画像は手で消すことをされたんじゃないかと思います・・、が、私は1700記事あったので10記事くらいで無理だなと思い辞め、上記のCSSの修正で回避しました。

まあそれぐらい、簡単じゃないよってことです。

 

⑦ブログカード問題

心が折れたのはこの件です。

はてなブログでは、外部URLのリンクを、ブログカードとして表示してくれます。

 

www.orangeitems.com

 

これ、同じことをしたいのですが、どうも最近のWordpressのビジュアルエディターは標準ではバグってしまう。

 

fukafuka295.jp

しかし最近のWordpressアップデートの影響を受けてか、Embed機能が正常に動作せずリンクカードの表示がくずれたり、デザインが反映されないという不具合が起きています。

 

で、確かに私もバグってしまい、記事の通りPz-LinkCardプラグインを入れたのですが・・・、品質に満足できず、ここで心が折れました。

記事書くどころじゃないじゃん・・って。

 

⑧AMP問題

WordpressのAMP対応の記事は色々ありますが、信頼できるのは下記の記事です。

 

lets-hack.tech

 

で、AMP対応はできたんですが、一番困ったのが、cssがないと、⑥アイキャッチ画像問題、で起きた、画像が2枚貼りつく問題が発生してしまう!。

ということで、以下のサイトでcssが設定できることを教えてもらいました。

 

web.vogue.tokyo

 

実ははてなブログだと、この辺りまで手が届いているので、やっぱり優秀だな、と思いました(心折れてる)。

 

感想

はてなブログに完敗です。

記事を書きたいのに、まずは普通にサーバー運用するだけで、手一杯になってしまいました。

お金をいくらかけてもいいならできるけど、予算ありきですからね。

 

ただ、上記のリンクも含めて、私には宝物です。

Wordpress絡みの仕事来たら、何をしたいのか理解できます。

S3やCloudFrontの利用、Wordpressの管理画面、Amazon Linux 2と、普段はあまり馴染みのない部分と格闘できたので、これは経験値となりました。

 

もう一度移行して、と言われたら、次のことに気を付けるかなあ・・。

・Wordpressの管理画面のホストと、静的コンテンツのホストは初めから分けるべき。なんならDBも別にするべき。
・テーマにはお金をかける。
・はてなブログをエクスポートするなら画像はS3に置く。記事データの画像URLはS3に向ける。これはやっぱり効果的。
・はてなブログの記事数が多いなら、wordpressのアイキャッチ機能は使わないのも手かもしれない。
・AMP設定はプラグイン対応。ちゃんと表示するためにはcssを書く必要がある。

 

どうも、Wordpressかいわいには、長いナレッジがインターネットに一杯落ちていて、その割には情報が古いものもたくさんあるので、正しい情報に辿りつくのが非常に難しい印象です。

今日まとめたこの記事は、おそらく、チャレンジしてみようかと思う方にとっては良いリンク集になっているのではないか?と思います。

簡単には手を出さない方がいいよ・・、とだけ申し上げて、この件は思い出とします(昨日も夜の3時まで粘ったのですが残念)。