다중 용기 Kubernetes 기중기를 사용하여 React 응용 프로그램에 Netlify와 유사한 배치를 구축합니다

Kubernetes 기중기는 Kubernetes를 만들고 배치할 수 있는 최소 단원으로 정의됩니다.pod를 응용 프로그램의 실례로 볼 수 있습니다.대부분의 경우, 기중기에는 용기가 하나밖에 없다.그러나 같은pod에도 여러 개의 용기가 있을 수 있다.생성된 후, 모든pod는pod에서 실행되는 용기에 접근할 수 있는 유일한 IP 주소를 얻을 수 있습니다.

You can read more about Kubernetes and other cloud-native topics on my blog.

같은 기중기에서 운행하는 모든 용기는 저장과 네트워크 공간을 공유한다.이것은 기중기 안의 용기가 localhost를 통해 서로 통신할 수 있다는 것을 의미한다.예를 들어, 다음 그림의 컨테이너는 localhost:9090 를 사용하여 두 번째 컨테이너와 대화할 수 있습니다.pod 이외의 모든 내용은 유일한pod IP와 포트 번호를 사용합니다.

네트워크 공간 공유 외에 기중기 안의 용기도 저장 공간을 공유할 수 있다.이것은 Kubernetes 볼륨을 사용하여 같은pod 내의 다른 용기 간에 데이터를 공유할 수 있음을 의미합니다.두 개의 파일을 포함하는 볼륨을 만들었다고 가정합니다: hello.txt 및 bye.txt.pod 규범에서, 볼륨을 용기에 불러오는 특정한 경로를 만들 수 있습니다.다음 그림은 위쪽 컨테이너에 마운트된 /data 폴더와 두 번째 컨테이너에 마운트된 /tmp 폴더의 두 파일을 보여 줍니다.

볼륨의 장점은pod가 붕괴되거나 재부팅되더라도PersistentVolume를 사용하여 데이터를 지속할 수 있다는 것이다.

분기 푸시 자동 업데이트

