Related pages：

このページでは、JavaScript エージェントを自動的に挿入するために Apache を使用してブラウザアプリケーションをインストゥルメント化する方法について説明します。Apache を Web コンテナとして使用している場合、または Apache をリバースプロキシとして現在使用しているか使用する予定の場合、コンテナ置換モジュールを使用して、JavaScript エージェントをページに自動挿入できます。モジュールは、返された応答オブジェクトをインターセプトし、文字列置換を行います。

この方法では、2 つの Apache モジュール（mod_substitute と mod_filter.）を使用します。

エージェントのダウンロード

最初に、[Browser Monitoring] 構成画面から JavaScript エージェントをダウンロードする必要があります。

  1. 対象のブラウザアプリケーションを開きます。

  2. 左のナビゲーションメニューから [Configuration] を選択します。 

  3. [Configure and download JavaScript Agent] をクリックします。

  4. JavaScript ホスティングオプションで、次を選択します。I will host all the JavaScript agent files.

  5. [Download] をクリックして、JavaScript エージェントをダウンロードします。

  6. Apache インスタンスにアクセス可能な場所にファイルを配置します。保存されたファイルの名前は、「adrum.js」である必要があります。

Apache の構成

基本的なセットアップでは、次の 4 つの手順を実行します。

  1. モジュールがロードされていることの確認
  2. Adrum 構成ファイルの作成
  3. Adrum 構成ファイルの場所を httpd.conf に追加
  4. Web サーバの再起動

モジュールがロードされていることの確認

グローバル Apache httpd.conf ファイルをチェックし、次の 2 つの LoadModule コマンドがファイルに含まれていることを確認してください。

LoadModule substitute_module modules/mod_substitute.so
LoadModule filter_module modules/mod_filter.so

Adrum 構成ファイルの作成

Apache のバージョンに基づいて、次の例のようなコンテンツを含む、「adrum.conf」という名前のファイルを作成します。（詳細については、この「Stack Overflow」記事を参照してください）。この場合、置換ルールはサイト全体の場所（Location /）に適用されますが、/somedirectory.   を使用して特定のディレクトリとそのサブディレクトリを再帰的に選択することもできます。

Apache 2.2 の adrum.conf の例

次のサンプルコードでは、<EUM_APP_KEY> を独自の EUM アプリケーションキーに置き換えます。

<Location "/">
    SetOutputFilter INFLATE;SUBSTITUTE;DEFLATE 
    AddOutputFilterByType SUBSTITUTE text/html
    Substitute "s#<head>#<head><script>window['adrum-start-time'] = new Date().getTime();</script><script>(function(config){config.appKey='<EUM_APP_KEY>';})(window['adrum-config'] || (window['adrum-config'] = {}));</script><script src='./adrum.js'></script>#inq"
</Location>
XML

<meta> タグを使用する場合は、<head> タグのすぐ後ろに配置し、JavaScript エージェントは最後 <meta> タグの直後、他の <script>tagsの前に配置する必要があります。これにより、一部のバージョンの IE で問題が発生しなくなり、リソースタイミングの精度が向上します。

Apache 2.4 の adrum.conf の例

次のサンプルコードでは、<EUM_APP_KEY> を独自の EUM アプリケーションキーに置き換えます。

<Location "/">
    AddOutputFilterByType SUBSTITUTE text/html
    Substitute "s#<head>#<head><script>window['adrum-start-time'] = new Date().getTime();</script><script>(function(config){config.appKey='<EUM_APP_KEY>';})(window['adrum-config'] || (window['adrum-config'] = {}));</script><script src='./adrum.js'></script>#inq"
</Location>
XML

ここで、./adrum.js はサーバにアクセス可能な adrum ファイルのコピーへのパスです。# の後のフラグは次のとおりです。

  • i -マッチングは大文字と小文字を区別する
  • n - パターンは固定文字列として扱われます（n を削除すると、パターンは正規表現として扱われます）。
  • q - モジュールは、各置換の後にバケットを平坦化することはありません。これによりパフォーマンスが向上します。  

詳細については、ここの Apache モジュールのドキュメントを参照してください。  

<head> タグに <head lang="en"> のような属性が含まれる場合は、置換文字列に正規表現を使用し、n フラグを省略できます。次のサンプルコードでは、<EUM_APP_KEY> を独自の EUM アプリケーションキーに置き換えます。

Substitute "s#(<head[^>]
*>)#$1<script>window['adrum-start-time'] = new Date().getTime();</script><script>(function(config){config.appKey='<EUM_APP_KEY>';})(window['adrum-config'] || (window['adrum-config'] = {}));</script><script src='./adrum.js'></script>#iq"
TEXT

