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 중국어 웹사이트의 기타 관련 기사를 참조하세요!