React アプリケーションを Kubernetes 上にデプロイする  

React アプリケーションを、Docker を使用して構築し、Kubernetes を使用してデプロイする

Last updated | By Rizchel Dayao

Description

React アプリケーションを Kubernetes 上にデプロイする方法を学びたいと思っている開発者を対象に、このパターンでは React と Redux フレームワークを使用して、ユーザー入力に応じた映画情報を検索するために OMDb API を呼び出します。このパターンは、Docker と Kubernetes の両方をベースに作成して実行できます。

Overview

かなりの重複が含まれるフロントエンドのアプリケーションで、複雑な状態を処理し、膨大な量のデータを扱っていませんか?

アプリケーションが上記のような状態だとしたら、React と Redux は理想的な JavaScript ライブラリーです。アプリケーションに含まれるあらゆる要素をコンポーネントごとに構造化する React では、重複を抑えなければならない場合は抽象化を使用できます。すべての状態は Redux によって処理されるため、アプリケーション内のデータを簡単に管理することができます。

開発が完了した後、世界中でそのアプリケーションを使えるようにするためには、アプリケーションをデプロイする必要があります。アプリケーションを管理してデプロイするのにふさわしいソリューションを調べると、さまざまな選択肢が出てくるはずです。選択肢があまりにも多くて、どれを選べばよいのか途方に暮れてしまうこともよくありますが、デプロイしたアプリケーションの自動化、スケーラビリティー、管理に対応できるデプロイメント・ツールを探しているとしたら、Kubernetes はまさにぴったりのツールです。

Kubernetes 上にデプロイするアプリケーションは、コンテナーにパッケージ化されていなければなりません。アプリケーションをコンテナーにパッケージ化するには、オープンソース・ツールの Docker を使用できます。Docker でコンテナー化したアプリケーションを Kubernetes 上にデプロイして公開した後は、Kubernetes がデプロイ済みアプリケーションの管理、スケーラビリティー、自動化を引き受けてくれます。

このコード・パターンをひと通り完了すると、以下の方法がわかるようになります。

  • Docker を使用して React アプリケーションをコンテナー化する
  • Kubernetes を使用してアプリケーションをデプロイおよび管理する

Flow

  1. ユーザーが Web インターフェースを使用して React アプリケーションにアクセスし、映画のタイトルを入力します。
  2. アクセス中のユーザーに React アプリケーションがレンダリングされます。
  3. React アプリケーションが OMDb API を呼び出し、レスポンスの JSON オブジェクトを受け取って、ユーザーに表示します。

Instructions

このパターンの詳細な手順については、README を参照してください。手順の概要は以下のとおりです。

  1. OMDb API に API キーを挿入します。
  2. Docker を使用してアプリケーションをコンテナー化します。
  3. Kubernetes クラスターを作成します。
  4. クラウド内で Docker イメージをビルドします。
  5. 作成した Docker イメージを Kubernetes にデプロイします。

Related Blogs

Call for Code 2019 応募に向けて個別オンライン相談会の予約受付開始

皆さん、こんにちは。IBM デベロッパーアドボケイト戸倉彩です。 グローバルハッカソンは目標をもって仲間と一緒 […]

続けて読む Call for Code 2019 応募に向けて個別オンライン相談会の予約受付開始

Related Links

React

React is a declarative, efficient, and flexible JavaScript library for building user interfaces. Learn more about React.

Redux

Read how you can use Redux with React.

Docker

Read all about this popular containerization program.

Kubernetes

Learn more about this Container Orchestration technology.