Cara membina aplikasi bahagian hadapan kontena berskala menggunakan React dan Kubernetes

Cara membina aplikasi bahagian hadapan kontena berskala menggunakan React dan Kubernetes

Dengan pembangunan pembangunan perisian moden, kontena telah menjadi kaedah penggunaan yang popular. Sebagai rangka kerja pembangunan bahagian hadapan yang popular, React juga digunakan secara meluas. Artikel ini akan memperkenalkan cara menggunakan React dan Kubernetes untuk membina aplikasi bahagian hadapan kontena boleh skala dan memberikan contoh kod khusus.

1 Buat aplikasi React

Pertama, kita perlu mencipta aplikasi React. Gunakan arahan npx untuk mencipta aplikasi React baharu.

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

2. Tulis Dockerfile

Seterusnya, kita perlu menulis Dockerfile untuk membina bekas kita. Cipta fail bernama Dockerfile dalam direktori root projek dan tambah kandungan berikut:

# 使用官方的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. Bina dan tolak imej Docker

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

4. Buat Deployment Kubernetes

Buat fail bernama deployment.yaml dan Tambah kandungan berikut:

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

Kemudian gunakan arahan kubectl untuk mencipta Deployment:

kubectl create -f deployment.yaml

5. Buat Perkhidmatan Kubernetes

Buat fail bernama service.yaml dan tambah kandungan berikut:

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

Kemudian gunakan arahan kubectl untuk mencipta kubectl Perkhidmatan ：

kubectl create -f service.yaml

6. Akses aplikasi

Gunakan arahan kubectl untuk mendapatkan alamat IP Luaran Perkhidmatan:

kubectl get services

Kemudian akses alamat dalam penyemak imbas untuk melihat aplikasi React digunakan pada Kubernetes.

Ringkasan

Artikel ini memperkenalkan cara menggunakan React dan Kubernetes untuk membina aplikasi bahagian hadapan dalam bekas berskala. Dengan membungkus aplikasi React ke dalam imej Docker dan menggunakan Kubernetes untuk penggunaan dan pengurusan, kebolehskalaan aplikasi dan ketersediaan tinggi boleh dicapai. Semoga artikel ini dapat membantu anda.

Atas ialah kandungan terperinci Cara membina aplikasi bahagian hadapan kontena berskala menggunakan React dan Kubernetes. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!