React と Kubernetes を使用して信頼性の高いコンテナ化アプリケーションを構築する方法-jsチュートリアル-php.cn

React と Kubernetes を使用して信頼性の高いコンテナ化アプリケーションを構築する方法

WBOY

リリース： 2023-09-26 09:07:41

オリジナル

1365 人が閲覧しました

React と Kubernetes を使用して信頼性の高いコンテナ化アプリケーションを構築する方法

クラウドネイティブテクノロジの急速な発展に伴い、コンテナ化アプリケーションは今日のソフトウェア開発における注目のトレンドになっています。人気のあるフロントエンドフレームワークである React は、その柔軟性と効率性により、多くの開発者にとって最初の選択肢となっています。この記事では、React と Kubernetes を使用して信頼性の高いコンテナ化アプリケーションを構築する方法を紹介し、いくつかの具体的なコード例を示します。

React アプリケーションの作成
まず、基本的な React アプリケーションを作成する必要があります。 Create React App を使用して、新しい React プロジェクトを初期化できます。次のコマンドを使用します。
```
npx create-react-app my-app
cd my-app
npm start
```
ログイン後にコピー

これにより、my-app という新しいプロジェクトが作成され、ローカル開発サーバーが起動します。プロジェクトが正常に実行できることを確認したら、次のステップに進むことができます。

Dockerfile の作成
React アプリケーションをコンテナーにパッケージ化するには、Dockerfile を作成する必要があります。プロジェクトのルートディレクトリで、Dockerfile というファイルを作成し、次の内容をファイルに追加します。

# 使用Node镜像作为基础镜像
FROM node:14-alpine

# 将工作目录设置为/app
WORKDIR /app

# 将package.json和package-lock.json复制到容器中
COPY package*.json ./

# 安装应用的依赖
RUN npm install

# 将项目文件复制到容器中
COPY . ./

# 构建React应用
RUN npm run build

# 在容器中运行React应用
CMD ["npm", "start"]

ログイン後にコピー

この Dockerfile は、React アプリケーションのイメージをビルドして実行する方法を定義します。 Node に基づいた Alpine イメージを使用し、最初にプロジェクトの依存関係をインストールし、次にプロジェクトファイルをコンテナーにコピーして、コンテナー内で React アプリケーションを実行します。

Docker イメージの構築
プロジェクトのルートディレクトリで、次のコマンドを使用して Docker イメージを構築します:
```
docker build -t my-react-app .
```
ログイン後にコピー
これにより、名前付きの Docker イメージが構築されます。 Dockerfile ファイルの定義に基づいており、my-react-app のミラーです。
Kubernetes デプロイメントファイルの作成
次に、アプリケーションをデプロイするための Kubernetes デプロイメントファイルを作成する必要があります。プロジェクトのルートディレクトリで、deployment.yaml というファイルを作成し、次の内容をファイルに追加します。
```
apiVersion: apps/v1
kind: Deployment
metadata:
  name: my-react-app
  labels:
 app: my-react-app
spec:
  replicas: 1
  selector:
 matchLabels:
   app: my-react-app
  template:
 metadata:
   labels:
     app: my-react-app
 spec:
   containers:
   - name: my-react-app
     image: my-react-app
     ports:
     - containerPort: 3000
```
ログイン後にコピー

このファイルは、my-react というファイルを定義します。 app では、先ほど構築した my-react-app イメージを使用し、ポート 3000 に公開します。

アプリケーションを Kubernetes クラスターにデプロイする
コマンドラインで次のコマンドを使用して、アプリケーションを Kubernetes クラスターにデプロイします:
```
kubectl apply -f deployment.yaml
```
ログイン後にコピー
これは次のようになります。 deployment.yaml ファイルの定義に基づいて、Kubernetes クラスターに my-react-app という名前のデプロイメントを作成します。
アプリが適切に実行されていることを確認します
次のコマンドを使用して、アプリが適切に実行されていることを確認できます:
```
kubectl get pods
```
ログイン後にコピー
すべてが正常な場合は、「my-react-app's Pod is running」という名前のメッセージを確認してください。
アプリケーションへのアクセス
最後に、サービスを通じてアプリケーションにアクセスできます。プロジェクトのルートディレクトリで、service.yaml という名前のファイルを作成し、次の内容をファイルに追加します。
```
apiVersion: v1
kind: Service
metadata:
  name: my-react-app-service
spec:
  selector:
 app: my-react-app
  type: LoadBalancer
  ports:
 - protocol: TCP
   port: 80
   targetPort: 3000
```
ログイン後にコピー
このファイルは、my-react-app-service という名前のサービスを定義します。外部リクエストは転送できます。ロードバランサーを介してアプリケーションに送信されます。

次のコマンドを使用してサービスを作成します。

kubectl apply -f service.yaml

ログイン後にコピー

次のコマンドを実行して、サービスの外部 IP アドレスを取得します。

kubectl get services

ログイン後にコピー

最後に、ブラウザを使用してアプリケーションを開くことができます :

http://<EXTERNAL-IP>

ログイン後にコピー

上記の手順を通じて、React と Kubernetes を使用して信頼性の高いコンテナ化されたアプリケーションを構築することに成功しました。 React は強力なフロントエンド開発機能を提供し、Kubernetes は信頼性の高いコンテナオーケストレーションとオペレーティング環境を提供します。これらを組み合わせることで、コンテナ化されたアプリケーションを簡単に構築、デプロイ、管理できるようになります。

この記事が皆様のお役に立てば幸いです。また、クラウドネイティブテクノロジの開発をさらに深く研究し続けることをお勧めします。

以上がReact と Kubernetes を使用して信頼性の高いコンテナ化アプリケーションを構築する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。