Kubernetes(k8s)を学ぼう3! Networking編 – Reactの導入 –

こんにちは。KOUKIです。k8s学習中のWebエンジニアです。

前回は、Networkingを学ぶため、3つのAPIのDeploymentやServiceの作成を行い、Pod間通信を確認しました。

今回は、JavaScriiptのライブラリである「React」を導入して、UI画面を作成し、Nginxを介してAPIにアクセスしたいと思います。

React環境の構築

Reactの環境をまず整えてください。必要なことは、次の記事に記載しています。

MacでHomebrewをインストールしている場合は、以下のコマンドで一発です。

ReactAppの生成

Reactの開発環境が整ったら、terminal上で「create-react-app」を実行してください。

ファイル準備

アプリ作成に必要なファイルを準備します。

package.json

nginx.conf

これは、nginxの設定ファイルです。

Dockerfile

Dockerファイルも作成しておきます。

「npm run build」を実行するとfrontendフォルダ配下に「build」フォルダが生成されます。そこにはReactアプリをビルドしたファイルが保存されているので、nginxの公開ディレクトリ(/usr/share/nginx/html)に渡すことで、Nginxからページを表示できるようになります。

これは、勉強になりますね。

App.css

App.js

ここには、一つ注意点があります。fetchのURLには、「minikube service tasks-service」を実行して得たアドレスを入力してください。

index.js

index.css

NewTask.js

NetTask.css

TaskList.js

TaskList.css

アプリ表示

ここまで実装すると以下のようになります。

ようやく下準備が完了しました。

Pod化

先ほど作成したfrontendアプリをPod化していきます。

Docker Hubのレポジトリ作成

以下の名前でレポジトリを作成してください。

  • <Docker Hubのアカウント名>/kub-demo-frontend

Docker HubへPush

minikube上でk8sを動かしているので、ローカルからDocker ImageをPullすることができません。そのため、Docker HubにDocker ImageをPushする必要があります。

Deploymentの作成

kubernetesフォルダ配下に「frontend-deplyment.yml」を作成しましょう。

Serviceの作成

続いて、Serviceを作成しましょう。

DeploymentとServiceの作成

次のコマンドで、DeploymentとServiceを作成します。

動作確認

次のコマンドで、frontendアプリを起動します。

データを送信してみましょう。

OKですね。

Nginxのリバースプロキシ

Nginxのリバースプロキシ設定も使ってみましょう。nginx.confに/apiロケーションを追加します。

上記は、/apiへアクセスしたら「tasksのドメイン」にリクエストされる設定です。

前回やりましたが、k8sは自動的にドメインを作成してくれます。「サービス名.ネームスペース」で取得できます。

また、App.jsのfetchに指定していたURLを以下のように変更します。

ビルドをしなおします。

これで通信ができるはずです。

おわりに

Networking編はこれで完了です。お疲れ様でした^^

記事まとめ

コメントを残す