名刺アプリ「Eight」におけるFrontend Ops

■イベント
GENBA #2 〜Front-End Opsの現場〜
https://timeedev.connpass.com/event/308783/

■発表者
技術本部 Eight Engineering Unit
⿃⼭ らいか

■名刺アプリ「Eight」 採用情報
https://media.sansan-engineering.com/eight-engineer

Transcript

1. 名刺アプリ「Eight」における Frontend Ops Sansan株式会社 部署 名前 Sansan技術本部 GENBA #2 技術本部 Eight Engineering Unit ⿃⼭ らいか
2. 写真が入ります 2019年 Sansanに新卒⼊社。 名刺アプリ「Eight」の開発組織に所属し、複数のサービスを横 断して主にWebフロントエンド開発の⽀援を⾏う。 加えて、技術負債の解消・ビルド周りの改善・デザインシステム 構築など開発者体験（DX）の向上に取り組む。 ⿃⼭ らいか Sansan株式会社 技術本部 Eight Engineering Unit @pvcresin
3. 1. Frontend Opsとは 2. Eightの紹介 3. EightにおけるFrontend Ops 4. まとめ アジェンダ
4. Frontend Opsとは
5. https://www.smashingmagazine.com/2013/06/front-end-ops/ フロントエンドに関連する運⽤の仕事を紹介する記事 - フロントエンドでビルドやデプロイなど、DevOps関連のタスクが増えていた - 仕事を紹介することでこの分野を盛り上げていきたい！ - 「an expert at serving and hosting」と⾔及されている “The Front-End Operations Engineer”
6. 2005 Google Map 2006 jQuery 2008 Google Chrome, V8 Engine 2009 Node.js, CoffeeScript 2012 Grunt 2013 Gulp 2014 Babel, webpack それまでのフロントエンドに関するリリース
7. 記事内で⾔及されていたトピック - ビルド - CI/CD - エラー監視 - パフォーマンス監視 - 静的アセット - キャッシュ - 依存関係のアップデート
8. - Frontend + DevOps - 各種ツールチェインを⽤いて⾃動化や⾼速化を⾏うこと - 特にCI/CDやビルド周り、パフォーマンスに関⼼を持つ Frontend Opsとは
9. Eightの紹介
10. 名刺アプリ「Eight」 - タッチで素早く名刺交換 - 紙の名刺もデータ化して管理 - 企業向けサービスも多数
11. 主な技術スタック - React - TypeScript フロントエンド - Ruby - Ruby on Rails バックエンド - AWS（CodeBuild, S3, CloudFront, …） - Circle CI / GitHub Actions - Datadog インフラ / ツール
12. - サービスごとにSPA - ビルドしたファイルをS3にデプロイし、 CloudFrontから配信 - 複数の社内向けのパッケージが存在 - 共通コンポーネント、通信系など 社内向けパ ッケージ Eightのフロントエンド CloudFront (CDN) S3 (Storage) SPA SPA 社内向けパ ッケージ 社内向けパ ッケージ
13. EightにおけるFrontend Ops
14. ビルド ⽅針 - Viteに寄せる（⼀部webpack） - ビルド時に最適化できるところはやる - JSファイルは適切にChunk分割する - スタイルではCSS Modulesなどゼロランタイムを意識 - あまり設定をカスタマイズしない - ビルド速度には⼒を⼊れる - BabelからSWCに移⾏して⾼速化＆省メモリ化
15. - Local: ファイル保存時、Gitフック（Lefthook） - フォーマット、Lint - CI - フォーマット、Lint、型チェック、テスト、ビルド - 時間がかかるテストやビルドを最初から⾛らせてしまう - 差分に関係ないJobは実⾏しない - CD - CodeBuildやスクリプト（主にS3アップロード） CI/CD
16. - CDN（CloudFront） - ブラウザ - 静的アセット（ハッシュ付きファイル名） - 状態管理（Redux、Apollo Client） - CI/CD - ダウンロードしたnpm package - フォーマット・Lint・型チェック・ビルドの結果 キャッシュ
17. アプリケーション監視 DatadogのLogs・Real User Monitoring（RUM） - エラー監視 - アラートは即時対応 - 週次でエラーログをチェック - 関係ないエラーの場合は除外するようにフィルタを調整 - パフォーマンス監視 - RUMでCore Web Vitalsを計測
18. - 依存ライブラリ - 週次でRenovateが上げるPRをチェック - ⾃動マージも併⽤して負荷を軽減 - 脆弱性のあるライブラリは重⼤なものを除いて、3ヶ⽉ごとに対応 - アップデートが期待できないのであれば移⾏ - その他 - Node.jsのバージョンアップ アップデート業
19. シンプルに保つ - 効果が⼤きいもののみ導⼊ マイナスをゼロにする開発に⼒を⼊れる - メンテナンス負荷が減り、開発の可能性が広がる スムーズな移⾏ - アプリケーションコードにあまり影響させない ⼼がけていること
20. まとめ
21. - Frontend Opsとは各種ツールチェインを⽤いて⾃動化や⾼速化を⾏うこと - フロントエンドの責務が増えてきた頃に提唱された概念 - Eightでは⾃動化や⾼速化、メンテナンスなど様々な活動を⾏っている まとめ