React職人として走った3年
Web制作会社からスタートアップに転じて、私はフロントエンドエンジニアとしてReact/TypeScriptと3年向き合ってきました。複雑な状態管理、アクセシビリティ、Core Web Vitalsの改善など、UIまわりの仕事には自信を持っていました。
それでも、自分の作ったSPAが「どうやってユーザーに届いているか」は、ずっとブラックボックスでした。Vercelにデプロイすれば動く。落ちたらSlackに通知が来るが、なぜ落ちたかわからない。CDNとは何か、Edgeとは何か、SSL証明書はどうやって更新されているのか、いずれも雰囲気で理解していました。
デプロイ事故が「仕組みから理解したい」に変えた
転機は、本番サイトが30分ダウンした夜でした。原因は私のPRが踏んだnext.config.jsのリダイレクト設定で、CDNキャッシュが古いままユーザーに配信され、認証フローが壊れていました。
復旧作業中、SREチームがcurl -IでCache-Controlを確認し、digでDNS伝搬を見て、Cloudflareのダッシュボードでパージし、Datadogでp95レイテンシを追っていく姿を見て、私は完全に置いていかれました。「自分が作ったものを、自分でデバッグできない」という事実が、想像以上にショックでした。
その夜から、私は「アプリが動く基盤」を理解する側に回ろうと決めました。
ゼロからやり直したインフラ学習
最初に取り組んだのは、Linuxの基礎です。lsやcdは使えても、grep -rのオプション、awk、sed、リダイレクト、パイプの本当の意味は怪しかったので、『新しいLinuxの教科書』を頭から手を動かしながら読みました。シェル変数、プロセス、シグナル、パーミッションといった「OSの基礎概念」が、ようやく身体に入った感覚がありました。
次に、HTTPの理解を深めるために『Real World HTTP』を読みました。フロントで毎日fetchを書いていたのに、Cache-Control、Cookieのスコープ、CORS、HTTP/2のストリーム多重化など、自分が雰囲気で扱っていたものを言語化できるようになりました。あのデプロイ事故の原因を、後から完全に説明できるようになったのもこの本のおかげです。
ネットワークの低層は『マスタリングTCP/IP 入門編』で押さえました。3-way handshake、TCPの再送、ルーティング、サブネット計算など、フロントには直接出てこない世界ですが、SREの会話に入っていくためには必須の語彙でした。
クラウドとコンテナの実機学習
AWSは『AWS基礎からのネットワーク&サーバー構築』を写経しました。VPC、サブネット、ルートテーブル、セキュリティグループを手で作り、EC2を立ててNginxを動かす。たったこれだけのことが、SPAをVercelにデプロイしていた頃の私には別世界でした。
並行して『Docker/Kubernetes 実践コンテナ開発入門』でコンテナの基礎を固めました。自分のNext.jsアプリをDockerfileに包み、minikubeにデプロイしてみたとき、フロント・サーバ・インフラが一本の線でつながった瞬間がありました。
CI/CDは『GitHub CI/CDパイプライン構築ガイド』を軸に、自分のサイドプロジェクトでLint/Test/Deployのフルパイプラインを組みました。プルリクのたびにプレビュー環境が立ち上がる仕組みは、単に便利というだけでなく「ソフトウェア配信の哲学」だと体感できました。
転職と現場での実践
入社1年で社内のSREチームに異動申請を出し、認められました。最初の仕事は、自分が壊した本番リダイレクト設定の恒久対策で、Cloudflare Workersのルーティングをコード管理にし、PRレビュー必須にする変更でした。
いま私は、フロントの開発者体験(DX)を改善する役割を兼ねています。フロントエンドエンジニアの気持ちがわかるSREは、社内で意外な希少種でした。デプロイのフィードバックループを短くする、エラー監視のSourceMapを正しく登録する、SLOをユーザー体験ベースで定義する——これらの仕事は、UIを作っていた経験そのものが武器になります。
フロントから基盤に行きたい人へ
UIが好きな人ほど、「裏側はインフラの人の仕事」と切り分けがちです。でも、UIのパフォーマンスもエラー率も、最終的には基盤と地続きです。curlを1本叩けるだけで、世界の解像度は驚くほど変わります。
私の場合は、Linux→HTTP→AWS→コンテナ→CI/CDの順で穴を埋めていきました。順番は人それぞれでよいと思いますが、「自分のアプリの最も近い層から順に、外側へ」という原則だけは、おすすめできます。
