複数人での 大規模サイト移植のテクニック

2023.9.9のジャムスタックチョットデキル!!ナカノ!!で登壇した内容です。
実際の案件を例に取り、どのような対応を行ったかお話しました。

Transcript

1. ジャムスタックチョットデキル !! ナカノ!! 2023.09.09 ジャムスタックチョットデキル!! ナカノ!! Shumpei (chot Inc.) 複数人での 大規模サイト移植のテクニック
2. ジャムスタックチョットデキル !! ナカノ!! Shumpei X: @seventhseven - ちょっと株式会社 受託事業部
 - フロントエンドエンジニア - 妻と4歳の息子と暮らしています。 - 趣味で漫画のファンサイトを運営しています。 2
3. ジャムスタックチョットデキル !! ナカノ!! 今日話すこと 1. プロジェクトの概要 2. 技術面での課題と対応 3. プロジェクトを通して 4. まとめ 3
4. ジャムスタックチョットデキル !! ナカノ!! 1.プロジェクトの概要 4
5. ジャムスタックチョットデキル !! ナカノ!! 今回のプロジェクトの目的 WordPressで長らく（10年）運用されてきたコーポレート サイトをJamstack化するプロジェクト。 - 移行対象ページ700ページ超 - 日・英・中の3カ国語のページが存在する - 開発期間は約2ヶ月弱 静的サイトへ移行することで、セキュアな構成にする。 5
6. ジャムスタックチョットデキル !! ナカノ!! •Jamstack構成でビルドした成果物をS3へデプロイする 今回使用した主な技術スタック 6 bucket-a bucket-b ••• S3 AWS Nuxt.js
7. ジャムスタックチョットデキル !! ナカノ!! •Jamstack構成でビルドした成果物をS3へデプロイする 今回使用した主な技術スタック 7 bucket-a bucket-b ••• S3 AWS Nuxt.js コンテンツによっては Nuxt.jsとは別ルートで 特定のバケットにデプロイする
8. ジャムスタックチョットデキル !! ナカノ!! Jamstack移行計画 8 過去のページを 静的化
9. ジャムスタックチョットデキル !! ナカノ!! Jamstack移行計画 9 過去のページを 静的化 CMS連携部分 をJamstack化
10. ジャムスタックチョットデキル !! ナカノ!! Jamstack移行計画 10 過去のページを 静的化 CMS連携部分 をJamstack化 Nuxt.jsへ統合
11. ジャムスタックチョットデキル !! ナカノ!! Jamstack移行計画 11 過去のページを 静的化 CMS連携部分 をJamstack化 Nuxt.jsへ統合
12. ジャムスタックチョットデキル !! ナカノ!! 静的移行ファイルについて 移行対象のファイルは、WordPressで管理されているページの 他、大量のHTMLや画像・pdfなどのバイナリファイル群があった ため、段階的にスクレイピングを行った。 ワードプレス由来になっている箇所を整えたのち、 Nuxt.jsのpublicディレクトリへ格納した。 12 スクレイピング
13. ジャムスタックチョットデキル !! ナカノ!! Jamstack移行計画 13 過去のページを 静的化 CMS連携部分 をJamstack化 Nuxt.jsへ統合
14. ジャムスタックチョットデキル !! ナカノ!! フロントエンドのディレクトリ構成 14 ・TOPページ Nuxt.js ・最新のニュース・IR ・問い合わせ など src/pages ・過去のニュース・IR ・会社概要 ・部署ごとの紹介 など src/public ※PJの都合上src配下に配置
15. ジャムスタックチョットデキル !! ナカノ!! フロントエンドのディレクトリ構成 15 ・TOPページ Nuxt.js ・最新のニュース・IR ・問い合わせ など src/pages ・過去のニュース・IR ・会社概要 ・部署ごとの紹介 など src/public CMS部分は公開環境と プレビュー環境を用意する ※PJの都合上src配下に配置
16. ジャムスタックチョットデキル !! ナカノ!! CMS連携について 公開環境はSG、プレビュー環境はSPAで描画する仕様。 nuxt.config.ts内で環境変数をもとにふるまいを分ける。 16 nuxt.config.ts
17. ジャムスタックチョットデキル !! ナカノ!! 環境ごとの記事データの扱い プレビュー環境(SPA)の場合 - アセットファイル含め記事内のデータは、 画面アクセス時にcontentfulからAPI経由で表示させる 17
18. ジャムスタックチョットデキル !! ナカノ!! 環境ごとの記事データの扱い 公開環境(SG)の場合 - 記事で使用する画像などのアセットファイルは、 ビルド直前にcontentfulからダウンロードしてプロジェクトファイ ルに含める 18
19. ジャムスタックチョットデキル !! ナカノ!! 環境ごとの記事データの扱い 公開環境(SG)の場合 hooksを使って、ビルド 直前に、記事データを　　　　　　　　　　　　　　　　　ダウンロードす る関数を　　　　　　　　　　　　　　　　実行してデプロイする。 19 nuxt.config.ts
20. ジャムスタックチョットデキル !! ナカノ!! 開発エンジニアの役割分担 実装を担当するエンジニアは役割を分担して、 それぞれのタスクを担当していった。 20
21. ジャムスタックチョットデキル !! ナカノ!! 開発エンジニアの役割分担 21 下地作り・ コア部分以外の 実装 ビルド周りや Nuxt.js自体の 調査・対応 CMS連携の コア部分の実装 (ニュース・IR)
22. ジャムスタックチョットデキル !! ナカノ!! 日々の進め方 - タスクはすべてbacklogにてチケット管理 - デイリースクラムを組み、朝会を毎日30分程度実施 - 開発序盤からQAエンジニアも参加してもらい、 各メンバーの進捗状況を確認していた 22
23. ジャムスタックチョットデキル !! ナカノ!! 2.技術面での課題と対応 23
24. ジャムスタックチョットデキル !! ナカノ!! 技術面での課題 このPJ特有なものも含め、いくつかの課題があった。 24
25. ジャムスタックチョットデキル !! ナカノ!! 技術面での課題 - ビルド時のリンクエラー - 不完全なページがデプロイされる - デプロイの長時間化 25
26. ジャムスタックチョットデキル !! ナカノ!! 技術面での課題 - ビルド時のリンクエラー - 不完全なページがデプロイされる - デプロイの長時間化 26
27. ジャムスタックチョットデキル !! ナカノ!! ビルド時のリンクエラー - ビルド時、生成したページのURLリスト内に、 404エラーを出力するURLがいくつか表示されていた - URLを見る限り、publicディレクトリに格納されている 静的HTMLと関連していた 27
28. ジャムスタックチョットデキル !! ナカノ!! ビルド時のリンクエラー - ビルド時、生成したページのURLリスト内に、 404エラーを出力するURLがいくつか表示されていた - URLを見る限り、publicディレクトリに格納されている 静的HTMLと関連していた Nuxt.jsのページデータの取得方法や、ビルド時の挙動を把握す ることが必要になった。 28
29. ジャムスタックチョットデキル !! ナカノ!! nitroを調べる nitroはNuxt.jsのサーバーエンジンを担うモジュール 29 https://nitro.unjs.io/
30. ジャムスタックチョットデキル !! ナカノ!! ビルド時のエラーまでの流れ 1. yarn generateする 2. nitroのprerenderがページ内のaタグを検知する 3. リンクされている全てのページをNuxt.jsでビルドしようとする 4. publicにある通常のHTMLファイルや、別バケットにあるペー ジもリンク先であれば対象になり、これらもNuxt.jsでビルドしよ うとする 5. vueファイルではない・もしくはNuxt.jsの管理外ため、ページが 存在しない判定となってしまう 30
31. ジャムスタックチョットデキル !! ナカノ!! nitro側で行える、ビルド設定のひとつ。 ビルド時に指定されたルートにフェッチし、静的ファイルとし て.output/publicディレクトリにコピーする。 ignoreにリストされたルートは無視することができる。 Default: { crawlLinks: false, ignore: [], routes: [], … } https://nitro.unjs.io/config#prerender nitro/prerender 31
32. ジャムスタックチョットデキル !! ナカノ!! 実装方針 nuxt.config.tsにnitroプロパティを追加し、prerenderのignoreに 弾きたいパスを登録することで回避できた。 32 nuxt.config.ts
33. ジャムスタックチョットデキル !! ナカノ!! 技術面での課題 - ビルド時のリンクエラー - 不完全なページがデプロイされる - デプロイの長時間化 33
34. ジャムスタックチョットデキル !! ナカノ!! 不完全なページがデプロイされる ビルドは成功し、デプロイ先でページは表示される。 ただし動的なコンテンツが取得されていない、 または部分的に表示される現象。 34
35. ジャムスタックチョットデキル !! ナカノ!! 不完全なページがデプロイされる 調査の結果、CMS側に500エラーが発生したもののそのままビル ドされ、デプロイまで通っていたことが判明。 35
36. ジャムスタックチョットデキル !! ナカノ!! 不完全なページがデプロイされる 調査の結果、CMS側に500エラーが発生したもののそのままビル ドされ、デプロイまで通っていたことが判明。 → 500エラーの場合は、異常終了させる処理を加えることで対応 36
37. ジャムスタックチョットデキル !! ナカノ!! カスタムエラーハンドラで対応する https://nitro.unjs.io/config#errorhandler 37
38. ジャムスタックチョットデキル !! ナカノ!! カスタムエラーハンドラで対応する 先述のnuxt.config.tsのnitroプロパティに、 errorHandlerを追加し、割り当てたerror.tsの中で対応した 38 nuxt.config.ts
39. ジャムスタックチョットデキル !! ナカノ!! 技術面での課題 - ビルド時のリンクエラー - 不完全なページがデプロイされる - デプロイの長時間化 39
40. ジャムスタックチョットデキル !! ナカノ!! デプロイ完了までの長時間化について CMS連携において、本番環境を再現したかったものの、 クライアント様が環境を用意しており、セキュリティの観点からイン フラ設定を把握することが難しかった。 40
41. ジャムスタックチョットデキル !! ナカノ!! デプロイ完了までの長時間化について CMS連携において、本番環境を再現したかったものの、 クライアント様が環境を用意しており、セキュリティの観点からイン フラ設定を把握することが難しかった。 インフラが関連する事象に関しては、ローカルで完全に再現する ことができなかったため、 どうしてもデプロイして確かめる必要があった。 41
42. ジャムスタックチョットデキル !! ナカノ!! デプロイ完了までの長時間化について ただ、過去のページや大量のバイナリ(画像やPDF)もすべてNuxt で抱えるため、デプロイが完了するまでに45〜50分程度かかって しまう。 42
43. ジャムスタックチョットデキル !! ナカノ!! デプロイ完了までの長時間化について ただ、過去のページや大量のバイナリ(画像やPDF)もすべてNuxt で抱えるため、デプロイが完了するまでに45〜50分程度かかって しまう。 → Nuxt.jsが関連する動作確認をしたい時だけ、シェルスクリプト で動作確認に必要のないファイル(PDFなど)を削ってからデプロ イする。 43
44. ジャムスタックチョットデキル !! ナカノ!! デプロイ完了までの長時間化について ただ、過去のページや大量のバイナリ(画像やPDF)もすべてNuxt で抱えるため、デプロイが完了するまでに45〜50分程度かかって しまう。 → Nuxt.jsが関連する動作確認をしたい時だけ、シェルスクリプト で動作確認に必要のないファイル(PDFなど)を削ってからデプロ イする。 → 45〜50分から10分に短縮 44
45. ジャムスタックチョットデキル !! ナカノ!! ここまでのまとめ •ビルド時のエラーを回避する ビルドに含みたくないパスはignoreに登録する •不完全なデプロイを防ぐ 500エラーを検知したら異常終了させる •デプロイの長時間化 Nuxt.jsの動作だけを見たい場合は不要なバイナリを デプロイさせない 45
46. ジャムスタックチョットデキル !! ナカノ!! 3.プロジェクトを通して 46
47. ジャムスタックチョットデキル !! ナカノ!! プロジェクトを通してのふりかえり - 難しかった点 - 良かった点 47
48. ジャムスタックチョットデキル !! ナカノ!! プロジェクトを通してのふりかえり - 難しかった点 - 良かった点 48
49. ジャムスタックチョットデキル !! ナカノ!! 難しかった点 インフラ面で本番環境との差があることで、 エラー発生時に調査に時間がかかったり、手戻りがあった。 49
50. ジャムスタックチョットデキル !! ナカノ!! 難しかった点 QAエンジニアが書いてくれたテストコードで下地はできていたも のの、開発期間の兼ね合いもあり、 実装者側で書くE2Eテストコードの量が少なかった。 50
51. ジャムスタックチョットデキル !! ナカノ!! 難しかった点 QAエンジニアが書いてくれたテストコードで下地はできていたも のの、開発期間の兼ね合いもあり、 実装者側で書くE2Eテストコードの量が少なかった。 ただし本番環境を再現しきれなかったので、書けたとしてもテスト の妥当性に疑問が残る…。 51
52. ジャムスタックチョットデキル !! ナカノ!! 難しかった点 commitごとにCIを回してのデプロイフローを取ると、 今度はデプロイ完了までの時間と、テスト完了までの時間を合わ せると1時間ほどかかることを考えると難しい。。 52
53. ジャムスタックチョットデキル !! ナカノ!! プロジェクトを通してのふりかえり - 難しかった点 - 良かった点 53
54. ジャムスタックチョットデキル !! ナカノ!! 良かった点 エラー対応を通じて、ドキュメントに書かれていないような挙動を 把握しながら実装することで、 Nuxt.jsの理解を深めることが出来た。 54
55. ジャムスタックチョットデキル !! ナカノ!! 良かった点 今まで経験したPJではなかったが、QAエンジニアが序盤からア サインされていたのも一つのポイントだった。 主に静的移行したページの差分・リンク切れチェックや、 CMS連携のテスト、その他細かいサポートをしてもらえたことで開 発エンジニアの負担が減った。 55
56. ジャムスタックチョットデキル !! ナカノ!! 4.まとめ 56
57. ジャムスタックチョットデキル !! ナカノ!! まとめ - ドキュメントを読むだけではわからない場合、フレームワーク 内で使われているモジュールを理解しながら制作を行うことも 時には必要 - QAエンジニアが序盤から参加することで、PJそのものに対し てキャッチアップの時間を取ることができ、開発エンジニアとの コミュニケーションコストを減らすことができた 57