序章
過去数年にわたって、オープンソースのWebフレームワークは、アプリケーションのコーディングプロセスを大幅に簡素化しました。 たとえば、 React は、新しい開発者が言語にアクセスしやすくし、熟練した開発者の生産性を向上させることで、JavaScriptの人気を高めただけです。 Facebookによって作成されたReactを使用すると、開発者は、宣言ビュー、状態管理、クライアント側レンダリングなどの機能をサポートすることで、拡張性の高いWebアプリケーション用のハイエンドユーザーインターフェイスをすばやく作成できます。 JavaScriptのアプリ。
Reactなどのフレームワークを利用して、 DigitalOcean API からデータを読み込んで表示できます。これにより、HTTPリクエストを使用してDigitalOceanクラウド内のドロップレットやその他の製品を管理できます。 他の多くのJavaScriptフレームワークを使用してAPIからデータをフェッチできますが、Reactには、ライフサイクルやローカル状態管理などの便利な利点があり、ジョブに特に適しています。 Reactを使用すると、APIから取得したデータは、アプリケーションの起動時にローカル状態に追加され、コンポーネントのマウントとマウント解除時にさまざまなライフサイクルを経ることができます。 いつでも、ローカル状態からデータを取得して、それに応じて表示できます。
このチュートリアルでは、 DigitalOcean API v2 と対話して呼び出しを行い、ドロップレットに関する情報を取得する単純なReactアプリケーションを作成します。 アプリには、現在のドロップレットとその詳細（名前、地域、技術仕様など）を含むリストが表示され、フロントエンドフレームワークBootstrapを使用してアプリケーションのスタイルを設定します。
このチュートリアルを終了すると、次のようなスタイルのDigitalOceanドロップレットのリストを表示する基本的なインターフェイスが表示されます。
前提条件
このガイドを開始する前に、以下に加えて、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アプリケーションの最初のバージョンが開発モードで実行されました。これを開くと表示できます http://localhost:3000 Webブラウザで。 この時点で、アプリにはCreateReactAppのウェルカム画面のみが表示されます。
Reactアプリケーションの最初のバージョンをインストールして作成したので、最終的にDigitalOceanAPIからのデータを保持するテーブルコンポーネントをアプリに追加できます。
ステップ2—液滴データを表示するコンポーネントを作成する
このステップでは、ドロップレットに関する情報を表示する最初のコンポーネントを作成します。 このコンポーネントは、すべてのドロップレットとそれに対応する詳細を一覧表示するテーブルになります。
DigitalOcean APIドキュメントには、cURLを使用して次のエンドポイントにリクエストを送信することで、すべてのドロップレットを含むリストを取得できると記載されています。 https://api.digitalocean.com/v2/droplets. このリクエストからの出力を使用して、以下を含むテーブルコンポーネントを作成できます。 id, name, region, memory, vcpus、 と disk ドロップレットごとに。 このチュートリアルの後半で、APIから取得したデータをテーブルコンポーネントに挿入します。
アプリケーションの明確な構造を定義するには、という新しいディレクトリを作成します。 components 中 src 作成したすべてのコードを保存するディレクトリ。 と呼ばれる新しいファイルを作成します Table.js 中 src/components ディレクトリを作成し、nanoまたは任意のテキストエディタで開きます。
- mkdir src/components
- nano 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
次に、CreateReactAppウェルカムメッセージを表示するボイラープレートコードを削除します。 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;
ウェルカムメッセージを表示した行を削除した後、次の強調表示された行を追加して、この同じファイル内にテーブルコンポーネントを含めます。
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;
アクセスした場合 http://localhost:3000 Webブラウザーで再び、アプリケーションはテーブルヘッド付きの基本的なテーブルを表示します。
このステップでは、テーブルコンポーネントを作成し、このコンポーネントをアプリケーションのエントリポイントに含めました。 次に、DigitalOcean APIへの接続を設定します。これを使用して、このテーブルに表示されるデータを取得します。
ステップ3—APIクレデンシャルを保護する
DigitalOcean APIへの接続の設定は、個人アクセストークンを環境変数として安全に保存することから始まるいくつかのアクションで構成されます。 これは、 dotenv を使用して実行できます。これは、機密情報を .env アプリケーションが後で環境からアクセスできるファイル。
npmを使用してインストールします dotenv パッケージ：
- npm install dotenv
インストール後 dotenv、という環境ファイルを作成します .env 次のコマンドを実行して、アプリケーションのルートディレクトリに移動します。
- nano .env
以下をに追加します .env、パーソナルアクセストークンとDigitalOceanAPIのURLが含まれています。
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
このファイル内に、次のコードを追加してプロキシサーバーを設定します。
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 = DigitalOcean APIのURLをエンドポイントとして設定し、 const apiToken = パーソナルアクセストークンをプロキシサーバーにロードします。 オプション pathRewrite プロキシサーバーをにマウントします /api それよりも / これにより、アプリケーションサーバーに干渉することはありませんが、DigitalOceanAPIと一致します。
これで、Reactアプリケーションから行われたすべてのAPIリクエストをDigitalOceanAPIに送信するプロキシサーバーが正常に作成されました。 このプロキシサーバーは、環境変数として安全に保存されているパーソナルアクセストークンがクライアント側に公開されていないことを確認します。 次に、アプリケーションのDropletデータを取得するための実際のリクエストを作成します。
ステップ4—DigitalOceanへのAPI呼び出しを行う
ディスプレイコンポーネントの準備が整い、DigitalOceanへの接続の詳細が保存され、プロキシサーバーを介して保護されたので、DigitalOceanAPIからのデータの取得を開始できます。 まず、次の強調表示されたコード行をに追加します src/App.js クラスを宣言する直前と直後 App:
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 コンストラクターの後に次のコード行を追加することによるメソッド：
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:
...
class App extends Component {
render() {
return (
<div className="App">
<Table droplets={ this.state.droplets } />
</div>
);
}
}
...
これで、APIからデータを取得する機能が作成されましたが、Webブラウザーを介してこのデータにアクセスできるようにする必要があります。 次のステップでは、テーブルコンポーネントにドロップレットデータを表示することでこれを実現します。
ステップ5—テーブルコンポーネントにドロップレットデータを表示する
ドロップレットデータをテーブルコンポーネントに転送したので、このデータをテーブルの行に対して反復処理できます。 ただし、アプリケーションは後にAPIにリクエストを送信するため App.js がマウントされている場合、 droplets 最初は空になります。 したがって、次のことを確認するためのコードも追加する必要があります droplets データを表示する前に空ではありません。 これを行うには、次の強調表示された行をに追加します tbody のセクション 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ブラウザーに表示します。
注：Webブラウザにエラーが表示された場合 http://localhost:3000、 押す CTRL+C 開発サーバーを実行しているターミナルで、アプリケーションを停止します。 次のコマンドを実行して、アプリケーションを再起動します。
- npm start
この手順では、アプリケーションのテーブルコンポーネントを変更して、ドロップレットデータをWebブラウザーに表示し、ドロップレットが見つからない場合のプレースホルダーメッセージを追加しました。 次に、フロントエンドWebフレームワークを使用してデータのスタイルを設定し、視覚的に魅力的で読みやすくします。
ステップ6—ブートストラップを使用したテーブルコンポーネントのスタイリング
これでテーブルにデータが入力されましたが、情報は最も魅力的な方法で表示されていません。 これを修正するには、プロジェクトにBootstrapを追加してアプリケーションのスタイルを設定します。 Bootstrapは、CSSテンプレートを使用してプロジェクトにレスポンシブなスタイルを追加できるオープンソースのスタイリングおよびコンポーネントライブラリです。
次のコマンドを使用して、npmでBootstrapをインストールします。
- npm install bootstrap
Bootstrapのインストールが完了したら、次の強調表示された行をに追加して、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をインポートしたので、クラスを追加して、ブートストラップスタイルをテーブルコンポーネントに適用します。 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）、ロゴファイルをという新しいディレクトリにコピーしてプロジェクトに追加します。 assets 以内 src プロジェクトのディレクトリ。 ロゴをアップロードした後、強調表示された行をに追加してヘッダーにインポートします 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ブラウザーに表示されます。
結論
この記事では、セキュリティで保護されたプロキシサーバーを介してDigitalOcean APIからデータをフェッチし、ブートストラップスタイルで表示する基本的なReactアプリケーションを作成しました。 Reactフレームワークに慣れてきたので、ここで学んだ概念を、DjangoとReactでUbuntu18.04で顧客情報を管理するための最新のWebアプリケーションを構築する方法などのより複雑なアプリケーションに適用できます。 。 DigitalOcean APIで可能な他のアクションを知りたい場合は、DigitalOceanのWebサイトにあるAPIドキュメントを参照してください。
