Reactを使用してDigitalOceanAPIからデータを表示する方法

投稿日: 2019-11-08 2022-04-20
タグ: API, Applications, Development, Programming Project, React

著者は、ウィキメディア財団を選択して、 Write forDOnationsプログラムの一環として寄付を受け取りました。

序章

過去数年にわたって、オープンソースのWebフレームワークは、アプリケーションのコーディングプロセスを大幅に簡素化してきました。たとえば、 React は、新しい開発者が言語にアクセスしやすくし、熟練した開発者の生産性を向上させることで、JavaScriptの人気を高めただけです。 Facebookによって作成されたReactを使用すると、開発者は、宣言ビュー、状態管理、クライアント側レンダリングなどの機能をサポートすることで、拡張性の高いWebアプリケーション用のハイエンドユーザーインターフェイスをすばやく作成できます。 JavaScriptのアプリ。

Reactなどのフレームワークを利用して、 DigitalOcean API からデータを読み込んで表示できます。これにより、HTTPリクエストを使用してDigitalOceanクラウド内のドロップレットやその他の製品を管理できます。他の多くのJavaScriptフレームワークを使用してAPIからデータをフェッチできますが、Reactには、ライフサイクルやローカル状態管理などの便利な利点があり、ジョブに特に適しています。 Reactを使用すると、APIから取得したデータは、アプリケーションの起動時にローカル状態に追加され、コンポーネントのマウントとマウント解除時にさまざまなライフサイクルを経ることができます。いつでも、ローカル状態からデータを取得して、それに応じて表示できます。

このチュートリアルでは、 DigitalOcean API v2 と対話して呼び出しを行い、ドロップレットに関する情報を取得する単純なReactアプリケーションを作成します。アプリには、現在のドロップレットとその詳細（名前、地域、技術仕様など）を含むリストが表示され、フロントエンドフレームワークBootstrapを使用してアプリケーションのスタイルを設定します。

このチュートリアルを終了すると、次のようなスタイルのDigitalOceanドロップレットのリストを表示する基本的なインターフェイスが表示されます。

The final version of your React Application

前提条件

このガイドを開始する前に、以下に加えて、DigitalOceanアカウントと少なくとも1つのドロップレットセットアップが必要です。

Node.js （少なくともv6）および npm （少なくともv5.2）のローカルインストール。 Node.jsは、ブラウザの外部でコードを実行できるJavaScriptランタイム環境です。 npm と呼ばれるパッケージマネージャーがプリインストールされており、パッケージをインストールおよび更新できます。これらをmacOSまたはUbuntu18.04にインストールするには、Node.jsをインストールしてmacOSにローカル開発環境を作成する方法またはノードをインストールする方法の「PPAを使用してインストールする」セクションの手順に従います。 Ubuntu18.04の.js。
DigitalOceanAPIの読み取り専用パーソナルアクセストークン。トークンは必ず安全な場所に記録してください。このチュートリアルの後半で必要になります。
HTMLとJavaScriptの組み合わせに精通していること。詳細については、JavaScriptをHTMLに追加する方法をご覧ください。
JavaScriptでJSONを操作する方法で詳細を学ぶことができる、JSONデータ形式に精通していること。
APIへのリクエストの作成に精通していること。 APIの操作に関する包括的なチュートリアルについては、Python3でWebAPIを使用する方法を参照してください。 Python用に書かれていますが、APIを使用するためのコアコンセプトを理解するのに役立ちます。

ステップ1—基本的なReactアプリケーションを作成する

この最初のステップでは、npmの Create ReactAppパッケージを使用して基本的なReactアプリケーションを作成します。このパッケージは、モジュールビルダーWebpackやJavaScriptコンパイラBabelなど、Reactの実行に必要な重要な依存関係を自動的にインストールして構成します。インストール後、Node.jsにプリインストールされているパッケージランナーnpxを使用してCreateReactAppパッケージを実行します。

Create React Appをインストールしてアプリケーションの最初のバージョンを作成するには、次のコマンドを実行し、my-appをアプリケーションに付ける名前に置き換えます。

npx create-react-app my-app

インストールが完了したら、新しいプロジェクトディレクトリに移動し、次のコマンドを使用してアプリケーションの実行を開始します。

cd my-app
npm start

上記のコマンドは、Create React Appによって提供されるローカル開発サーバーを起動します。これにより、ターミナルのコマンドラインプロンプトが無効になります。チュートリアルを続行するには、次の手順に進む前に、新しいターミナルウィンドウを開き、プロジェクトディレクトリに戻ります。

これで、Reactアプリケーションの最初のバージョンが開発モードで実行されました。これは、Webブラウザーでhttp://localhost:3000を開くことで表示できます。この時点で、アプリにはCreateReactAppのウェルカム画面のみが表示されます。

