Nuxt.jsの環境にNew Relicを導入する方法

# 概要
`Nuxt.js`の環境に`New Relic`を導入しました。公式ドキュメントにも実装方法は書いてありますが、全然やり方が分からないので、今回はその手順について記載します。

# 前提条件
- `Nuxt.js`の環境が存在している
- `New Relic`のアカウントがあり、ログインが可能な状態となっている

# `New Relic`の概要
アプリケーションの動作やパフォーマンスに関するデータを収集し、可視化・分析・監視を行うことで、開発者や運用チームにアプリケーションのパフォーマンスの把握と改善の支援をする機能です。

# `nuxt.js`の概要
`Vue.js`をベースとしたフレームワークです。サーバーサイドレンダリング（SSR）と静的サイト生成（SSG）をサポートすることが特徴です。`Nuxt.js`は、シングルページアプリケーション（SPA）の開発において、効率的かつパフォーマンスの高い開発を可能にします。

# `nuxt.js`のディレクトリー構成
今回は、この構成にて、説明を行います。
```
.
├── .nuxt
├── components
├── node_modules
├── pages
├── static
├── store
├── .editorconfig
├── .gitignore
├── jsconfig.json
├── nuxt.config.js
├── package-lock.json
├── package.json
└── README.md
```

# 1-1. `New Relic`での設定
## 1. メイン画面の操作
- `Top`画面(メイン画面)を開いたら、サイドバーとヘッダーにある`Add data`を押下する
![NewRelicの一覧画面.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/664659/773cfe37-2fbb-efc3-75d2-b32a80ead558.png)

## 1-2. `Add data`画面の操作
- サイドメニューバーにある`Browser & mobile`を押下する
- `Vue.js`のアイコンが表示される為、`Vue`を押下する
![Add dataの画面.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/664659/4187145e-7b98-20ae-e186-1ba485044434.png)


## 1-3 `Get started with New Relic Browser`画面の操作

### 1-3-1. `Choose a deployment method`の設定
- `Copy/Paste Javascript code`をチェックする
(このチェックを行うことで、`script`タグが生成できる)

![Choose a deployment methodの設定.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/664659/ff9fa10a-b63e-81ee-123d-5de68bc9a3e4.png)

:::note warn
`Enable via New Relic APM`について分かった事を補足(間違い有り)

`Enable via New Relic APM`にチェックする場合、`New Relic APM`エージェントをインストールした環境で使用が推奨されている。その為、ローカル環境また本番側の環境に直接`New Relic APM`エージェントをインストールしているのであれば、有効にしても良い思われる。
:::

### 1-3-2. `Configure your instrumentation`の設定
- `Distributed Tracing`と`Cookie collection`はONの状態で良い
(必要に応じて、ここは切り替える)

![スクリーンショット 2023-05-18 9.59.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/664659/b4afb7c8-94b7-b0bc-1885-60da9c6c457f.png)

### 1-3-3. `Name your app`の設定
- `No`を選択する
- `Name`の入力欄にアプリ名を入力する
(ここで入力したアプリ名は、モニタリング名と同じになる)
- `Enable`を押下するとコードが生成される

![アプリ名の設定.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/664659/acb744e6-9996-c468-9777-dcbb6025a955.png)

### 1-3-4. `Instrument the agenの`画面
- 生成されたコードをコピーしておく

![Instrument the agenの画面.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/664659/bf97037e-12a2-3d46-84a2-e9c9d180e70e.png)

:::note warn
生成されたコードが分からなくなった場合の対処方法

- トップ画面(メイン画面)のサイドバーにある`All Entities`を押下する
- サブサイドバーが表示される為、`Browser applications`を押下する
- モニタリングできるアプリが一覧として表示される為、分からなくなったアプリの詳細画面を開く
- モニタリング画面が開いたら、サブサイドバーも変化している為、その中にある`application settings`を押下する
- コードが生成されてるので、そのコードを再度コピーする
:::

# 2. 開発環境(ローカル環境)での設定
## 2-1. ディレクトリーと`js`ファイルの作成
- `static`直下(`static`ディレクトリー内)に、任意の`js`ファイルを作成する
```
サンプル例
.
└── static/
    └── test.js
```

