localhost
HTTPS
PageSpeedInsights
mitmproxy
ngrok

local環境(https)のPageSpeed Insights(PSI)を計測する

0.はじめに

任意のWebページの表示速度・パフォーマンスを解析して、速度改善方法等を提示してくれるツールの一つに、Googleの提供しているPageSpeed Insightsがあります。

https://developers.google.com/speed/pagespeed/insights/

このツールは、公開されているページなら何でも解析をしてくれるため、公開済みサイトの表示速度を計測・改善するためには非常に有用ですが、local環境は当然試すことが出来ません。
フロントエンドのパフォーマンスチューニングを行う上で、ネックとなっている場所を特定し対策しても、わざわざデプロイして改善されているか確認するのは手間がかかります。

その問題を解決するため、local環境をインターネット上に公開してくれるngrokというpackageを用いる手法、及びそれを用いたpsi-localというpackageも存在しています。

しかし、ngrokはhttpで建てられたlocal環境には対応していますが、今回自分が扱おうとしたlocal環境はhttpsで建てられており、そのままngrokを用いてPSIを計測することは叶いませんでした。

今回は、上記問題の解決手段として参考になる記事が見受けられなかったため、解決に至るまでの経緯を記そうと思います。

1.ngrokを用いたlocal環境のPSI計測

https://ngrok.com/

 Secure tunnels to localhost
”I want to expose a local server behind a NAT or firewall to the internet.”

先ほど簡単に説明した通り、ngrokはlocal環境を簡単にインターネット上に公開してくれるツールです。
主には、localで開発しているページをデプロイすることなく他人と共有したい時や、MobileアプリのバックエンドAPI等を開発している時のテストを簡単に行える点で非常に有用です。

npmを導入済みであれば、

$ npm install -g ngrok

にてインストールの後、

$ ngrok http {LOCALPORT}

のコマンドを実行するだけで、簡単に公開することが可能です。

スクリーンショット 2017-10-20 11.22.27.png
{LOCALPORT}に3000を入力し、起動した画面

これによってhttp及びhttpsのURLにてインターネットに公開されている他、localの4040番ポートでrequestの確認等が出来るおまけまで付いてきます。

本題に戻りますと、ngrokを用いてlocal環境をインターネット上で公開することで、GoogleのPageSpeed Insightsを利用したパフォーマンス測定を行えます。

上記手法をpsi-localというpackageも同様に用いており、こちらはJSONで情報を取得し、確認することが可能です。詳しくは下記URLをご覧下さい。

https://github.com/yankouskia/psi-local

以上がhttpで建てられたlocal環境のPSIを測定する方法になります。

2.httpsのlocal環境のPSIを測定する

httpで建てられたlocal環境はngrokを用いることで公開できましたが、httpsで建てられたlocal環境を同様に公開しようとすると502 Bad Gatewayと怒られてしまいます。

スクリーンショット 2017-10-20 11.53.49.png

これはngrokがhttpsを参照するとrequestが通らないことが原因と考えられました。
そこで、mitmproxyを用いてリバースプロキシを立てることで解決しました。

https://mitmproxy.org/

mitmproxyを用いてngrok <-> local(https)間にリバースプロキシを挟むことで、ngrokはhttpとして認識し、結果としてhttpsのlocal環境をインターネット上に公開することが出来ました。

brewをお持ちであれば、公式のInstallationに従って、簡単にインストールすることが出来ます。

$ brew install mitmproxy

リバースプロキシは、以下のコマンドで立てることが出来ます。

$ mitmproxy -R https://localhost:3001 --insecure -p 8080

-Rでリバースプロキシのアクセス先を指定し、
--insecureでSSL証明書の確認をskip、
-pでリバースプロキシのポートを指定します。

これによってhttp://localhost:8080にアクセスすることでhttps://localhost:3001の画面が表示されるはずです。

よってこの後に、

$ ngrok http 8080

を実行することで、結果的にhttpsのlocal環境を公開し、PSIに適用できるようになりました。

3.終わりに

PSI計測において、公開されているページの計測ではなく、ngrok・リバースプロキシを間に挟んでいる状態の計測なので、サーバーの応答時間は長くなってしまいます。ネックとなっている問題が解決出来ているかの確認が出来ることには代わりないと思いますが、PSIの総合計測Scoreは落ちてしまうことは、この方法の上では致し方ないと思います。

何か他に良い方法がありましたらコメントで教えて頂けると幸いです。