The first version of your React application

Reactアプリケーションの最初のバージョンをインストールして作成したので、最終的にDigitalOceanAPIからのデータを保持するテーブルコンポーネントをアプリに追加できます。

ステップ2—液滴データを表示するコンポーネントを作成する

このステップでは、ドロップレットに関する情報を表示する最初のコンポーネントを作成します。このコンポーネントは、すべてのドロップレットとそれに対応する詳細を一覧表示するテーブルになります。

DigitalOcean APIドキュメントには、cURLを使用して次のエンドポイントにリクエストを送信することですべてのドロップレットを含むリストを取得できると記載されています：https://api.digitalocean.com/v2/droplets。このリクエストの出力を使用して、id、name、region、memory、vcpus、および各液滴のdisk。このチュートリアルの後半で、APIから取得したデータをテーブルコンポーネントに挿入します。

アプリケーションの明確な構造を定義するには、srcディレクトリ内にcomponentsという新しいディレクトリを作成します。このディレクトリには、作成したすべてのコードを保存します。 src/componentsディレクトリ内にTable.jsという名前の新しいファイルを作成し、nanoまたは任意のテキストエディタで開きます。

mkdir src/components
nano src/components/Table.js

次のコードをファイルに追加して、テーブルコンポーネントを定義します。

src / components / Table.js

import React from 'react';

const Table = () => {
  return (
    <table>
      <thead>
        <tr>
          <th>Id</th>
          <th>Name</th>
          <th>Region</th>
          <th>Memory</th>
          <th>CPUs</th>
          <th>Disk Size</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
        </tr>
      </tbody>
    </table>
  );
}

export default Table

上記のコードブロックは、Reactフレームワークをインポートし、Tableと呼ばれる新しいコンポーネントを定義します。これは、見出しと本文を持つテーブルで構成されます。

これらのコード行を追加したら、ファイルを保存して終了します。 nanoテキストエディタでは、CTRL+Xを押し、yと入力し、ENTERを押すことでこれを行うことができます。

テーブルコンポーネントを作成したので、次はこのコンポーネントをアプリケーションに含めます。これを行うには、ファイルsrc/App.jsにあるアプリケーションのエントリポイントにコンポーネントをインポートします。次のコマンドでこのファイルを開きます。

nano src/App.js

次に、src/App.jsにCreateReact Appウェルカムメッセージを表示するボイラープレートコードを削除します。これは、次のコードブロックで強調表示されています。

src / App.js

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <p>
            Edit <code>src/App.js</code> and save to reload.
          </p>
          <a
            className="App-link"
            href="https://reactjs.org"
            target="_blank"
            rel="noopener noreferrer"
          >
            Learn React
          </a>
        </header>
      </div>
    );
  }
}

export default App;

ウェルカムメッセージを表示した行を削除した後、次の強調表示された行を追加して、この同じファイル内にテーブルコンポーネントを含めます。

src / App.js

import React, { Component } from 'react';
import Table from './components/Table.js';

class App extends Component {
  render() {
    return (
      <div className="App">
        <Table />
      </div>
    );
  }
}

export default App;

Webブラウザでhttp://localhost:3000に再度アクセスすると、アプリケーションはテーブルヘッド付きの基本的なテーブルを表示します。

The React application with a basic table

このステップでは、テーブルコンポーネントを作成し、このコンポーネントをアプリケーションのエントリポイントに含めました。次に、DigitalOcean APIへの接続を設定します。これを使用して、このテーブルに表示されるデータを取得します。

ステップ3—APIクレデンシャルを保護する

DigitalOcean APIへの接続の設定は、個人アクセストークンを環境変数として安全に保存することから始まるいくつかのアクションで構成されます。これは、 dotenv を使用して実行できます。これは、アプリケーションが後で環境からアクセスできる.envファイルに機密情報を保存できるパッケージです。

npmを使用してdotenvパッケージをインストールします。

npm install dotenv

dotenvをインストールした後、次のコマンドを実行して、アプリケーションのルートディレクトリに.envという環境ファイルを作成します。

nano .env

以下を.envに追加します。これには、パーソナルアクセストークンとDigitalOceanAPIのURLが含まれています。

.env

DO_API_URL=https://api.digitalocean.com/v2
DO_ACCESS_TOKEN=YOUR_API_KEY

この機密データがリポジトリにコミットされないようにするには、次のコマンドを使用して.gitignoreファイルに追加します。

echo ".env" >> .gitignore

これで、環境変数用の安全でシンプルな構成ファイルが作成されました。これにより、アプリケーションがDigitalOceanAPIにリクエストを送信するために必要な情報が提供されます。 APIクレデンシャルがクライアント側に表示されないようにするには、次に、アプリケーションサーバーとDigitalOceanAPIの間で要求と応答を転送するプロキシサーバーを設定します。

