Lock in $30 Savings on PRO—Offer Ends Soon! ⏳
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
複数人での 大規模サイト移植のテクニック
Search
Shumpei O.
September 09, 2023
Programming
1
710
複数人での 大規模サイト移植のテクニック
2023.9.9のジャムスタックチョットデキル!!ナカノ!!で登壇した内容です。
実際の案件を例に取り、どのような対応を行ったかお話しました。
Shumpei O.
September 09, 2023
Tweet
Share
More Decks by Shumpei O.
See All by Shumpei O.
個人開発者は Jamstackでブログを書こう!〜WordPressもいいけどJamstackもね〜
shumpei0111
0
73
Other Decks in Programming
See All in Programming
我々のデザインシステムは Chakra v3 にアップデートします
shunya078
2
2.4k
Discord Bot with AI -for English learners-
xin9le
0
110
Arm移行タイムアタック
qnighy
0
390
[Do iOS '24] Ship your app on a Friday...and enjoy your weekend!
polpielladev
0
220
Missing parts when designing and implementing Android UI
ericksli
0
380
watsonx.ai Dojo #4 生成AIを使ったアプリ開発、応用編
oniak3ibm
PRO
1
270
イマのCSSでできる インタラクション最前線 + CSS最新情報
clockmaker
5
3.8k
DevTools extensions で 独自の DevTool を開発する | FlutterKaigi 2024
kokiyoshida
0
320
Cognitoが大型アップデート!Managed Loginとパスワードレスログインを実際に使ってみた@しむそくRadio Special Day1
tmhirai
2
160
.NET Conf 2024の振り返り
tomokusaba
0
180
romajip: 日本の住所CSVデータを活用した英語住所変換ライブラリを作った話
sangunkang
0
2.3k
[FlutterKaigi2024] Effective Form 〜Flutterによる複雑なフォーム開発の実践〜
chocoyama
0
3.9k
Featured
See All Featured
Bash Introduction
62gerente
608
210k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
229
52k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
26
1.4k
How to train your dragon (web standard)
notwaldorf
88
5.7k
Building a Scalable Design System with Sketch
lauravandoore
459
33k
Ruby is Unlike a Banana
tanoku
97
11k
Fashionably flexible responsive web design (full day workshop)
malarkey
405
65k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
27
2.1k
Product Roadmaps are Hard
iamctodd
PRO
49
11k
Adopting Sorbet at Scale
ufuk
73
9.1k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
59k
Designing for humans not robots
tammielis
250
25k
Transcript
ジャムスタックチョットデキル !! ナカノ!! 2023.09.09 ジャムスタックチョットデキル!! ナカノ!! Shumpei (chot Inc.) 複数人での
大規模サイト移植のテクニック
ジャムスタックチョットデキル !! ナカノ!! Shumpei X: @seventhseven - ちょっと株式会社 受託事業部 -
フロントエンドエンジニア - 妻と4歳の息子と暮らしています。 - 趣味で漫画のファンサイトを運営しています。 2
ジャムスタックチョットデキル !! ナカノ!! 今日話すこと 1. プロジェクトの概要 2. 技術面での課題と対応 3. プロジェクトを通して
4. まとめ 3
ジャムスタックチョットデキル !! ナカノ!! 1.プロジェクトの概要 4
ジャムスタックチョットデキル !! ナカノ!! 今回のプロジェクトの目的 WordPressで長らく(10年)運用されてきたコーポレート サイトをJamstack化するプロジェクト。 - 移行対象ページ700ページ超 - 日・英・中の3カ国語のページが存在する
- 開発期間は約2ヶ月弱 静的サイトへ移行することで、セキュアな構成にする。 5
ジャムスタックチョットデキル !! ナカノ!! •Jamstack構成でビルドした成果物をS3へデプロイする 今回使用した主な技術スタック 6 bucket-a bucket-b ••• S3
AWS Nuxt.js
ジャムスタックチョットデキル !! ナカノ!! •Jamstack構成でビルドした成果物をS3へデプロイする 今回使用した主な技術スタック 7 bucket-a bucket-b ••• S3
AWS Nuxt.js コンテンツによっては Nuxt.jsとは別ルートで 特定のバケットにデプロイする
ジャムスタックチョットデキル !! ナカノ!! Jamstack移行計画 8 過去のページを 静的化
ジャムスタックチョットデキル !! ナカノ!! Jamstack移行計画 9 過去のページを 静的化 CMS連携部分 をJamstack化
ジャムスタックチョットデキル !! ナカノ!! Jamstack移行計画 10 過去のページを 静的化 CMS連携部分 をJamstack化 Nuxt.jsへ統合
ジャムスタックチョットデキル !! ナカノ!! Jamstack移行計画 11 過去のページを 静的化 CMS連携部分 をJamstack化 Nuxt.jsへ統合
ジャムスタックチョットデキル !! ナカノ!! 静的移行ファイルについて 移行対象のファイルは、WordPressで管理されているページの 他、大量のHTMLや画像・pdfなどのバイナリファイル群があった ため、段階的にスクレイピングを行った。 ワードプレス由来になっている箇所を整えたのち、 Nuxt.jsのpublicディレクトリへ格納した。 12
スクレイピング
ジャムスタックチョットデキル !! ナカノ!! Jamstack移行計画 13 過去のページを 静的化 CMS連携部分 をJamstack化 Nuxt.jsへ統合
ジャムスタックチョットデキル !! ナカノ!! フロントエンドのディレクトリ構成 14 ・TOPページ Nuxt.js ・最新のニュース・IR ・問い合わせ など
src/pages ・過去のニュース・IR ・会社概要 ・部署ごとの紹介 など src/public ※PJの都合上src配下に配置
ジャムスタックチョットデキル !! ナカノ!! フロントエンドのディレクトリ構成 15 ・TOPページ Nuxt.js ・最新のニュース・IR ・問い合わせ など
src/pages ・過去のニュース・IR ・会社概要 ・部署ごとの紹介 など src/public CMS部分は公開環境と プレビュー環境を用意する ※PJの都合上src配下に配置
ジャムスタックチョットデキル !! ナカノ!! CMS連携について 公開環境はSG、プレビュー環境はSPAで描画する仕様。 nuxt.config.ts内で環境変数をもとにふるまいを分ける。 16 nuxt.config.ts
ジャムスタックチョットデキル !! ナカノ!! 環境ごとの記事データの扱い プレビュー環境(SPA)の場合 - アセットファイル含め記事内のデータは、 画面アクセス時にcontentfulからAPI経由で表示させる 17
ジャムスタックチョットデキル !! ナカノ!! 環境ごとの記事データの扱い 公開環境(SG)の場合 - 記事で使用する画像などのアセットファイルは、 ビルド直前にcontentfulからダウンロードしてプロジェクトファイ ルに含める 18
ジャムスタックチョットデキル !! ナカノ!! 環境ごとの記事データの扱い 公開環境(SG)の場合 hooksを使って、ビルド 直前に、記事データを ダウンロードす る関数を 実行してデプロイする。 19 nuxt.config.ts
ジャムスタックチョットデキル !! ナカノ!! 開発エンジニアの役割分担 実装を担当するエンジニアは役割を分担して、 それぞれのタスクを担当していった。 20
ジャムスタックチョットデキル !! ナカノ!! 開発エンジニアの役割分担 21 下地作り・ コア部分以外の 実装 ビルド周りや Nuxt.js自体の
調査・対応 CMS連携の コア部分の実装 (ニュース・IR)
ジャムスタックチョットデキル !! ナカノ!! 日々の進め方 - タスクはすべてbacklogにてチケット管理 - デイリースクラムを組み、朝会を毎日30分程度実施 - 開発序盤からQAエンジニアも参加してもらい、
各メンバーの進捗状況を確認していた 22
ジャムスタックチョットデキル !! ナカノ!! 2.技術面での課題と対応 23
ジャムスタックチョットデキル !! ナカノ!! 技術面での課題 このPJ特有なものも含め、いくつかの課題があった。 24
ジャムスタックチョットデキル !! ナカノ!! 技術面での課題 - ビルド時のリンクエラー - 不完全なページがデプロイされる - デプロイの長時間化
25
ジャムスタックチョットデキル !! ナカノ!! 技術面での課題 - ビルド時のリンクエラー - 不完全なページがデプロイされる - デプロイの長時間化
26
ジャムスタックチョットデキル !! ナカノ!! ビルド時のリンクエラー - ビルド時、生成したページのURLリスト内に、 404エラーを出力するURLがいくつか表示されていた - URLを見る限り、publicディレクトリに格納されている 静的HTMLと関連していた
27
ジャムスタックチョットデキル !! ナカノ!! ビルド時のリンクエラー - ビルド時、生成したページのURLリスト内に、 404エラーを出力するURLがいくつか表示されていた - URLを見る限り、publicディレクトリに格納されている 静的HTMLと関連していた
Nuxt.jsのページデータの取得方法や、ビルド時の挙動を把握す ることが必要になった。 28
ジャムスタックチョットデキル !! ナカノ!! nitroを調べる nitroはNuxt.jsのサーバーエンジンを担うモジュール 29 https://nitro.unjs.io/
ジャムスタックチョットデキル !! ナカノ!! ビルド時のエラーまでの流れ 1. yarn generateする 2. nitroのprerenderがページ内のaタグを検知する 3.
リンクされている全てのページをNuxt.jsでビルドしようとする 4. publicにある通常のHTMLファイルや、別バケットにあるペー ジもリンク先であれば対象になり、これらもNuxt.jsでビルドしよ うとする 5. vueファイルではない・もしくはNuxt.jsの管理外ため、ページが 存在しない判定となってしまう 30
ジャムスタックチョットデキル !! ナカノ!! nitro側で行える、ビルド設定のひとつ。 ビルド時に指定されたルートにフェッチし、静的ファイルとし て.output/publicディレクトリにコピーする。 ignoreにリストされたルートは無視することができる。 Default: { crawlLinks:
false, ignore: [], routes: [], … } https://nitro.unjs.io/config#prerender nitro/prerender 31
ジャムスタックチョットデキル !! ナカノ!! 実装方針 nuxt.config.tsにnitroプロパティを追加し、prerenderのignoreに 弾きたいパスを登録することで回避できた。 32 nuxt.config.ts
ジャムスタックチョットデキル !! ナカノ!! 技術面での課題 - ビルド時のリンクエラー - 不完全なページがデプロイされる - デプロイの長時間化
33
ジャムスタックチョットデキル !! ナカノ!! 不完全なページがデプロイされる ビルドは成功し、デプロイ先でページは表示される。 ただし動的なコンテンツが取得されていない、 または部分的に表示される現象。 34
ジャムスタックチョットデキル !! ナカノ!! 不完全なページがデプロイされる 調査の結果、CMS側に500エラーが発生したもののそのままビル ドされ、デプロイまで通っていたことが判明。 35
ジャムスタックチョットデキル !! ナカノ!! 不完全なページがデプロイされる 調査の結果、CMS側に500エラーが発生したもののそのままビル ドされ、デプロイまで通っていたことが判明。 → 500エラーの場合は、異常終了させる処理を加えることで対応 36
ジャムスタックチョットデキル !! ナカノ!! カスタムエラーハンドラで対応する https://nitro.unjs.io/config#errorhandler 37
ジャムスタックチョットデキル !! ナカノ!! カスタムエラーハンドラで対応する 先述のnuxt.config.tsのnitroプロパティに、 errorHandlerを追加し、割り当てたerror.tsの中で対応した 38 nuxt.config.ts
ジャムスタックチョットデキル !! ナカノ!! 技術面での課題 - ビルド時のリンクエラー - 不完全なページがデプロイされる - デプロイの長時間化
39
ジャムスタックチョットデキル !! ナカノ!! デプロイ完了までの長時間化について CMS連携において、本番環境を再現したかったものの、 クライアント様が環境を用意しており、セキュリティの観点からイン フラ設定を把握することが難しかった。 40
ジャムスタックチョットデキル !! ナカノ!! デプロイ完了までの長時間化について CMS連携において、本番環境を再現したかったものの、 クライアント様が環境を用意しており、セキュリティの観点からイン フラ設定を把握することが難しかった。 インフラが関連する事象に関しては、ローカルで完全に再現する ことができなかったため、 どうしてもデプロイして確かめる必要があった。
41
ジャムスタックチョットデキル !! ナカノ!! デプロイ完了までの長時間化について ただ、過去のページや大量のバイナリ(画像やPDF)もすべてNuxt で抱えるため、デプロイが完了するまでに45〜50分程度かかって しまう。 42
ジャムスタックチョットデキル !! ナカノ!! デプロイ完了までの長時間化について ただ、過去のページや大量のバイナリ(画像やPDF)もすべてNuxt で抱えるため、デプロイが完了するまでに45〜50分程度かかって しまう。 → Nuxt.jsが関連する動作確認をしたい時だけ、シェルスクリプト で動作確認に必要のないファイル(PDFなど)を削ってからデプロ
イする。 43
ジャムスタックチョットデキル !! ナカノ!! デプロイ完了までの長時間化について ただ、過去のページや大量のバイナリ(画像やPDF)もすべてNuxt で抱えるため、デプロイが完了するまでに45〜50分程度かかって しまう。 → Nuxt.jsが関連する動作確認をしたい時だけ、シェルスクリプト で動作確認に必要のないファイル(PDFなど)を削ってからデプロ
イする。 → 45〜50分から10分に短縮 44
ジャムスタックチョットデキル !! ナカノ!! ここまでのまとめ •ビルド時のエラーを回避する ビルドに含みたくないパスはignoreに登録する •不完全なデプロイを防ぐ 500エラーを検知したら異常終了させる •デプロイの長時間化 Nuxt.jsの動作だけを見たい場合は不要なバイナリを
デプロイさせない 45
ジャムスタックチョットデキル !! ナカノ!! 3.プロジェクトを通して 46
ジャムスタックチョットデキル !! ナカノ!! プロジェクトを通してのふりかえり - 難しかった点 - 良かった点 47
ジャムスタックチョットデキル !! ナカノ!! プロジェクトを通してのふりかえり - 難しかった点 - 良かった点 48
ジャムスタックチョットデキル !! ナカノ!! 難しかった点 インフラ面で本番環境との差があることで、 エラー発生時に調査に時間がかかったり、手戻りがあった。 49
ジャムスタックチョットデキル !! ナカノ!! 難しかった点 QAエンジニアが書いてくれたテストコードで下地はできていたも のの、開発期間の兼ね合いもあり、 実装者側で書くE2Eテストコードの量が少なかった。 50
ジャムスタックチョットデキル !! ナカノ!! 難しかった点 QAエンジニアが書いてくれたテストコードで下地はできていたも のの、開発期間の兼ね合いもあり、 実装者側で書くE2Eテストコードの量が少なかった。 ただし本番環境を再現しきれなかったので、書けたとしてもテスト の妥当性に疑問が残る…。 51
ジャムスタックチョットデキル !! ナカノ!! 難しかった点 commitごとにCIを回してのデプロイフローを取ると、 今度はデプロイ完了までの時間と、テスト完了までの時間を合わ せると1時間ほどかかることを考えると難しい。。 52
ジャムスタックチョットデキル !! ナカノ!! プロジェクトを通してのふりかえり - 難しかった点 - 良かった点 53
ジャムスタックチョットデキル !! ナカノ!! 良かった点 エラー対応を通じて、ドキュメントに書かれていないような挙動を 把握しながら実装することで、 Nuxt.jsの理解を深めることが出来た。 54
ジャムスタックチョットデキル !! ナカノ!! 良かった点 今まで経験したPJではなかったが、QAエンジニアが序盤からア サインされていたのも一つのポイントだった。 主に静的移行したページの差分・リンク切れチェックや、 CMS連携のテスト、その他細かいサポートをしてもらえたことで開 発エンジニアの負担が減った。 55
ジャムスタックチョットデキル !! ナカノ!! 4.まとめ 56
ジャムスタックチョットデキル !! ナカノ!! まとめ - ドキュメントを読むだけではわからない場合、フレームワーク 内で使われているモジュールを理解しながら制作を行うことも 時には必要 - QAエンジニアが序盤から参加することで、PJそのものに対し
てキャッチアップの時間を取ることができ、開発エンジニアとの コミュニケーションコストを減らすことができた 57