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

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

Transcript

1. ジャムスタックチョットデキル !! ナカノ!!
   2023.09.09 ジャムスタックチョットデキル!! ナカノ!!
   Shumpei (chot Inc.)
   複数人での
   大規模サイト移植のテクニック
   

   View Slide

2. ジャムスタックチョットデキル !! ナカノ!!
   Shumpei
   X: @seventhseven
   - ちょっと株式会社 受託事業部

   - フロントエンドエンジニア
   - 妻と4歳の息子と暮らしています。
   - 趣味で漫画のファンサイトを運営しています。
   2
   

   View Slide

3. ジャムスタックチョットデキル !! ナカノ!!
   今日話すこと
   1. プロジェクトの概要
   2. 技術面での課題と対応
   3. プロジェクトを通して
   4. まとめ
   3
   

   View Slide

4. ジャムスタックチョットデキル !! ナカノ!!
   1.プロジェクトの概要
   4
   

   View Slide

5. ジャムスタックチョットデキル !! ナカノ!!
   今回のプロジェクトの目的
   WordPressで長らく（10年）運用されてきたコーポレート
   サイトをJamstack化するプロジェクト。
   - 移行対象ページ700ページ超
   - 日・英・中の3カ国語のページが存在する
   - 開発期間は約2ヶ月弱
   静的サイトへ移行することで、セキュアな構成にする。
   5
   

   View Slide

6. ジャムスタックチョットデキル !! ナカノ!!
   ●Jamstack構成でビルドした成果物をS3へデプロイする
   今回使用した主な技術スタック
   6
   bucket-a
   bucket-b
   ●●●
   S3
   AWS
   Nuxt.js
   

   View Slide

7. ジャムスタックチョットデキル !! ナカノ!!
   ●Jamstack構成でビルドした成果物をS3へデプロイする
   今回使用した主な技術スタック
   7
   bucket-a
   bucket-b
   ●●●
   S3
   AWS
   Nuxt.js
   コンテンツによっては
   Nuxt.jsとは別ルートで
   特定のバケットにデプロイする
   

   View Slide

8. ジャムスタックチョットデキル !! ナカノ!!
   Jamstack移行計画
   8
   過去のページを
   静的化
   

   View Slide

9. ジャムスタックチョットデキル !! ナカノ!!
   Jamstack移行計画
   9
   過去のページを
   静的化
   CMS連携部分
   をJamstack化
   

   View Slide

10. ジャムスタックチョットデキル !! ナカノ!!
    Jamstack移行計画
    10
    過去のページを
    静的化
    CMS連携部分
    をJamstack化
    Nuxt.jsへ統合
    

    View Slide

11. ジャムスタックチョットデキル !! ナカノ!!
    Jamstack移行計画
    11
    過去のページを
    静的化
    CMS連携部分
    をJamstack化
    Nuxt.jsへ統合
    

    View Slide

12. ジャムスタックチョットデキル !! ナカノ!!
    静的移行ファイルについて
    移行対象のファイルは、WordPressで管理されているページの
    他、大量のHTMLや画像・pdfなどのバイナリファイル群があった
    ため、段階的にスクレイピングを行った。
    ワードプレス由来になっている箇所を整えたのち、
    Nuxt.jsのpublicディレクトリへ格納した。
    12
    スクレイピング
    

    View Slide

13. ジャムスタックチョットデキル !! ナカノ!!
    Jamstack移行計画
    13
    過去のページを
    静的化
    CMS連携部分
    をJamstack化
    Nuxt.jsへ統合
    

    View Slide

14. ジャムスタックチョットデキル !! ナカノ!!
    フロントエンドのディレクトリ構成
    14
    ・TOPページ
    Nuxt.js
    ・最新のニュース・IR
    ・問い合わせ
    など
    src/pages ・過去のニュース・IR
    ・会社概要
    ・部署ごとの紹介
    など
    src/public
    ※PJの都合上src配下に配置
    

    View Slide

15. ジャムスタックチョットデキル !! ナカノ!!
    フロントエンドのディレクトリ構成
    15
    ・TOPページ
    Nuxt.js
    ・最新のニュース・IR
    ・問い合わせ
    など
    src/pages ・過去のニュース・IR
    ・会社概要
    ・部署ごとの紹介
    など
    src/public
    CMS部分は公開環境と
    プレビュー環境を用意する
    ※PJの都合上src配下に配置
    

    View Slide