次のコマンドを実行して、ミドルウェアhttp-proxy-middlewareをインストールします。

npm install http-proxy-middleware

これをインストールしたら、次のステップはプロキシを設定することです。 setupProxy.jsファイルをsrcディレクトリに作成します。

nano src/setupProxy.js

このファイル内に、次のコードを追加してプロキシサーバーを設定します。

src / setupProxy.js

const proxy = require('http-proxy-middleware')

module.exports = function(app) {
  
  require('dotenv').config()

  const apiUrl = process.env.DO_API_URL
  const apiToken = process.env.DO_ACCESS_TOKEN
  const headers  = {
    "Content-Type": "application/json",
    "Authorization": "Bearer " + apiToken
  }

  // define http-proxy-middleware
  let DOProxy = proxy({
    target: apiUrl,
    changeOrigin: true,
  pathRewrite: {
    '^/api/' : '/'
  },
    headers: headers,
  })

  // define the route and map the proxy
  app.use('/api', DOProxy)

};

上記のコードブロックで、const apiURL =はDigitalOceanAPIのURLをエンドポイントとして設定し、const apiToken =はパーソナルアクセストークンをプロキシサーバーにロードします。オプションpathRewriteは、プロキシサーバーを/ではなく/apiにマウントするため、アプリケーションサーバーに干渉することはありませんが、DigitalOceanAPIと一致します。

これで、Reactアプリケーションから行われたすべてのAPIリクエストをDigitalOceanAPIに送信するプロキシサーバーが正常に作成されました。このプロキシサーバーは、環境変数として安全に保存されているパーソナルアクセストークンがクライアント側に公開されていないことを確認します。次に、アプリケーションのDropletデータを取得するための実際のリクエストを作成します。

ステップ4—DigitalOceanへのAPI呼び出しを行う

ディスプレイコンポーネントの準備が整い、DigitalOceanへの接続の詳細が保存され、プロキシサーバーを介して保護されたので、DigitalOceanAPIからのデータの取得を開始できます。まず、クラスAppを宣言する直前と直後に、次の強調表示されたコード行をsrc/App.jsに追加します。

src / App.js

import React, { Component } from 'react';
...
class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      droplets: []
    }
  }

	render() {
...

これらのコード行は、クラスコンポーネントのconstructorメソッドを呼び出します。このメソッドは、Reactで、this.stateに1つまたは複数のオブジェクトを提供することでローカル状態を初期化します。この場合、オブジェクトはドロップレットです。上記のコードブロックから、ドロップレットを含む配列が空であり、API呼び出しの結果で配列を埋めることができることがわかります。

現在のドロップレットを表示するには、DigitalOceanAPIからこの情報を取得する必要があります。 JavaScript関数Fetchを使用して、DigitalOcean APIにリクエストを送信し、取得したデータでdropletsの状態を更新します。これを行うには、componentDidMountメソッドを使用して、コンストラクターの後に次のコード行を追加します。

src / App.js

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      droplets: []
    }
  }

  componentDidMount() {
  	fetch('http://localhost:3000/api/droplets')
  	.then(res => res.json())
  	.then(json => json.droplets)
  	.then(droplets => this.setState({ 'droplets': droplets }))
  }
...

ドロップレットデータがstateに保存されたら、アプリケーションのrender関数内でドロップレットデータを取得し、このデータをpropとしてテーブルコンポーネントに送信します。次の強調表示されたステートメントをApp.jsのテーブルコンポーネントに追加します。

src / App.js

...
class App extends Component {
  render() {
    return (
      <div className="App">
        <Table droplets={ this.state.droplets } />
      </div>
    );
  }
}
...

これで、APIからデータを取得する機能が作成されましたが、Webブラウザーを介してこのデータにアクセスできるようにする必要があります。次のステップでは、テーブルコンポーネントにドロップレットデータを表示することでこれを実現します。

ステップ5—テーブルコンポーネントにドロップレットデータを表示する

ドロップレットデータをテーブルコンポーネントに転送したので、このデータをテーブルの行に対して反復処理できます。ただし、アプリケーションはApp.jsがマウントされた後にAPIにリクエストを送信するため、dropletsのプロパティ値は最初は空になります。したがって、データを表示する前に、dropletsが空でないことを確認するコードも追加する必要があります。これを行うには、Table.jsのtbodyセクションに次の強調表示された行を追加します。

src / components / Table.js

