Kubernetes에 React 어플리케이션을 배포하는 5가지 간단한 단계

14335 단어 reactkubernetesdockertutorial
Kubernetes는 현재 클라우드에 응용 프로그램을 배치하는 사실 표준입니다.모든 주요 클라우드 제공 업체는 Kubernetes 집단에 응용 프로그램을 배치하기 위해 전문적인 Kubernetes 서비스(예를 들어 Google cloud with GKE, AWS with EKS 등)를 제공한다.
Kubernetes를 선택하여 React 응용 프로그램을 배포하는 데는 여러 가지 이유가 있습니다.
  • 크로스 클라우드 공급업체의 통합 및 표준화 배치 모델
  • 여러 용기를 배포할 때 다운타임에 대한 루팡성(수평 확장)
  • 자동 배율을 통해 최대 트래픽 처리
  • 무중단 배포, 카나리아 배포 등
  • 간단한 A/B 테스트
    • 본고에서, 나는 다섯 가지 간단한 절차를 통해React 응용 프로그램을 Kubernetes 집단에 배치하는 방법을 보여 줄 것이다.이 글을 읽으려면 기본적인 Docker 지식만 필요합니다.
    우리는 모두 새로운 주제를 배울 때 빠른 피드백을 얻기를 원하기 때문에, 나는 로컬 Kubernetes 집단을 예로 사용할 것이다.컴퓨터에 Kubernetes를 지원하는 Docker 엔진이 설치되어 있다면, 몇 분 안에 이 로컬 Kubernetes 그룹을 시작할 수 있습니다.이는 버전 18.06.0부터 Docker Desktop forWindows/Mac에 적용됩니다.
    우리 시작합시다...

    1단계: React 응용 프로그램 만들기


    먼저 Facebook 생성된 create-react-app부터 시작합니다.
    ➜ node -v
v10.16.0
➜ npm -v
6.9.0
➜ npx create-react-app react-app-kubernetes
npx: installed 91 in 5.787s

Creating a new React app in /Users/rieckpil/Desktop/react-app-kubernetes.

Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts...

...

Happy hacking!
    이것은 새 React 응용 프로그램 개발을 시작하기 위해 필요한 모든 설정과 파일을 만들 것입니다.
    로컬 시스템http://localhost:3000에서 React 응용 프로그램을 시작하고 액세스하려면 npm start 을 사용하십시오.다음 장에서 React 응용 프로그램의 최적화된 생산 구축이 필요합니다. 이 응용 프로그램은 다음과 같습니다.
    ➜ npm run-script build
> [email protected] build /Users/rieckpil/Desktop/junk/react-app-kubernetes
> react-scripts build

Creating an optimized production build...
Compiled successfully.

File sizes after gzip:

  36.44 KB  build/static/js/2.b41502e9.chunk.js
  762 B     build/static/js/runtime~main.a8a9905a.js
  602 B     build/static/js/main.28647029.chunk.js
  517 B     build/static/css/main.2cce8147.chunk.css

...
    기존 React 응용 프로그램이 있다면, 이 섹션을 건너뛰고 다음 섹션을 계속할 수 있습니다.응용 프로그램의 생산 버전이 build/ 에 있는지 확인하십시오.

    2단계: React 응용 프로그램 Dockerize


    React 응용 프로그램을 Kubernetes에 배치하기 위해서 용기에 포장해야 합니다.Kubernetes는 여러 컨테이너 엔진을 지원하지만 Docker는 현재 가장 많이 사용되고 있습니다.
    Docker 컨테이너를 만들려면 React 응용 프로그램 폴더의 루트 레벨Dockerfile을 사용해야 합니다.이 파일은 사용하는 운영체제, 설정 방식, 그리고 이 용기에서 실행되는 다른 응용 프로그램을 정의합니다.
    이 예에서 React 응용 프로그램의 내용을 제공하기 위해 nginx 을 사용합니다. 가장 간단한 Dockerfile 은 다음과 같습니다.
    FROM nginx:1.17