이 예에서, 나는pod에 두 개의 용기가 있는데, 그것들 사이에서 Kubernetes 볼륨을 사용하여 데이터를 공유하는 방법을 보여 드리겠습니다.내가 보여 주려는 장면은 다음과 같다. 나는 React 응용 프로그램을 개발하고 있으며, Kubernetes 집단에서 실행하기를 원한다.또한 변경 사항을 제출하고 개발 환경에서 주요 지점으로 전송할 때마다 실행 중인 React 프로그램을 업데이트하고 싶습니다.
pod 내의 메인 용기에서 Nginx Docker 이미지를 실행합니다. 유일한 목적은 index.html 파일과 응용 프로그램에 필요한 다른 파일에 서비스를 제공하는 것입니다.Nginx를 위한 index.html 및 기타 파일을 만들기 위해서는 두 번째 용기가 주요 용기의 조수로 필요합니다.
두 번째 용기 (내 이름은 builder 용기) 의 작업은 React 응용 프로그램으로 Github 저장소를 복제하고 의존항 npm install 을 설치하며 React 응용 프로그램 (npm run build 을 구축하고 구축된 파일을 Nginx 용기에서 사용할 수 있도록 하는 것이다.두 컨테이너 간에 파일을 공유하기 위해 Kubernetes 볼륨을 사용합니다.두 용기는 서로 다른 경로에서 이 볼륨을 마운트합니다. 구축기 용기는 공유 볼륨을 /build 폴더 아래에 마운트합니다. 이것은 제가 npm run build 명령을 두 번 실행한 후에 파일을 복사하는 곳입니다.이와 유사하게 Nginx 컨테이너는 /usr/share/nginx/html 경로 아래에 같은 볼륨을 불러옵니다. 이것은 Nginx가 서비스할 파일을 찾는 기본 경로입니다.작업을 단순화하기 위해 Nginx 프로필을 만들지 않았지만 쉽게 할 수 있습니다.

Kubernetes 배포 구성

Kubernetes는 두 개의 용기와 build-output 라는 볼륨을 배치하는 것이 매우 간단합니다.다음은 Nginx 컨테이너의 세그먼트를 정의하는 방법입니다.

- name: nginx
  image: nginx:alpine
  ports:
    - containerPort: 80
  volumeMounts:
    - name: build-output
      mountPath: /usr/share/nginx/html
...
volumes:
  - name: build-output
    emptyDir: {}

그것은 nginx:alpine 이미지를 사용하여 포트80를 노출하고 build-output 볼륨을 /usr/share/nginx/html 아래에 설치합니다.
구축기 용기에 대해 다른 환경 변수를 설정하고 용기 안에서 실행되는 스크립트에서 사용합니다.다음은 컨테이너의 정의입니다.

- name: builder
  image: learncloudnative/react-builder:0.1.0
  env:
    - name: GITHUB_REPO
      value: "https://github.com/peterj/kube-react.git"
    - name: POLL_INTERVAL
      value: "30"
  volumeMounts:
    - name: build-output
      mountPath: /code/build

Nginx 미러와 같이, 나는 내가 구축한 미러 이름 (아래에서 토론할 것) 을 지정하고, 두 가지 환경 변수를 설명합니다. 하나는 나의 React 응용 프로그램 원본이 있는 Github 저장소 (GITHUB_REPO 이고, 다른 변수는 POLL_INTERVAL 라고 하며, 각본 검사 저장소가 새로 제출한 빈도를 정의합니다.마지막으로, 볼륨 build-output 을 컨테이너 내의 /code/build 폴더에 마운트합니다. - 이것은 npm run build 내장 React 응용 프로그램에 쓴 폴더입니다.
생성기 용기 이미지는 node 이미지를 기반으로 합니다. - 필요하면 다른 이미지를 사용할 수 있지만 설치 노드의 문제를 처리하고 싶지 않아서 기존 노드 이미지만 사용했습니다.

FROM node

COPY . .
RUN chmod +x init.sh
RUN chmod +x build.sh

ENTRYPOINT ["/bin/bash"]
CMD ["init.sh"]

이어서 나는 두 개의 스크립트를 용기 init.sh 와 build.sh 에 복사했다.init 스크립트는 컨테이너가 시작될 때 실행되며 다음을 수행합니다.

환경 변수

를 통한 클론 Github 리셋

운영 GITHUB_REPO 종속성 설치

순환 중 호출npm install 스크립트, build.sh에 정의된 수량에 따라 휴면

스크립트를 구축하여 모든 지점을 가져오고 POLL_INTERVAL 를 사용하여 끌어와야 할 변경 사항이 있는지 확인합니다.새로운 변경 사항이 있으면 분기를 당겨 실행합니다git log.build 명령을 실행할 때 출력 폴더가 존재하지 않거나 폴더가 비어 있는 두 가지 상황이 있습니다.

Kubernetes에서 어떻게 실행합니까?

Kubernetes 클러스터가 있다고 가정하고 배포하고 사용해 보겠습니다.만약 네가 없다면, 너는 나를 볼 수 있다.
이것은 전체 YAML 파일(배포 + 서비스)입니다.여기에는 두 가지 주의사항이 있습니다. 서비스 유형을 위탁 관리 그룹에 배치하고 부하 평형기를 제공하지 않으려면 자신의 저장소로 npm run build 값을 교체하고 서비스 유형을 GITHUB_REPO 이외의 다른 유형으로 변경하십시오.

cat <<EOF | kubectl apply -f
apiVersion: apps/v1
kind: Deployment
metadata:
  name: react-app
  labels:
    app: react-app
spec:
  replicas: 1
  selector:
    matchLabels:
      app: react-app
  template:
    metadata:
      labels:
        app: react-app
    spec:
      containers:
        - name: nginx
          image: nginx:alpine
          ports:
            - containerPort: 80
          volumeMounts:
            - name: build-output
              mountPath: /usr/share/nginx/html
        - name: builder
          image: learncloudnative/react-builder:0.1.0
          imagePullPolicy: Always
          env:
            - name: GITHUB_REPO
              value: [YOUR GITHUB REPO HERE]
            - name: POLL_INTERVAL
              value: "30"
          volumeMounts:
            - name: build-output
              mountPath: /build
      volumes:
        - name: build-output
          emptyDir: {}
--------
kind: Service
apiVersion: v1
metadata:
  name: react-app
  labels:
    app: react-app
spec:
  selector:
    app: react-app
  ports:
    - port: 80
      name: http
      targetPort: 80
  type: LoadBalancer
EOF

위의 내용을 배포한 후 컨테이너의 로그를 살펴보겠습니다.

$ kubectl logs react-app-85db959d78-g4vfm -c builder -f
Cloning repo 'https://github.com/peterj/kube-react.git'
Cloning into 'code'...
Running 'npm install'
... BUNCH OF OUTPUT HERE ...
Build completed.
Sleep for 30
Detected changes: 0
Sleep for 30
...

초기 설치와 구축은 몇 분 걸리지만 LoadBalancer 을 보면 builder 를 열 수 있습니다. (로컬 기기에서 실행되는 그룹에 배치한다고 가정하면) 기본 React 프로그램이 실행되고 있는 것을 볼 수 있습니다.

이제 React 프로그램을 열고 변경할 수 있습니다. 배경을 노란색으로 변경합니다.변경 사항을 제출하고 전송한 후 Build completed. 용기의 출력을 관찰합니다.스크립트가 새 변경 사항을 감지하고 응용 프로그램을 재구성하는 것을 볼 수 있습니다.

Detected changes: 1
Pulling new changes and rebuilding ...
HEAD is now at f1fb04a wip
Updating f1fb04a..b8dbae7
Fast-forward
 src/App.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)
...

브라우저를 새로 고치면 배경색이 변경되었습니다.

결론

내가 처음에 글을 쓰기 시작했을 때, 나는 쿠베르니토스 기중기에 관한 글을 한 편 쓰려고 했다.일단 내가 다용기 장면에 대해 이야기한다면, 나는 다용기 크레인이 어떻게 작동하는지에 관한 더욱 실제적인 예를 보여 주고 싶다.여기에서 Dockerfile과 스크립트의 전체 소스 코드를 얻을 수 있습니다.