はじめに
Front-End Opsというワードを知り、どうやら下記の記事で提唱されたワードのようなので、章ごとに要点をまとめ、Front-End Opsとはなにか、どのようなスキルが求められるのかを整理する
この記事を読んでわかったFront-End Opsに求められるスキルを先にざっとまとめる。（この記事を読んでまとめたものであるため、現時点での解釈だと足りないものもあるかもしれない）
Front-End Opsに求められるスキル
- アプリケーションを安全に運用できる
- アプリをどのように運用するのが効率的かを知っている
- CI/CDパイプラインが組める
- CDNやクラウドサービス（例：Netlify、Vercel、AWS S3）を使用して、アプリケーションをホスティングできる
- バージョニング
- アプリケーションを新しいバージョンにスムーズにアップデートできる
- 外部および内部の依存関係を最新に保つ運用方法を知り、実行できる
- パフォーマンスを最適化できる
- ビルド、コードスプリッティング
- キャッシュ戦略
- 画像最適化
- パフォーマンス監視
- ユーザーのインタラクションやパフォーマンスのメトリクスを監視し、問題が発生した際に迅速に対応できる
- メトリクス監視
- HTTPリクエスト
- 配信されるJS、CSS、画像
- ビジュアルパフォーマンス
以下、章ごとのまとめ
Front-End Ops
- フロントエンドのオペレーション周りの業務が増えており、注目を集めているが、フロントエンドエンジニアはそれに対して積極的ではなく、機能実装の方を優先している
- Frontend Opsは、フロントエンドのリソースを提供し、ホスティングする専門家。具体的には、アプリをどのように運用し、効率よくデプロイ・運用するかを設計する役割を担っており、ビルドツールの専門家。モジュールに関して強い意見を持っている。
- 要は、ビルドとデプロイメントを自動化する。WebpackやParcelなどのビルドツールを使用して、コードのトランスパイル、バンドル、最適化を行い、自動デプロイメントパイプラインを設定する。
- Frontend Opsは、アプリのバージョニング、キャッシング、デプロイのプロフェッショナルであることが求められる。外部のパフォーマンスを管理し、HTTPリクエストに厳しく対応し、ファイルサイズとロード時間を常に測定する。
- Frontend Opsは、アプリケーションの設計や意図を現実世界にデプロイし、運用するための架け橋となる。品質保証チームと密接に連携し、クライアントサイドのエラーを監視し、問題が発生した際にはアラートを出す。また、アプリケーションを新しいバージョンにスムーズにアップデートし、外部および内部の依存関係を最新に保つ。さらに、アプリケーションを安全に運用できるようにする役割も担っており、Frontend Opsはアプリの門番といえる。
- パフォーマンス最適化：コードスプリッティング、キャッシュ戦略、画像の最適化などを通じて、ウェブアプリケーションのパフォーマンスを向上させる。
- モニタリングとロギング：ユーザーのインタラクションやパフォーマンスのメトリクスを監視し、問題が発生した際に迅速に対応する。
- ホスティング：CDN（コンテンツデリバリーネットワーク）やクラウドサービス（例：Netlify、Vercel、AWS S3）を使用して、アプリケーションをホスティングする。
Why
- フロントエンドのオペレーションには十分な仕事量があり、フロントエンドエンジニアに機能実装とオペレーションの両方を任せるのはもはや効果的でない。最近のフロントエンドエンジニアは機能実装に手一杯であり、アプリケーションをエンドユーザーに届けることが疎かになりがちである。
- 週に1度でもオペレーション業務を行うことができれば、アプリケーションをユーザーに届けることができ、ユーザーも喜ぶだろう。どれだけ魅力的な機能があっても、それがユーザーに素早く、簡単に提供され、厳しく監視されなければ意味がない。
- フロントエンドのオペレーション・エンジニアは、アプリケーションの長期的な進歩を可能にする重要な存在といえる。
Builds and deployment
- Frontend Opsはビルドツールチェーンの専門家である
- ローカル環境でビルド、テストを実施できるようにする
- チームメンバーがアプリケーションを継続的インテグレーション環境にプッシュし、そこでテストできるようにする。（CI,CDを設定し、単一障害点を除けるようにする）
- 機能ブランチや将来のリリースブランチの社内デプロイを容易にし、品質保証チームが簡単にテストできるようにして、マネージャーが簡単にデモできるようにする。各コアユーザーに最適なアプリケーションの複数のバージョンを構築する手助けも行う。これは、モバイル用や古いバージョンのInternet Explorer用のビルドを意味するかもしれないが、これらの機能、ブラウザ、デバイスのテストは比較的透明であるべき。
- リリースを作成し、構築し、静的なエッジキャッシュ型コンテンツ配信ネットワークにアップロードし、ライブにするためのスイッチを入れるまでのプロセスを容易にする。また、迅速なロールバックメカニズムを文書化して備えている。
- 最近、多くの人がGruntを使用している。迅速なGruntビルドにより、これらのマシンは適切なテスト環境を提供するためにビルドされたバージョンのアプリケーションを提供できる。Gruntビルドは、RequireJSのr.jsビルドツールやBrowserifyプロセスを呼び出すことができ、ファイルを順番にミニ化して連結することもできる。また、CSSやプリプロセスされたCSSの方言に対しても同様の処理が可能である。さらに、画像を圧縮し、スプライトを構築し、リクエストを削減するための他の方法も使用する。
Tracking Speed
- フロントエンドのオペレーション・エンジニアが評価される指標はスピードである。アプリケーションのスピード、テストのスピード、ビルドとデプロイのスピード、そして他のチームメイトがオペレーション・プロセスを理解するスピードである。
- アプリケーションを複数のブラウザで実行し、スピードに関するメトリクスをすべて追跡することが重要だ。それをやるために、WebPageTestのインスタンスのプライベートクラウドを立ち上げることになる。本番サーバーや新しいコミット、プルリクエストなど、手に入るものすべてに対して実行するのだ。 どの時点でも、いつ、どこで、どのような状況で速度が低下したのかを知ることができる。 スピードの低下は、新しいサーバー、コードの差分、依存関係やサードパーティの障害など、何らかの変化と直接関連する
グラフ化するもの
- ロード時のHTTPリクエスト
- ロード時に配信されるJS,CSS,画像
- テスト、ビルド、デプロイの平均実行時間
- 外部との依存関係をサイズとスピードでグラフ化
mod_pagespeed, nginx_pagespeedのようなツールを導入しミスをキャッチする
計測
- アプリのフレームグラフ
- ヒープスナップショット
- メモリプロファイル
- アプリ全体のビジュアルパフォーマンス
→要は、計測をしてやれる高速化を徹底して実施するということ
Monitoring Error And Logs
- ログを管理することが大事（Frontend Opsの仕事）
- 分析ツールと統合する
- 深刻度を設定して閾値を超えたらエンジニアに通知する
- アプリの穴を見つける（セキュリティに詳しくある必要がある）
Keeping Things Fresh And Stable
- 依存を最新に保つ
- node.jsも最新に保つ
The Future
- 私は新しい概念を導入しているのではなく、私たちが長年行ってきた作業をまとめ、それに名前をつけているのだ。そうすることで、将来、より良いツールを作り、より良いプロセスを文書化するのに役立つと思う。
- この役割がチームに加わったからといって、他のメンバーのパフォーマンス責任が免除されるわけではない。ただ、今現在、フロントエンドのオペレーションは、私が遭遇したほとんどのチームにおいて、誰にとっても明確な優先事項ではなく、そのために、クランチ・タイムにはしばしばスキップされてしまう。特にこれらのツールの設定やモニタリングは、フロントエンド・エンジニアの通常の仕事とは別に、この役割を正当化するのに十分なものがあると思う。
- 最も重要なことは、これらの作業から新しい仕事が生まれるか、あるいは別の方法で問題を解決するかにかかわらず、私たちは皆、何らかの方法でこれらの問題を解決することの重要性を意識する必要があるということだ。これらの問題を無視して、信頼性が高く、堅牢で、エクスペリエンスの高いアプリケーションを実現することはできない。これらの問題に対処することは、アプリケーションの安定性と長寿命化、そしてプログラマーとユーザーの幸せにとって非常に重要です。
- このことを念頭に置いて構築すれば、ウェブの勝利につながり、私たちは皆、ウェブの勝利を望んでいるのです。