16. ジャムスタックチョットデキル !! ナカノ!!
    CMS連携について
    公開環境はSG、プレビュー環境はSPAで描画する仕様。
    nuxt.config.ts内で環境変数をもとにふるまいを分ける。
    16
    nuxt.config.ts
    

    View Slide

17. ジャムスタックチョットデキル !! ナカノ!!
    環境ごとの記事データの扱い
    プレビュー環境(SPA)の場合
    - アセットファイル含め記事内のデータは、
    画面アクセス時にcontentfulからAPI経由で表示させる
    17
    

    View Slide

18. ジャムスタックチョットデキル !! ナカノ!!
    環境ごとの記事データの扱い
    公開環境(SG)の場合
    - 記事で使用する画像などのアセットファイルは、
    ビルド直前にcontentfulからダウンロードしてプロジェクトファイ
    ルに含める
    18
    

    View Slide

19. ジャムスタックチョットデキル !! ナカノ!!
    環境ごとの記事データの扱い
    公開環境(SG)の場合
    hooksを使って、ビルド
    直前に、記事データを　　　　　　　　　　　　　　　　　ダウンロードす
    る関数を　　　　　　　　　　　　　　　　実行してデプロイする。
    19
    nuxt.config.ts
    

    View Slide

20. ジャムスタックチョットデキル !! ナカノ!!
    開発エンジニアの役割分担
    実装を担当するエンジニアは役割を分担して、
    それぞれのタスクを担当していった。
    20
    

    View Slide

21. ジャムスタックチョットデキル !! ナカノ!!
    開発エンジニアの役割分担
    21
    下地作り・
    コア部分以外の
    実装
    ビルド周りや
    Nuxt.js自体の
    調査・対応
    CMS連携の
    コア部分の実装
    (ニュース・IR)
    

    View Slide

22. ジャムスタックチョットデキル !! ナカノ!!
    日々の進め方
    - タスクはすべてbacklogにてチケット管理
    - デイリースクラムを組み、朝会を毎日30分程度実施
    - 開発序盤からQAエンジニアも参加してもらい、
    各メンバーの進捗状況を確認していた
    22
    

    View Slide

23. ジャムスタックチョットデキル !! ナカノ!!
    2.技術面での課題と対応
    23
    

    View Slide

24. ジャムスタックチョットデキル !! ナカノ!!
    技術面での課題
    このPJ特有なものも含め、いくつかの課題があった。
    24
    

    View Slide

25. ジャムスタックチョットデキル !! ナカノ!!
    技術面での課題
    - ビルド時のリンクエラー
    - 不完全なページがデプロイされる
    - デプロイの長時間化
    25
    

    View Slide

26. ジャムスタックチョットデキル !! ナカノ!!
    技術面での課題
    - ビルド時のリンクエラー
    - 不完全なページがデプロイされる
    - デプロイの長時間化
    26
    

    View Slide

27. ジャムスタックチョットデキル !! ナカノ!!
    ビルド時のリンクエラー
    - ビルド時、生成したページのURLリスト内に、
    404エラーを出力するURLがいくつか表示されていた
    - URLを見る限り、publicディレクトリに格納されている
    静的HTMLと関連していた
    27
    

    View Slide

28. ジャムスタックチョットデキル !! ナカノ!!
    ビルド時のリンクエラー
    - ビルド時、生成したページのURLリスト内に、
    404エラーを出力するURLがいくつか表示されていた
    - URLを見る限り、publicディレクトリに格納されている
    静的HTMLと関連していた
    Nuxt.jsのページデータの取得方法や、ビルド時の挙動を把握す
    ることが必要になった。
    28
    

    View Slide

29. ジャムスタックチョットデキル !! ナカノ!!
    nitroを調べる
    nitroはNuxt.jsのサーバーエンジンを担うモジュール
    29
    https://nitro.unjs.io/
    

    View Slide

