• EnglishEspañol日本語한국어Português
  • ログイン今すぐ開始

この機械翻訳は参考用に提供されます。

英語版と翻訳版に矛盾がある場合は、英語版が優先されます。詳細については、 を参照してください。

問題を作成する

「Hello, World!」を作成します。応用


「Hello, world!」を作成する方法は次のとおりです。 New Relic でのアプリケーション。

このガイドでは、次のことを行います。

  • アプリケーションのプロトタイプを作成する New Relic サイトのローカル バージョンを作成する
  • アプリケーションを Instant Observability に公開して、チームメイトとアプリケーションを共有する

あなたが始める前に

アプリケーションの開発には、New Relic アカウントと New Relic One CLI ( nr1 ) が必要です。

まだ行っていない場合:

これで、 my-awesome-nerdpackという Nerdpack ができました。この Nerdpack には、名前を付けた Nerdlet とランチャーがあります (ただし、このガイドでは、デフォルトのランチャー名「launcher」と Nerdlet 名「home」を使用します)。このガイドでは、この Nerdpack を使用します。

最後に、 nr1が最新であることを確認してください。

bash
$
nr1 update

環境のセットアップの詳細については、 「開発環境をセットアップする」 および 「Nerdpack の高度な構成を有効にする」を参照してください。

ヒント

VSCode を使用する場合、アプリのビルドに使用できる 拡張機能拡張パック があります。

アプリケーションをローカルで更新して提供する

nr1を使用すると、Nerdpack のローカル ビルドを New Relic に提供できます。これは、アプリケーションを公開する前に、実稼働環境に似た環境でアプリケーションを開発するのに役立ちます。

コードを変更する前に、Nerdpack のディレクトリ構造をよく理解しておいてください。

my-awesome-nerdpack/
├───README.md
├───launchers/
│ └───launcher/
│ └───nr1.json
├───nerdlets/
│ └───home
│ ├───index.js
│ ├───nr1.json
│ └───styles.scss
├───node_modules/
├───nr1.json
├───package-lock.json
└───package.json

launchers および nerdlets ディレクトリには、アプリケーションのロジックが含まれています。 ほとんどのコードを更新するのは、これらのディレクトリです。Nerdpack 全体の nr1.json ファイルには、Nerdpack、Nerdlets、およびランチャーに関するメタデータが保持されます。

ヒント

Nerdpack ファイル構造の詳細については、 ドキュメント をお読みください。

my-awesome-nerdpack/nerdlets/home/index.jsで、デフォルトの返信メッセージを「Hello, world!」に変更します。

import React from 'react';
// https://docs.newrelic.com/docs/new-relic-programmable-platform-introduction
export default class HomeNerdlet extends React.Component {
render() {
return <h1>Hello, world!</h1>;
}
}

オプションの手順として、 icon.webpという名前の画像を使用して、 カスタム ランチャー アイコンを追加できます。

launchers/launcherに、 icon.pngという画像を追加します。

my-awesome-nerdpack/
├───README.md
├───launchers/
│ └───launcher/
│ ├───icon.png
│ └───nr1.json
├───nerdlets/
│ └───home
│ ├───index.js
│ ├───nr1.json
│ └───styles.scss
├───node_modules/
├───nr1.json
├───package-lock.json
└───package.json

これにより、ランチャーのアイコンが作成されます。

ルート ディレクトリに、同じイメージを追加します。

my-awesome-nerdpack/
├───README.md
├───icon.png
├───launchers/
│ └───launcher/
│ ├───icon.png
│ └───nr1.json
├───nerdlets/
│ └───home
│ ├───index.js
│ ├───nr1.json
│ └───styles.scss
├───node_modules/
├───nr1.json
├───package-lock.json
└───package.json

これにより、アプリの詳細ページのアイコンが設定されます。

次に、ランチャーの名前をより意味のある名前に変更します。 my-awesome-nerdpack/launchers/launcher/nr1.jsonで、 displayNameを「Hello world」に変更します。

{
"schemaType": "LAUNCHER",
"id": "launcher",
"displayName": "Hello world",
"description": "Describe me",
"rootNerdletId": "7c4d08ae-4e6f-40d8-80a9-f8b7722fb96b.home"
}

新しい変更をローカルで確認するには、Nerdpack 内からローカル ノード サーバーを起動します。

bash
$
nr1 nerdpack:serve
Found and loaded 2 nr1.json files on MyAwesomeNerdpack (123a4b95-678c-9012-3456-d7e8f90g1hi2) Nerdpack.
Nerdpack:
✔ MyAwesomeNerdpack (123a4b95-678c-9012-3456-d7e8f90g1hi2) nr1.json
Launchers:
✔ launcher launchers/launcher/nr1.json
Nerdlets:
✔ home nerdlets/home/nr1.json
There is no certificate created yet.
New certificate created.
Webpack bundle analyzer is enabled (you need to wait for the first build to finish)
└ You can head to http://127.0.0.1:27888
NOTE: To verify how your assets will look in production, you need to
add "--mode=prod" when starting the development server.
🛠 Built artifact files for:ex.js...
123a4b95-678c-9012-3456-d7e8f90g1hi2--home built
Nerdpack built successfully!
Starting as orchestrator...
Server ready! Test it at: https://one.newrelic.com/?nerdpacks=local
Server will reload automatically if you modify any file!
Additionally, you can test the following artifacts at:
Launchers:
launcher https://onenr.io/0JBQrggmDwZ
You can use "npm start -- --mode=prod" to run the development server in prod mode.

