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

by Shumpei O.

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

ジャムスタックチョットデキル !! ナカノ!! Shumpei X: @seventhseven - ちょっと株式会社受託事業部  - フロントエンドエンジニア - 妻と4歳の息子と暮らしています。 - 趣味で漫画のファンサイトを運営しています。 2

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

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