30. ジャムスタックチョットデキル !! ナカノ!!
    ビルド時のエラーまでの流れ
    1. yarn generateする
    2. nitroのprerenderがページ内のaタグを検知する
    3. リンクされている全てのページをNuxt.jsでビルドしようとする
    4. publicにある通常のHTMLファイルや、別バケットにあるペー
    ジもリンク先であれば対象になり、これらもNuxt.jsでビルドしよ
    うとする
    5. vueファイルではない・もしくはNuxt.jsの管理外ため、ページが
    存在しない判定となってしまう
    30
    

    View Slide

31. ジャムスタックチョットデキル !! ナカノ!!
    nitro側で行える、ビルド設定のひとつ。
    ビルド時に指定されたルートにフェッチし、静的ファイルとし
    て.output/publicディレクトリにコピーする。
    ignoreにリストされたルートは無視することができる。
    Default: { crawlLinks: false, ignore: [], routes: [], … }
    https://nitro.unjs.io/config#prerender
    nitro/prerender
    31
    

    View Slide

32. ジャムスタックチョットデキル !! ナカノ!!
    実装方針
    nuxt.config.tsにnitroプロパティを追加し、prerenderのignoreに
    弾きたいパスを登録することで回避できた。
    32
    nuxt.config.ts
    

    View Slide

33. ジャムスタックチョットデキル !! ナカノ!!
    技術面での課題
    - ビルド時のリンクエラー
    - 不完全なページがデプロイされる
    - デプロイの長時間化
    33
    

    View Slide

34. ジャムスタックチョットデキル !! ナカノ!!
    不完全なページがデプロイされる
    ビルドは成功し、デプロイ先でページは表示される。
    ただし動的なコンテンツが取得されていない、
    または部分的に表示される現象。
    34
    

    View Slide

35. ジャムスタックチョットデキル !! ナカノ!!
    不完全なページがデプロイされる
    調査の結果、CMS側に500エラーが発生したもののそのままビル
    ドされ、デプロイまで通っていたことが判明。
    35
    

    View Slide

36. ジャムスタックチョットデキル !! ナカノ!!
    不完全なページがデプロイされる
    調査の結果、CMS側に500エラーが発生したもののそのままビル
    ドされ、デプロイまで通っていたことが判明。
    → 500エラーの場合は、異常終了させる処理を加えることで対応
    36
    

    View Slide

37. ジャムスタックチョットデキル !! ナカノ!!
    カスタムエラーハンドラで対応する
    https://nitro.unjs.io/config#errorhandler
    37
    

    View Slide

38. ジャムスタックチョットデキル !! ナカノ!!
    カスタムエラーハンドラで対応する
    先述のnuxt.config.tsのnitroプロパティに、
    errorHandlerを追加し、割り当てたerror.tsの中で対応した
    38
    nuxt.config.ts
    

    View Slide

39. ジャムスタックチョットデキル !! ナカノ!!
    技術面での課題
    - ビルド時のリンクエラー
    - 不完全なページがデプロイされる
    - デプロイの長時間化
    39
    

    View Slide

40. ジャムスタックチョットデキル !! ナカノ!!
    デプロイ完了までの長時間化について
    CMS連携において、本番環境を再現したかったものの、
    クライアント様が環境を用意しており、セキュリティの観点からイン
    フラ設定を把握することが難しかった。
    40
    

    View Slide

41. ジャムスタックチョットデキル !! ナカノ!!
    デプロイ完了までの長時間化について
    CMS連携において、本番環境を再現したかったものの、
    クライアント様が環境を用意しており、セキュリティの観点からイン
    フラ設定を把握することが難しかった。
    インフラが関連する事象に関しては、ローカルで完全に再現する
    ことができなかったため、
    どうしてもデプロイして確かめる必要があった。
    41
    

    View Slide

42. ジャムスタックチョットデキル !! ナカノ!!
    デプロイ完了までの長時間化について
    ただ、過去のページや大量のバイナリ(画像やPDF)もすべてNuxt
    で抱えるため、デプロイが完了するまでに45〜50分程度かかって
    しまう。
    42
    

    View Slide

43. ジャムスタックチョットデキル !! ナカノ!!
    デプロイ完了までの長時間化について
    ただ、過去のページや大量のバイナリ(画像やPDF)もすべてNuxt
    で抱えるため、デプロイが完了するまでに45〜50分程度かかって
    しまう。
    → Nuxt.jsが関連する動作確認をしたい時だけ、シェルスクリプト
    で動作確認に必要のないファイル(PDFなど)を削ってからデプロ
    イする。
    43
    

    View Slide