もし、複数の環境がある場合は、ディレクトリーを作成してから任意の`js`ファイルを作成しても良い

```
サンプル例
.
└── static/
    └── test/
        ├── local_test.js
        ├── staging_test.js
        └── production_test.js
```
## 2-2. `js`ファイルにコードを埋め込む





- 下記のコード内に、[1-3-4. Instrument the agenの画面](#1-3-4.-Instrument-the-agenの画面)で生成されたコードを貼り付ける
<font color="Red">※`script`タグは、消去して貼り付ける</font>
```js
// 構文
function 任意のfunction名() {
    // scriptタグを除いたコードを貼る
}
任意のfunction名();


// 実例
// 個人情報はアスタリスク(*)で記述
function test() {
   ;window.NREUM||(NREUM={});NREUM.init={distributed_tracing:{enabled:true},privacy:{cookies_enabled:true},ajax:{deny_list:["***.**-****.net"]}};

    ;NREUM.loader_config={accountID:"*******",trustKey:"*******",agentID:"*********",licenseKey:"AAAA-*******************",applicationID:"***********"}
    ;NREUM.info={beacon:"***.**-****.net",errorBeacon:"***.nr-****.net",licenseKey:"AAAA-*******************",applicationID:"***********",sa:1}
}

// 　以下省略

test();
```

## 2-3 `nuxt.config.js`に追記
- `New Relic`の設定情報を読み込ませる必要がある為、`nuxt.config.js`ファイルの`script`の部分に読み込ませる為の記述する

```nuxt.config.js
export default {
  head: {
    title: 'My Website', // ページのタイトル
    meta: [
       // 省略
    ],
    link: [
      // 省略
    ],
    script: [
        { 
            key: '任意の名前を記入',
            src: '/test.js', 
            // staticディレクトリー内にフォルダーを作成し、その中にjsファイルがある場合の記述は下記の記述となる
            // src: '/test/local_test.js'
            defer: true,
            type: 'text/javascript'
        },
    ],
  },
  // 他の設定オプション
};
```
- `script`に記載した内容の説明
```js
key: '任意の名前',
// キーは一意の名前で書く。他のスクリプト要素と重複しない為に付与する
srscriptc: '読み込ませるjsファイルのパスを記述する',
defer: true,　
// deferを書く事で、DOMが作成されてからスクリプトの読み込みと実行が行われる為、jsファイルが正しく動作する事が保証できる
type: 'text/javascript'
// jsである事を示す為、記述する必要がある
```

## 2-4 ページの再読見込み
- パッケージマネージャーに`Yarn`または`NPM`のどちらかを使用しているので、`package.json`の階層に移動した後、再度システムを立ち上げる為のコマンド入力する

```sh
# Yarnを使用している場合、下記のコマンドをターミナルで実行
$ yarn dev

# NPMを使用している場合は、下記のコマンドをターミナルで実行
$ npm run dev
```

# 参考資料
- [【公式】New Relic　ドキュメント](https://docs.newrelic.com/jp/)
- [【公式】Nuxt.js　ドキュメント](https://nuxtjs.org/ja/docs/get-started/installation)
- [【公式】Nuxt.jsインテグレーション【ドキュメント】](https://docs.newrelic.com/jp/docs/browser/browser-integrations/nuxt-js-integration/#config)
- [【完全ガイド】ゼロからしっかり理解したい人向けのNuxt.js入門](https://reffect.co.jp/vue/nuxt-js-first-step)
- [【徹底解説】scriptタグにdeferやasyncをつけるとどうなる?](https://takayamato.com/defer_async/)
- [scriptタグのdefer属性](https://helen.hatenablog.com/entry/2016/06/05/182642)

# 感想
今回`New Relic`と言う機能を初めて触り、実際にフロントエンドの環境に導入を行いました。フロントエンドは個人的に凄く苦手ですが、分かってくると楽しいので、この流れでフロントエンドに詳しくなろうと思いましたw