COPY build/ /usr/share/nginx/html
    우리의 Docker 용기는 공식 nginx:1.17 Docker 이미지의 모든 내용을 계승하고 React 생산 구축만 용기에 복사합니다.
    Docker 컨테이너 작성을 가속화하려면 프로젝트에 추가.dockerignore를 확인하여 제외node_modules를 Docker 컨텍스트로 전송합니다.
    node_modules
    React 프로덕션 구축이 완료되면 Docker 엔진을 시작하고 다음 명령을 실행하여 Docker 이미지를 생성합니다.
    ➜ docker build -t my-react-app .
Step 1/2 : FROM nginx:1.17
1.17: Pulling from library/nginx
fc7181108d40: Pull complete
d2e987ca2267: Pull complete
0b760b431b11: Pull complete
Digest: sha256:96fb261b66270b900ea5a2c17a26abbfabe95506e73c3a3c65869a6dbe83223a
Status: Downloaded newer image for nginx:1.17
 ---> f68d6e55e065
Step 2/2 : COPY build/ /usr/share/nginx/html
 ---> 35d48f28a918
Successfully built 35d48f28a918
Successfully tagged my-react-app:latest
    생산에 더 적합한 Docker 용기에 대해서는 필요에 따라 nginx 설정을 사용자 정의해야 합니다.

    3단계: Kubernetes 클러스터에 연결


    로컬 Kubernetes 클러스터를 시작하려면 Docker 데스크톱 기본 설정을 열고 Kubernetes 탭으로 전환합니다.

    여기서 Kubernetes 지원을 사용할 수 있습니다.처음 활성화하는 경우 클러스터를 만드는 데 시간이 걸릴 수 있습니다. 백그라운드에서 여러 Docker 이미지를 다운로드하기 때문입니다.
    로컬 Kubernetes 클러스터가 실행되면 kubectl 를 통해 연결됩니다(없는 경우 다운로드 here:
    ➜ kubectl config use-context docker-for-desktop
Switched to context "docker-for-desktop".
➜ kubectl get nodes
NAME                 STATUS    ROLES     AGE       VERSION
docker-for-desktop   Ready     master    3d        v1.10.11
➜ kubectl cluster-info
Kubernetes master is running at https://localhost:6443
KubeDNS is running at https://localhost:6443/api/v1/namespaces/kube-system/services/kube-dns:dns/proxy

To further debug and diagnose cluster problems, use 'kubectl cluster-info dump'.
    Docker Desktop의 Kubernetes 지원이 있으면 로컬 단일 노드 그룹을 얻을 수 있습니다. 이것은 평가와 학습에 매우 좋습니다.
    React 응용 프로그램을 클라우드의 Kubernetes 클러스터에 배치하려면 여기서부터 시작하십시오.
  • 구글 Kubernetes 엔진(GKE)quickstart
  • Azure Kubernetes 엔진(AKS)quickstart
  • AWS Kubernetes 엔진(EKS)quickstart
  • Kubernetes(OKE)용 Oracle 컨테이너 엔진quickstart

    • 4단계: 컨테이너 레지스트리에 Docker 이미지 업로드


    Kubernetes 클러스터에서 Docker 이미지를 추출하려면 Docker 레지스트리에 이미지를 업로드해야 합니다.클라우드 배치에 대해 클라우드 공급업체로부터 이미지를 업로드할 수 있는 전용 등록표를 얻을 수 있습니다.응용 프로그램을 로컬 클러스터에 배치할 때 로컬 Docker 레지스트리가 필요합니다.
    다음 문장을 사용하여 로컬 Docker 레지스트리를 작성할 수 있습니다.
    ➜ docker run -d -p 5000:5000 --restart=always --name registry registry:2
    이전에 만든 React Docker 이미지를 업로드하려면 호스트 이름과 레지스트리 포트를 이미지에 표시해야 합니다.
    ➜ docker tag my-react-app localhost:5000/my-react-app
    이제 드디어 Docker 레지스트리로 이미지를 전송할 수 있습니다.
    ➜ docker push localhost:5000/my-react-app
The push refers to repository [localhost:5000/my-react-app]
9d9745936581: Pushed
d2f0b6dea592: Pushed
197c666de9dd: Pushed
cf5b3c6798f7: Pushed
latest: digest: sha256:66c94bdba6b06d1964a764cd14dc97d8adf202b02ab6e6fbd10b23ad4a8554a1 size: 1158
    이제 Kubernetes 클러스터에 애플리케이션을 배포할 예정입니다.

    단계 5: React 애플리케이션 배포


    일반적으로 각 Kubernetes 객체(service, pod, deployment 등은 .yaml 파일에 설명되어 있지만 .json 역시 가능합니다.
    React 응용 프로그램을 Kubernetes에 배치하기 위해서는 이른바 deployment 이 필요합니다.이 Kubernetes 실체는 응용 프로그램이 우리가 정의한 가능한 한 많은 복사본 (병렬pod) 을 가지고 있는지 확인합니다.또한 사용할 Docker 이미지, 사용할 포트 및 응용 프로그램의 추가 메타데이터를 정의할 수 있습니다.
    kind: Deployment
apiVersion: apps/v1
metadata:
  name: my-react-app
spec:
  replicas: 2
  selector:
    matchLabels:
      app: my-react-app
  template:
    metadata:
      labels:
        app: my-react-app
    spec:
      containers:
        - name: my-react-app
          image: localhost:5000/my-react-app
          imagePullPolicy: Always
          ports:
            - containerPort: 80
      restartPolicy: Always
    deployment만 외부에서 응용 프로그램에 접근할 수 없습니다.Kubernetes는 응용 프로그램을 공개하기 위해 이른바 service 을 제공했다.service를 사용하면 클러스터/외부에 공개할 포트를 정의할 수 있습니다.
    Kuberntesservice는 몇 가지 다른 유형이 있습니다. 저는 가장 간단한 것을 예로 선택합니다: NodePort.이러한 유형은 Kubernetes 클러스터의 각 노드에 정의된 포트 (로컬 Kubernetes 클러스터의 경우 하나의 노드) 를 공개하고 응용 프로그램의 포트에 매핑합니다.
    kind: Service
apiVersion: v1
metadata:
  name: my-react-app
spec:
  type: NodePort
  ports:
    - port: 80
      targetPort: 80
      protocol: TCP
      nodePort: 31000
  selector:
    app: my-react-app
    service 및 deployment 는 단일 .yaml 파일에 추가하고 --- 를 사용하여 분리할 수 있습니다.예제에서 이 두 파일을 저장하기 위해 deployment.yaml 파일을 만들었습니다.
    kind: Deployment
apiVersion: apps/v1
# more ...
---
kind: Service
apiVersion: v1
# more ...
    이제 이 파일을 사용하여 Kubernetes에 애플리케이션을 배포할 수 있습니다.
    ➜ kubectl apply -f deployment.yaml
deployment.apps "my-react-app" created
service "my-react-app" created
    다음 도구를 사용하여 모든 것이 제대로 작동하는지 확인할 수 있습니다.
    ➜ kubectl get pods
NAME                            READY     STATUS    RESTARTS   AGE
my-react-app-6c8b5c4759-fgb2q   1/1       Running   0          7m
my-react-app-6c8b5c4759-jrzzj   1/1       Running   0          7m
➜ kubectl get deployment
NAME           DESIRED   CURRENT   UP-TO-DATE   AVAILABLE   AGE
my-react-app   2         2         2            2           7m
➜ kubectl get service
NAME           TYPE        CLUSTER-IP      EXTERNAL-IP   PORT(S)        AGE
kubernetes     ClusterIP   10.96.0.1       <none>        443/TCP        3d
my-react-app   NodePort    10.99.224.141   <none>        80:31000/TCP   7m
    모든 것이 준비되고 실행되면 컴퓨터에서 http://localhost:31000 를 방문하십시오. 이 프로그램은 현재 Kubernetes 그룹에서 제공합니다.

    Kubernetes 클러스터에서 React 응용 프로그램을 제거하려면 실행
    ➜ kubectl delete service,deployment my-react-app
service "my-react-app" deleted
deployment.extensions "my-react-app" deleted
    이 예시의 전체 코드 라이브러리를 GitHub 에서 찾을 수 있습니다.
    더 많은 React 관련 게시물을 보려면 다음을 방문하십시오blog:
  • Preview PDF files with React
  • MicroProfile JWT Authentication with Keycloak and React
  • Up- and download files with React and Spring Boot
    • Kubernetes에 React 응용 프로그램을 배포할 때 즐겁게 놀았습니다.
    필
    text
    publish_subscribe

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage