リプレイスでやったこと めぐろLT#21

● 木村宗吾(K1mu21) ○ 社会人2年目です！(高校からプログラミングしてました ) ● 株式会社ラクーンホールディングス技術戦略部 ● バックエンド(+フロントエンド+CI/CD…） ○ 業務ではJava,PHP ○ 趣味ではGo ● 趣味 ○ ライブ ■ ボカロのライブ行きました ○ サウナ ■ 錦糸町の黄金湯が最高です 😆 ○ etc … ● X ○ @detunote

やったこと 2024年2月から8月まで弊社公式サイトのリニューアルプロジェクトを行った (関係ないがほぼ全く同じ期間で他のクソでかPJにも参加していた)

やったこと 1. Cloudflareでホスティングするようにした 2. CloudflarePagesFunctionのLogをCloudWatchに飛ばすようにした 3. パッケージ管理ツール(Renovate,Dependabot)を入れた 4. biomeの静的解析結果をCodeQuarityに出るようにした(githubではcode inspection?) 5. WordPressの記事,画像データをmicroCMSに移行した

Cloudflareでホスティングするようにした 元々社内サーバー内でTomcatを使ってホスティングをしていた 本来はデザインだけの改修予定だったが、↑の部分も回収しようという事になった 色々AWS、GCPなども考えたが、選んだのはCloudflare 無料枠が大きい、値段が安い、機能が要件的に十分だったことが決め手

CloudflarePagesFunctionのLogをCloudWatchに飛ばすようにした ● CloudflarePagesFunctionはAWSでいうLambdaみたいなもの ○ CloudflarePagesFunctionを使ってYoutubeAPIを叩いていたが、ログの保管ができない ○ Cloudflare WorkersだとLogPushの機能を使ってS3とかNew Relicにログを送れるけど... ● 監査的にログがないと起こられるので、以下のライブラリを使ってCloudWatchに送 信する仕組みにしてログの保管ができるようにしました https://github.com/aws/aws-sdk-js-v3/tree/main/clients/client-cloudwatch-log s ● Cloudflareの話は別のLTで話してるので興味があったら見てみて下さい https://speakerdeck.com/k1mu21/cloudflareiizo

パッケージ管理ツールを導入 ● ライブラリのアップデートを自動で管理してほしかったのでDependaBotを導入しまし た ○ CIで回してるので人の手があまり入らないようになってます ○ GitLabだとgroupsキーが使えなくてかなり微妙でした ● MergeRequest(PR)をGitLabでもまとめることができるRenovateに入れ替えました ○ 入れ替えるにあたった詳細は Zennで書いています ○ https://zenn.dev/aeon_mall/articles/a62a1cf8652f01 ○ https://zenn.dev/aeon_mall/articles/1704bebe048ef0

biomeの静的解析結果をGitLab CodeQuarityに出るようにした ● biomeにはreporterという機能があり、これを使うと解析結果をJsonやxmlなどの形式 で出力することができます ○ gitlabを指定すると静的解析結果を CodeQuarity形式で出力することができるようになります ● これをArtifactとして持たせることで、MR上にCodeQuarityで表示することができる ようにしました

WordPressの記事,画像データをmicroCMSに移行した ● この作業が一番大変だった ● WordPressをmicroCMSに移行することになったので過去データを移行する必要が 出てきた ○ microCMS公式が出してるやり方だとアイキャッチ画像のみを引っ張ってくることができなかった ■ アイキャッチが本文内にあり、 idなどでアイキャッチ画像の指定がされておらず特定が不可能 ● https://blog.microcms.io/wordpress-to-microcms-tutorial-preparation ● 新しくRestAPIのプラグインを入れることで情報は全て取得できたので解決 アイキャッチは記事の概要の上に来る画像のこと

メディア画像の取得 ・WPは/yyyy/mm/画像名の形式で保存されてるので月が変われば同じ画像名が使え る ・curl -oでファイルをダウンロードしていたが、↑の考慮をせずに画像名だけでダウンロー ドしてしまいファイルが上書きされてしまった ・解決した後にダウンロードファイル数が2ファイル足りなくて色々調査したが、全く同じ /yyyy/mm/画像名で形式で保存されていたのでまた上書きされていた

メディア画像のアップロード ● マネジメントAPIを使ってアップロードを行いますが、ドキュメントがあるのでそこまで 難しくはないです ● 1秒間に10ファイルしか送れないので1000ファイル以上アップロードしたのでかなり 時間が取られます ● たまに500、429エラーが発生するのでリトライ処理をしないとかなり面倒くさいとい う罠があります

記事の取得 新しく入れたＷＰのプラグインを使うことで、APIを叩くことで必要な記事情報を取ってこ れるようになったので特に難しいことはないよ Advanced Custom Fieldsは許さん

記事のアップロード ● microCMSにアップロードする際は勝手にmicroCMSの形式に変換して保存される のでWPの内容を変換する必要があった ○ WP独自の形式で表示されてる部分もありキレてた https://microCMS形式/assets/一度きりの乱数/毎回生成される乱数/ファイル名 ファイル名x240-320.png→ファイル名png＝240&w＝320

まとめ ● 新しいものにリプレイするのマジで大変 ○ それぞれ基本的に互換性がないのでそれに合わせた設計とかを考えないといけない ● 一から作り直すとマジで力がつく ○ インフラ側とかの知識がすごいついた ○ できなかったら代用できる方法がないかと気づける機会が増える ● WordPressほんまカス ○ microCMSに移行できるツールを OSS化したいなと思ってます ○ カスコードなのでリファクタ必須