タイマーの初期化 <script>window['adrum-start-time'] = new Date().getTime();</script>.  に注意してください。これらのスクリプトをドキュメントの一番上に近いところに挿入します。<head> タグの直後に配置すると最適なタイミングを取得できます。

<meta> タグを使用する場合は、<head> タグのすぐ後ろに配置し、JavaScript エージェントは最後 <meta> タグの直後、他の <script>tags の前に配置する必要があります。これにより、一部のバージョンの IE で問題が発生しなくなり、リソースタイミングの精度が再び向上します。


（オプション）gzip で圧縮したリソースの調整

ページが圧縮されている場合、コンテンツが INFLATE されて、置換が実行されてから、コンテンツが DEFLATE されない限り、置換は機能しません。これにはいくつかの方法があります。たとえば、FilterProvider 行で次のようにします。

FilterProvider AdrumFilter INFLATE;SUBSTITUTE;DEFLATE resp=Content-Type $text/html

詳細については、「Stack Overflow」の記事を参照してください。Apache をプロキシとして使用している場合は、gzip でエンコードされたコンテンツを受け入れないように指示することもできます。

Adrum 構成ファイルの場所を httpd.conf に追加

グローバル Apache httpd.conf ファイルに次の行を追加します。

Include [absolutePathTo]/adrum.conf

または、別の adrum ファイルを作成するのではなく、直接 httpd.conf ファイルにディレクティブを追加することもできます。

Web サーバの再起動

新しい構成を有効にするには、次のように再起動します。

sudo apchectl -k restart

警告「Useless use of AllowOverride in line 2 of [absolutePathTo]/adrum.conf」が表示されても無視できます。AllowOverride が冗長であることを示しているだけです。必要に応じて削除できます。

スクリプト文字列に使用できるバリエーションについては、「JavaScript エージェントの構成」を参照してください。

その他の方法

リバースプロキシとして構成された Apache インスタンスを使用して自動インジェクションを設定する場合は、前述の Location ディレクティブのメソッドを使用する必要があります。また、Location ディレクティブには、ProxyPass または ProxyPassReverse ディレクティブも使用できます。プライマリ Web コンテナである Apache インスタンスを使用している場合は、実際の置換手順を記述する 2 つの追加オプションがあります。

Directory ディレクティブの使用

Location ディレクティブの代わりに Directory ディレクティブを使用できます。  

.htaccess の使用

次のような行を、サイトのベース ドキュメント ディレクトリ内の .htaccess ファイルに追加し、<MyFilter> のフィルタ名を置き換えます。.htaccess ファイルがない場合は、作成します。

Apache 2.2

次のコードサンプルでは、<EUM_APP_KEY> を独自の EUM アプリケーションキーに置き換えます。

Substitute "s#<head>#<head><script>window['adrum-start-time'] = new Date().getTime();</script><script>(function(config){config.appKey='<EUM_APP_KEY>';})(window['adrum-config'] || (window['adrum-config'] = {}));</script><script src='./adrum.js'></script>#inq"
TEXT 
AllowOverride Options
FilterDeclare <MyFilter>
FilterProvider <MyFilter> SUBSTITUTE resp=Content-Type $text/html
FilterChain <MyFilter>
Substitute "s#<head>#<head><script>window['adrum-start-time'] = new Date().getTime();</script><script>(function(config){config.appKey='<EUM_APP_KEY>';})(window['adrum-config'] || (window['adrum-config'] = {}));</script><script src='./adrum.js'></script>#inq"
TEXT


Apache 2.4

次のコードサンプルでは、<EUM_APP_KEY> を独自の EUM アプリケーションキーに置き換えます。

Substitute "s#<head>#<head><script>window['adrum-start-time'] = new Date().getTime();</script><script>(function(config){config.appKey='<EUM_APP_KEY>';})(window['adrum-config'] || (window['adrum-config'] = {}));</script><script src='./adrum.js'></script>#inq"
TEXT 
AddOutputFilterByType SUBSTITUTE text/html
Substitute "s#<head>#<head><script>window['adrum-start-time'] = new Date().getTime();</script><script>(function(config){config.appKey='<EUM_APP_KEY>';})(window['adrum-config'] || (window['adrum-config'] = {}));</script><script src='./adrum.js'></script>#inq"
TEXT

ここで、/adrum.js はサーバーにアクセス可能な adrum ファイルのコピーへのパスです。.htaccess がすべてのユーザに読み取り可能であることを確認します。