こんにちは, アルバイト のciffeliaです.
pixivは, 2022 năm にNext.jsによるフロントエンド の リプレイスを bắt đầu しました. 2023 năm hiện tại では, 10 người trở lên の khai phát giả がNext.jsによるフロントエンド khai phát に tham gia しています.
こ の ký sự では, Next.jsプロジェクトにおけるプルリクエスト*1の động tác xác nhận を hiệu suất hóa する, PRプレビュー hoàn cảnh tự động cấu trúc の sĩ tổ みについてご giới thiệu します.
Gì をした の か
プルリクエストを tác thành すると, đối tượng ブランチ の động tác xác nhận をするため の URLが tự động で phát hành される sĩ tổ みを làm りました.
Xích 枠で囲まれたボタンをクリックすると, đối tượng PR の プレビュー hoàn cảnh にアクセスするため の Cookieがブラウザに ký ức されます. こ の trạng thái で động tác xác nhận したいページを khai くことで, PRにおける変 càng を thật tế に kiểm chứng することができます.
Bối cảnh
pixivは2022 năm にNext.js の dẫn vào を bắt đầu しました. 2023 năm 7 nguyệt hiện tại では ước 50 の ページ*2がNext.jsで thật trang されています.
フロントエンド の khai phát においては, レビュアーやデザイナーがブラウザ thượng で động tác xác nhận を hành う trường hợp が nhiều 々あります. これまでNext.jsプロジェクトにおける khai phát では, thứ の tay thuận でレビューを hành っていました.
- Khai phát giả: PRを tác thành
- Khai phát giả: Xài chung khai phát サーバーにSSHでログインし, thích hợp なポートでNext.jsを khởi động
- Khai phát giả: PR の thuyết minh lan にポート phiên hiệu を nhớ nhập
- レビュアー: コードをレビュー
- ( tất yếu に ứng じて ) レビュアー・デザイナー chờ: ポート phiên hiệu を chỉ định して khai phát サーバーにアクセスし, động tác を xác nhận
こ の trung で khai phát giả は xài chung khai phát サーバーでNext.jsを khởi động する tất yếu がありますが, こ の tay thuận は単に tay gian がかかるだけでなく, thứ の ような vấn đề điểm がありました.
- Khai phát サーバー の tái khởi động によりNext.jsが đình chỉ してしまう.
- Next.jsを khởi động していることを quên れてしまい, ゾンビプロセスになって khai phát サーバー の リソースを tiêu phí する.
- Số nhiều の レビュー y lại を song hành して hành う tế には, khai phát サーバー thượng でリポジトリ の クローンを số nhiều dụng ý する tất yếu がある.
こ の vấn đề を giải quyết する sách として, VercelやNetlify の ようにプルリクエストからプレビュー hoàn cảnh を tự động に khởi động する sĩ tổ みを khai phát することにしました*3.
Next.jsを tự động で khởi động する sĩ tổ み
Thứ の ように, số nhiều の đoạn giai に phân けて kiểm chứng hoàn cảnh が cấu trúc ・ phá bỏ される sĩ tổ みになっています.
- プルリクエストが tác thành されると, CIでコンテナイメージがビルドされる.
- Kiểm chứng hoàn cảnh にアクセスがあると, イメージからコンテナが tác thành される.
- 5 phân trình độ アクセスがないコンテナは tự động で đình chỉ される.
- Cổ いコンテナイメージは nhất định trong lúc sau に trừ bỏ される.
Kiểm chứng hoàn cảnh サーバー の リソースを tiết kiệm するため, コンテナはアクセスを chịu けたタイミングで khởi động する sĩ tổ みになっています. こ の アイデアはサーバーレスアーキテクチャから suy nghĩ を đến ています. Sơ hồi アクセス khi の コンテナ の khởi động に muốn する thời gian が khí がかりでしたが, đồng thời に tiến めていたイメージサイズ cắt giảm の hiệu quả もあり, 10 giây trình độ で khởi động するようにできました.
また, コンテナ の khởi động と đình chỉ やリクエスト の ルーティングは đã tồn の ソフトウェア の tổ み hợp わせで thật hiện する の が khó khăn だったため, chuyên dùng の アプリケーションを khai phát して thật hiện しました. TypeScript + Node.jsで thật trang しています.
PR tác thành からリンク tỏ vẻ まで の lưu れ
Kiểm chứng hoàn cảnh へ の アクセス の lưu れ
おわりに
プレビュー hoàn cảnh の tự động cấu trúc により, nhiều く の khai phát giả の コードレビュー y lại における gánh nặng を khinh giảm することができました. フロントエンド khai phát における khai phát giả thể nghiệm hướng về phía trước の thí dụ として tham khảo になれば hạnh いです!
*1:GitLabではMerge Requestと hô びますが, こ の ký sự ではプルリクエストまたはPRと thư くことにします.
*2:Next.js の route の số ( ページコンポーネント の số ) です.
*3:バックエンドと の tiếp 続など の vấn đề があり, Vercelを dẫn vào することは khó khăn でした.