const Table = ({ droplets }) => {
  return (
    <table>
      <thead>
        <tr>
          <th>Id</th>
          <th>Name</th>
          <th>Region</th>
          <th>Memory</th>
          <th>CPUs</th>
          <th>Disk Size</th>
        </tr>
      </thead>
      <tbody>
        { (droplets.length > 0) ? droplets.map( (droplet, index) => {
           return (
            <tr key={ index }>
              <td>{ droplet.id }</td>
              <td>{ droplet.name }</td>
              <td>{ droplet.region.slug}</td>
              <td>{ droplet.memory }</td>
              <td>{ droplet.vcpus }</td>
              <td>{ droplet.disk }</td>
            </tr>
          )
         }) : <tr><td colSpan="5">Loading...</td></tr> }
      </tbody>
    </table>
  );
}

上記のコードを追加すると、ドロップレットデータが存在しない場合、アプリケーションはLoading...プレースホルダーメッセージを表示します。 DigitalOcean APIがDropletデータを返す場合、アプリケーションは各データ型の列を含むテーブル行に対してそれを繰り返し、結果をWebブラウザーに表示します。

The React Application with Droplet data

注：Webブラウザでhttp://localhost:3000にエラーが表示された場合は、開発サーバーを実行している端末でCTRL+Cを押してアプリケーションを停止してください。次のコマンドを実行して、アプリケーションを再起動します。

npm start

この手順では、アプリケーションのテーブルコンポーネントを変更して、ドロップレットデータをWebブラウザーに表示し、ドロップレットが見つからない場合のプレースホルダーメッセージを追加しました。次に、フロントエンドWebフレームワークを使用してデータのスタイルを設定し、視覚的に魅力的で読みやすくします。

ステップ6—ブートストラップを使用したテーブルコンポーネントのスタイリング

これでテーブルにデータが入力されましたが、情報は最も魅力的な方法で表示されていません。これを修正するには、プロジェクトにBootstrapを追加してアプリケーションのスタイルを設定します。 Bootstrapは、CSSテンプレートを使用してプロジェクトにレスポンシブスタイルを追加できるオープンソースのスタイリングおよびコンポーネントライブラリです。

次のコマンドを使用して、npmでBootstrapをインストールします。

npm install bootstrap

Bootstrapのインストールが完了したら、src/App.jsに次の強調表示された行を追加して、CSSファイルをプロジェクトにインポートします。

src / App.js

import React, { Component } from 'react';
import Table from './components/Table.js';
import 'bootstrap/dist/css/bootstrap.min.css';

class App extends Component {
...

CSSをインポートしたので、src/components/Table.jsの<table>タグにクラスtableを追加して、ブートストラップスタイルをテーブルコンポーネントに適用します。

src / components / Table.js

import React from 'react';

const Table = ({ droplets }) => {
  return (
    <table className="table">
      <thead>
...

次に、タイトルとDigitalOceanロゴが付いたヘッダーをテーブルの上に配置して、アプリケーションのスタイリングを終了します。 DigitalOceanのプレスページのブランド資産セクションでロゴのダウンロードをクリックしてロゴのセットをダウンロードし、SVGディレクトリからお気に入りを選択します（このチュートリアルではDO_Logo_icon_blue.svgを使用します）、プロジェクトのsrcディレクトリ内のassetsという新しいディレクトリにロゴファイルをコピーして、プロジェクトに追加します。ロゴをアップロードした後、強調表示された行をsrc/App.jsに追加して、ロゴをヘッダーにインポートします。

src / App.js

import React, { Component } from 'react';
import Table from './components/Table.js';
import 'bootstrap/dist/css/bootstrap.min.css';
import logo from './assets/DO_Logo_icon_blue.svg';

class App extends Component {
...
  render() {
    return (
      <div className="App">
        <nav class="navbar navbar-light bg-light">
          <a class="navbar-brand" href="./">
            <img src={logo} alt="logo" width="40" /> My Droplets
          </a>
        </nav>
        <Table droplets={ this.state.droplets } />
      </div>
    );
  }
}

export default App;

上記のコードブロックでは、navタグ内のクラスが、Bootstrapからヘッダーに特定のスタイルを追加します。

Bootstrapをインポートし、そのスタイルをアプリケーションに適用したので、データは整理された読みやすい表示でWebブラウザーに表示されます。

The final version of your React Application

結論

この記事では、セキュリティで保護されたプロキシサーバーを介してDigitalOcean APIからデータをフェッチし、ブートストラップスタイルで表示する基本的なReactアプリケーションを作成しました。 Reactフレームワークに慣れてきたので、ここで学んだ概念を、 Djangoで顧客情報を管理するための最新のWebアプリケーションを構築し、Ubuntu18.04でReactを実行する方法などのより複雑なアプリケーションに適用できます。。 DigitalOcean APIで可能な他のアクションを知りたい場合は、DigitalOceanのWebサイトにあるAPIドキュメントを参照してください。

getdocs

8783