よる快適なデバッグ入門hisashi-oikawa2024.10.25実践と知見TweetWebアプリケーション開発において、デバッグはなくてはならない重要なプロセスです。デバッグにより不具合を検知し、問題を分析し、修正することでプロダクトの完成度や安全性を高めていきます。WebアプリケーションはAPIとフロントエンドの連携で構成される事が多く、分析のために調査をする範囲が広いです。フロントエンド起因の不具合であったり、API(バックエンド)で発生している場合もあったり、APIから返される特定のデータでのみフロントエンド側で発現する複合的なエラーであったりと、調査は一筋縄ではいきません。手掛けるスタートアップ支援においてもデバッグはとても大切です。Webアプリケーションは成長するごとにロジックが複雑化・肥大化し、デバッグの難易度、かかるコストが上がっていくなかで、より効率的・効果的にデバッグする手法を常に模索しています。この記事では、デバッグでの初手である「現象の再現」をするのに役立つローカルプロキシについて紹介していきます。デバッグの想定ケースデバッグを具体的にイメージしてもらうために、想定するケースを例示しておきます。商品詳細ページにおいて、描画されるべき情報が正しく描画されていないローカル環境(APIはモックサーバー使用)では問題ないが、リモートのBeta環境で不具合が発生している特定のデータでのみエラーが発生する(特定の商品でのみ発生する)エラー発生の詳細な条件はまだ不明まず不具合発生の条件を探るために、再現する環境を用意しなければなりません。ローカルではモックサーバーのデータで動作確認をしているため、モックサーバーに「特定のデータ」を返却させれば再現できるはずですが、例えばOpenAPIなどを使用している場合、定義のyamlをいちいち編集するのは面倒です。そんな場面で役立つのがローカルプロキシと呼ばれるツールです。ローカルプロキシについてまずはプロキシサーバーについて簡単に紹介します。プロキシサーバーは、Webサーバーとクライアント端末の間に位置する中継サーバーです。Webサーバーへのリクエスト・Webサーバーからのレスポンスはプロキシサーバーの中を経由します。プロキシサーバーはデータをキャッシュしてパフォーマンスを向上させたり、セキュリティを強化したりする役割をもっています。ローカルプロキシはその名の通り、ローカル環境で動かすことのできるプロキシサーバーです。ローカルプロキシは、主にアプリケーションの通信内容をテストおよびデバッグするために使用されます。Webアプリケーションが外部サーバーとやり取りする際のリクエストやレスポンスを監視・記録し、内容を確認したり変更したりすることができます。このローカルプロキシを活用してデバッグを行っていきます。ローカルプロキシでどのように検証するか具体的に上のケースで、ローカルプロキシによるデバッグをイメージしてみましょう。JSONを返却させるローカルで再現できたらフロントエンドのコードベースで原因の調査を進めるローカルプロキシツールの多くは、指定したURLへのリクエストを監視してレスポンスを差し替える機能を備えています。この機能を使ってモックサーバーに検証用のデータを返却させ、ローカルのコードベースで動作検証して不具合の原因を調査します。使ってデバッグを行う実際にローカルプロキシを使って検証してみましょう。いうPythonで書かれたローカルプロキシです。こんな特徴を持っています。proxyオープンソース無料クロスプラットフォームCUIで使える(Webインターフェースも用意されている)特に「CUIで使える」つまりターミナルで起動できるのが大きな特徴です。ブラウザで開くWebインターフェースも用意されているため、「黒い画面」が苦手な方でも安心して使うことができます。導入について詳しくは割愛しますが、他のローカルプロキシ同様に次のような手順で開始します。自動で設定変更はしないため、手作業での設定が必要です。自動でシステムの設定を変更してくれるのは楽ではありますが、自分の預かり知らないところで設定が書き換えられるのは不安もあるのでこれはメリットであるとも言えます。