44. ジャムスタックチョットデキル !! ナカノ!!
    デプロイ完了までの長時間化について
    ただ、過去のページや大量のバイナリ(画像やPDF)もすべてNuxt
    で抱えるため、デプロイが完了するまでに45〜50分程度かかって
    しまう。
    → Nuxt.jsが関連する動作確認をしたい時だけ、シェルスクリプト
    で動作確認に必要のないファイル(PDFなど)を削ってからデプロ
    イする。
    → 45〜50分から10分に短縮
    44
    

    View Slide

45. ジャムスタックチョットデキル !! ナカノ!!
    ここまでのまとめ
    ●ビルド時のエラーを回避する
    ビルドに含みたくないパスはignoreに登録する
    ●不完全なデプロイを防ぐ
    500エラーを検知したら異常終了させる
    ●デプロイの長時間化
    Nuxt.jsの動作だけを見たい場合は不要なバイナリを
    デプロイさせない
    45
    

    View Slide

46. ジャムスタックチョットデキル !! ナカノ!!
    3.プロジェクトを通して
    46
    

    View Slide

47. ジャムスタックチョットデキル !! ナカノ!!
    プロジェクトを通してのふりかえり
    - 難しかった点
    - 良かった点
    47
    

    View Slide

48. ジャムスタックチョットデキル !! ナカノ!!
    プロジェクトを通してのふりかえり
    - 難しかった点
    - 良かった点
    48
    

    View Slide

49. ジャムスタックチョットデキル !! ナカノ!!
    難しかった点
    インフラ面で本番環境との差があることで、
    エラー発生時に調査に時間がかかったり、手戻りがあった。
    49
    

    View Slide

50. ジャムスタックチョットデキル !! ナカノ!!
    難しかった点
    QAエンジニアが書いてくれたテストコードで下地はできていたも
    のの、開発期間の兼ね合いもあり、
    実装者側で書くE2Eテストコードの量が少なかった。
    50
    

    View Slide

51. ジャムスタックチョットデキル !! ナカノ!!
    難しかった点
    QAエンジニアが書いてくれたテストコードで下地はできていたも
    のの、開発期間の兼ね合いもあり、
    実装者側で書くE2Eテストコードの量が少なかった。
    ただし本番環境を再現しきれなかったので、書けたとしてもテスト
    の妥当性に疑問が残る…。
    51
    

    View Slide

52. ジャムスタックチョットデキル !! ナカノ!!
    難しかった点
    commitごとにCIを回してのデプロイフローを取ると、
    今度はデプロイ完了までの時間と、テスト完了までの時間を合わ
    せると1時間ほどかかることを考えると難しい。。
    52
    

    View Slide

53. ジャムスタックチョットデキル !! ナカノ!!
    プロジェクトを通してのふりかえり
    - 難しかった点
    - 良かった点
    53
    

    View Slide

54. ジャムスタックチョットデキル !! ナカノ!!
    良かった点
    エラー対応を通じて、ドキュメントに書かれていないような挙動を
    把握しながら実装することで、
    Nuxt.jsの理解を深めることが出来た。
    54
    

    View Slide

55. ジャムスタックチョットデキル !! ナカノ!!
    良かった点
    今まで経験したPJではなかったが、QAエンジニアが序盤からア
    サインされていたのも一つのポイントだった。
    主に静的移行したページの差分・リンク切れチェックや、
    CMS連携のテスト、その他細かいサポートをしてもらえたことで開
    発エンジニアの負担が減った。
    55
    

    View Slide

56. ジャムスタックチョットデキル !! ナカノ!!
    4.まとめ
    56
    

    View Slide

57. ジャムスタックチョットデキル !! ナカノ!!
    まとめ
    - ドキュメントを読むだけではわからない場合、フレームワーク
    内で使われているモジュールを理解しながら制作を行うことも
    時には必要
    - QAエンジニアが序盤から参加することで、PJそのものに対し
    てキャッチアップの時間を取ることができ、開発エンジニアとの
    コミュニケーションコストを減らすことができた
    57
    

    View Slide