React と Kubernetes を使用してスケーラブルなコンテナ化されたフロントエンド アプリケーションを構築する方法

React と Kubernetes を使用してスケーラブルなコンテナ化されたフロントエンド アプリケーションを構築する方法

最新のソフトウェア開発の発展に伴い、コンテナ化は一般的な展開方法になりました。人気のあるフロントエンド開発フレームワークとして、React も広く使用されています。この記事では、React と Kubernetes を使用してスケーラブルなコンテナ化されたフロントエンド アプリケーションを構築する方法を紹介し、具体的なコード例を示します。

1. React アプリケーションの作成

まず、React アプリケーションを作成する必要があります。 npx コマンドを使用して、新しい React アプリケーションを作成します。

npx create-react-app my-app
cd my-app

2. Dockerfile の作成

次に、コンテナを構築するために Dockerfile を作成する必要があります。プロジェクトのルート ディレクトリに Dockerfile という名前のファイルを作成し、次の内容を追加します:

# 使用官方的Node镜像
FROM node:12-alpine

# 设置工作目录
WORKDIR /app

# 复制package.json和package-lock.json到工作目录
COPY package*.json ./

# 安装依赖
RUN npm install

# 复制所有文件到工作目录
COPY . .

# 构建项目
RUN npm run build

# 设置容器的默认命令
CMD [ "npm", "start" ]

3. Docker イメージをビルドしてプッシュします

docker build -t my-app .
docker tag my-app username/my-app
docker push username/my-app

4. Kubernetes デプロイメントを作成します

deployment.yaml という名前のファイルを作成し、次の内容を追加します:

apiVersion: apps/v1
kind: Deployment
metadata:
  name: my-app-deployment
spec:
  replicas: 3
  selector:
    matchLabels:
      app: my-app
  template:
    metadata:
      labels:
        app: my-app
    spec:
      containers:
      - name: my-app-container
        image: username/my-app
        ports:
        - containerPort: 3000

次に、kubectl コマンドを使用してデプロイメントを作成します:

kubectl create -f deployment.yaml

5. Kubernetes サービスを作成します

service.yaml という名前のファイルを作成し、次の内容を追加します。

apiVersion: v1
kind: Service
metadata:
  name: my-app-service
spec:
  selector:
    app: my-app
  ports:
    - protocol: TCP
      port: 80
      targetPort: 3000
  type: LoadBalancer

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

kubectl create -f service.yaml

6. アプリケーションにアクセスします。

kubectl コマンドを使用してサービスの外部 IP アドレスを取得します:

kubectl get services

次に、ブラウザーでアドレスにアクセスして、Kubernetes にデプロイされた React アプリケーションを確認します。

概要

この記事では、React と Kubernetes を使用して、スケーラブルなコンテナ化されたフロントエンド アプリケーションを構築する方法を紹介します。 React アプリケーションを Docker イメージにパッケージ化し、デプロイと管理に Kubernetes を使用することで、アプリケーションのスケーラビリティと高可用性を実現できます。この記事があなたのお役に立てば幸いです。

以上がReact と Kubernetes を使用してスケーラブルなコンテナ化されたフロントエンド アプリケーションを構築する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。