出力の下部にある URL を使用して、ランチャーを開きます。

bash
Launchers:
launcher https://onenr.io/0JBQrggmDwZ
You can use "npm start -- --mode=prod" to run the development server in prod mode.

ここに、「Hello, world!」と一緒に Nerdlet が表示されます。メッセージ:

アプリケーションを公開する

Nerdpack をローカルで提供しているため、同僚はそれを見ることができません。準備ができたら、統合、ダッシュボード、アラート、Nerdpacks などの統合カタログである Instant Observabilityに公開します。 Nerdpack の公開に問題がある場合は、 ドキュメントを 読んで Nerdpack のアクセス許可について確認してください。

ルート ディレクトリから、Nerdpack を公開します。

bash
$
nr1 nerdpack:publish
Found and loaded 2 nr1.json files on MyAwesomeNerdpack (123a4b95-678c-9012-3456-d7e8f90g1hi2) Nerdpack.
Nerdpack:
✔ MyAwesomeNerdpack (123a4b95-678c-9012-3456-d7e8f90g1hi2) nr1.json
Launchers:
launcher launchers/launcher/nr1.json
Nerdlets:
home nerdlets/home/nr1.json
🛠 Built artifact files for:
123a4b95-678c-9012-3456-d7e8f90g1hi2--home built
Nerdpack built successfully!
Publishing Nerdpack MyAwesomeNerdpack (123a4b95-678c-9012-3456-d7e8f90g1hi2)
Nerdpack published successfully!
Tagged 123a4b95-678c-9012-3456-d7e8f90g1hi2 version 0.1.0 as STABLE.

New Relicで、 Add Data をクリックします。

新しい Nerdpack を見つけてクリックします。

新しいアプリケーションが開いたときに、説明的な情報が表示されないことに注意してください。次のセクションでは、説明的なメタデータを追加する方法を示します。

カタログの詳細を使用してプロジェクトを説明する

新しいアプリケーションが Instant Observability になったので、ユーザーがアプリケーションの機能と使用方法を理解するのに役立つ情報を追加できます。

Nerdpack のルート ディレクトリで、次のコマンドを実行します。

bash
$
nr1 create --type catalog
created: launchers/launcher/catalog
created: nerdlets/home/catalog
catalog created successfully!
catalog is available at "./catalog"

これにより、次の 3 つのディレクトリが作成されます。

  • launchers/launcher/catalog: ランチャーのスクリーンショットを保持します
  • nerdlets/home/catalog: これには Nerdlet のスクリーンショットが保存されます
  • catalog: これには、ドキュメント、スクリーンショット、説明、および Nerdpack に関する詳細情報が含まれています。

ヒント

他のランチャー、Nerdlets、またはカスタム ビジュアライゼーションがある場合は、このコマンドからカタログ ディレクトリも取得します。

プロジェクトでの結果は次のようになります。

my-awesome-nerdpack/
├───README.md
├───icon.png
├───catalog/
│ ├───README.md
│ ├───additionalInfo.md
│ ├───config.json
│ ├───documentation.md
│ └───screenshots/
├───launchers/
│ └───launcher/
│ ├───icon.png
│ ├───catalog/
│ │ └───screenshots/
│ └───nr1.json
├───nerdlets/
│ └───home
│ ├───index.js
│ ├───nr1.json
│ ├───catalog/
│ │ └───screenshots/
│ └───styles.scss
├───node_modules/
├───nr1.json
├───package-lock.json
└───package.json

プロジェクトのルート カタログ ディレクトリに、スクリーンショットまたはさまざまな種類のメタデータを追加して、プロジェクトを説明します。 ランチャーまたは Nerdlet のカタログ ディレクトリにスクリーンショットを追加することもできます。追加できるものの詳細については、 「Nerdpack のカタログ メタデータを更新する」を参照してください。

必要なスクリーンショットと説明を追加したら、次のコマンドを実行して、メタデータを Instant Observability カタログに保存します。

bash
$
nr1 catalog:submit

Instant Observability に戻り、ページを更新して、プロジェクトを説明する新しいスクリーンショットとメタデータを確認します。

また、ランチャーまたは Nerdlet にスクリーンショットを追加した場合は、 [内容]の下に表示されます。

アカウントをアプリケーションにサブスクライブする

アプリケーションを使用するには、アプリケーションをサブスクライブする必要があります。アカウントのどのユーザーがサブスクライブできるかについては、 権限に関するドキュメント をお読みください。

まだそこにいない場合は、Instant Observability でアプリケーションに移動します。

アプリケーションの説明ページで、 [このアプリを追加] をクリックします。

アプリケーションをサブスクライブするアカウントを選択し、アカウントを更新します。

アプリの ページに移動します。

ここには、アカウントが購読しているアプリが表示されます。

ランチャーをクリックします。

ここに、アプリケーションが表示されます。

概要

この例の手順を完了したので、次の基本的な手順を学習しました。

  • ローカル アプリケーションを作成する
  • アプリケーションを Instant Observability に公開して、同僚と共有できるようにします
  • ユーザーが使用方法を理解できるように、カタログ内のプロジェクトに詳細を追加します
  • アカウントをアプリケーションにサブスクライブして、他のユーザーが使用できるようにします
Copyright © 2024 New Relic株式会社。

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.