웹 프론트엔드 JS 튜토리얼 React와 Kubernetes를 사용하여 안정적인 컨테이너형 애플리케이션을 구축하는 방법

React와 Kubernetes를 사용하여 안정적인 컨테이너형 애플리케이션을 구축하는 방법

Sep 26, 2023 am 09:07 AM
react kubernetes 컨테이너화

React와 Kubernetes를 사용하여 안정적인 컨테이너형 애플리케이션을 구축하는 방법

React 및 Kubernetes를 사용하여 안정적인 컨테이너형 애플리케이션을 구축하는 방법

클라우드 네이티브 기술의 급속한 발전으로 컨테이너형 애플리케이션은 오늘날 소프트웨어 개발에서 뜨거운 트렌드가 되었습니다. 널리 사용되는 프런트엔드 프레임워크인 React의 유연성과 효율성으로 인해 많은 개발자가 가장 먼저 선택합니다. 이 기사에서는 React와 Kubernetes를 사용하여 안정적인 컨테이너형 애플리케이션을 구축하는 방법을 소개하고 몇 가지 구체적인 코드 예제를 제공합니다.

  1. React 앱 만들기
    먼저 기본 React 앱을 만들어야 합니다. Create React App을 사용하여 새 React 프로젝트를 초기화할 수 있습니다. 다음 명령을 사용하세요.

    1

    2

    3

    npx create-react-app my-app

    cd my-app

    npm start

    로그인 후 복사

이렇게 하면 my-app이라는 새 프로젝트가 생성되고 로컬 개발 서버가 시작됩니다. 프로젝트가 정상적으로 실행되는지 확인한 후 다음 단계를 계속할 수 있습니다.

  1. Dockerfile 작성
    React 애플리케이션을 컨테이너에 패키징하려면 Dockerfile을 생성해야 합니다. 프로젝트의 루트 디렉터리에 Dockerfile이라는 파일을 만들고 파일에 다음 콘텐츠를 추가합니다.

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    15

    16

    17

    18

    19

    20

    # 使用Node镜像作为基础镜像

    FROM node:14-alpine

     

    # 将工作目录设置为/app

    WORKDIR /app

     

    # 将package.json和package-lock.json复制到容器中

    COPY package*.json ./

     

    # 安装应用的依赖

    RUN npm install

     

    # 将项目文件复制到容器中

    COPY . ./

     

    # 构建React应用

    RUN npm run build

     

    # 在容器中运行React应用

    CMD ["npm", "start"]

    로그인 후 복사

이 Dockerfile은 React 애플리케이션의 이미지를 빌드하고 실행하는 방법을 정의합니다. Node 기반의 Alpine 이미지를 사용하고, 먼저 프로젝트의 종속성을 설치한 다음 프로젝트 파일을 컨테이너에 복사하고 컨테이너에서 React 애플리케이션을 실행합니다.

  1. Docker 이미지 빌드
    프로젝트의 루트 디렉터리에서 다음 명령을 사용하여 Docker 이미지를 빌드합니다.

    1

    docker build -t my-react-app .

    로그인 후 복사

    그러면 Dockerfile 파일의 정의에 따라 my-react-app이라는 이미지가 빌드됩니다.

  2. Kubernetes 배포 파일 만들기
    다음으로 애플리케이션을 배포하기 위한 Kubernetes 배포 파일을 만들어야 합니다. 프로젝트의 루트 디렉터리에서 배포.yaml이라는 파일을 만들고 파일에 다음 콘텐츠를 추가합니다.

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    15

    16

    17

    18

    19

    20

    21

    apiVersion: apps/v1

    kind: Deployment

    metadata:

      name: my-react-app

      labels:

     app: my-react-app

    spec:

      replicas: 1

      selector:

     matchLabels:

       app: my-react-app

      template:

     metadata:

       labels:

         app: my-react-app

     spec:

       containers:

       - name: my-react-app

         image: my-react-app

         ports:

         - containerPort: 3000

    로그인 후 복사

이 파일은 방금 만든 my-react를 사용하여 my-react-app이라는 배포를 정의합니다. -app 미러링되고 포트 3000에 노출됩니다.

  1. Kubernetes 클러스터에 애플리케이션 배포
    명령줄에서 다음 명령을 사용하여 애플리케이션을 Kubernetes 클러스터에 배포합니다.

    1

    kubectl apply -f deployment.yaml

    로그인 후 복사

    이렇게 하면 다음에 정의된 대로 Kubernetes 클러스터에 my-react라는 새 애플리케이션이 생성됩니다. 배포.yaml 파일 - 앱 배포.

  2. 앱이 제대로 실행되고 있는지 확인하세요
    다음 명령을 사용하여 앱이 제대로 실행되고 있는지 확인할 수 있습니다.

    1

    kubectl get pods

    로그인 후 복사

    모든 것이 정상이면 my-react-app이라는 이름의 Pod가 실행 중인 것을 볼 수 있습니다.

  3. 애플리케이션 액세스
    마지막으로 서비스를 통해 애플리케이션에 액세스할 수 있습니다. 프로젝트의 루트 디렉토리에서 service.yaml이라는 파일을 생성하고 파일에 다음 내용을 추가합니다.

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    apiVersion: v1

    kind: Service

    metadata:

      name: my-react-app-service

    spec:

      selector:

     app: my-react-app

      type: LoadBalancer

      ports:

     - protocol: TCP

       port: 80

       targetPort: 3000

    로그인 후 복사

    이 파일은 외부에서 사용할 수 있는 my-react-app-service라는 서비스를 정의합니다. 요청은 당사로 전달됩니다. 로드 밸런서를 통해 애플리케이션을 실행합니다.

다음 명령을 사용하여 서비스를 생성합니다.

1

kubectl apply -f service.yaml

로그인 후 복사

다음 명령을 실행하여 서비스의 외부 IP 주소를 가져옵니다.

1

kubectl get services

로그인 후 복사

마지막으로 브라우저를 사용하여 애플리케이션을 열 수 있습니다.

1

http://<EXTERNAL-IP>

로그인 후 복사

위 단계를 수행합니다. , 우리는 React와 Kubernetes를 성공적으로 활용하여 안정적인 컨테이너형 애플리케이션을 구축했습니다. React는 강력한 프런트엔드 개발 기능을 제공하고, Kubernetes는 안정적인 컨테이너 오케스트레이션 및 운영 환경을 제공합니다. 이들의 조합을 통해 우리는 컨테이너화된 애플리케이션을 쉽게 구축, 배포 및 관리할 수 있습니다.

이 기사가 여러분에게 도움이 되기를 바라며, 클라우드 네이티브 기술 개발을 계속해서 깊이 있게 배우고 탐구하는 데 도움이 되기를 바랍니다.

위 내용은 React와 Kubernetes를 사용하여 안정적인 컨테이너형 애플리케이션을 구축하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

Video Face Swap

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

뜨거운 도구

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

React Router 사용자 가이드: 프런트엔드 라우팅 제어 구현 방법 React Router 사용자 가이드: 프런트엔드 라우팅 제어 구현 방법 Sep 29, 2023 pm 05:45 PM

ReactRouter 사용자 가이드: 프런트엔드 라우팅 제어 구현 방법 단일 페이지 애플리케이션의 인기로 인해 프런트엔드 라우팅은 무시할 수 없는 중요한 부분이 되었습니다. React 생태계에서 가장 널리 사용되는 라우팅 라이브러리인 ReactRouter는 풍부한 기능과 사용하기 쉬운 API를 제공하여 프런트 엔드 라우팅 구현을 매우 간단하고 유연하게 만듭니다. 이 기사에서는 ReactRouter를 사용하는 방법을 소개하고 몇 가지 구체적인 코드 예제를 제공합니다. ReactRouter를 먼저 설치하려면 다음이 필요합니다.

C# 개발 경험 공유: 마이크로서비스 및 컨테이너화 실습 C# 개발 경험 공유: 마이크로서비스 및 컨테이너화 실습 Nov 22, 2023 am 08:44 AM

C# 개발 경험 공유: 마이크로서비스 및 컨테이너화 방식 클라우드 컴퓨팅과 분산 아키텍처의 등장으로 마이크로서비스와 컨테이너화는 현대 소프트웨어 개발에서 두 가지 뜨거운 주제가 되었습니다. 마이크로서비스 아키텍처는 개발자가 시스템 기능을 더 잘 분할하고 확장성과 유지 관리성을 향상시키는 데 도움이 될 수 있으며, 컨테이너화 기술은 신속한 배포와 탄력적인 확장을 달성할 수 있습니다. 이 문서는 C# 개발자를 대상으로 하며 마이크로서비스 및 컨테이너화 실행에 대한 몇 가지 경험과 기술을 공유합니다. 1. 마이크로서비스 아키텍처 개요 마이크로서비스 아키텍처는 애플리케이션을 일련의 작고 독립적인 부서로 분할하는 방법입니다.

PHP, Vue 및 React: 가장 적합한 프런트엔드 프레임워크를 선택하는 방법은 무엇입니까? PHP, Vue 및 React: 가장 적합한 프런트엔드 프레임워크를 선택하는 방법은 무엇입니까? Mar 15, 2024 pm 05:48 PM

PHP, Vue 및 React: 가장 적합한 프런트엔드 프레임워크를 선택하는 방법은 무엇입니까? 인터넷 기술이 지속적으로 발전함에 따라 프런트엔드 프레임워크는 웹 개발에서 중요한 역할을 합니다. PHP, Vue, React는 세 가지 대표적인 프론트엔드 프레임워크로 각각 고유한 특성과 장점을 가지고 있습니다. 사용할 프런트 엔드 프레임워크를 선택할 때 개발자는 프로젝트 요구 사항, 팀 기술 및 개인 선호도를 기반으로 정보를 바탕으로 결정을 내려야 합니다. 이 글에서는 세 가지 프론트엔드 프레임워크인 PHP, Vue, React의 특징과 용도를 비교해보겠습니다.

Java 프레임워크와 프런트엔드 React 프레임워크의 통합 Java 프레임워크와 프런트엔드 React 프레임워크의 통합 Jun 01, 2024 pm 03:16 PM

Java 프레임워크와 React 프레임워크의 통합: 단계: 백엔드 Java 프레임워크를 설정합니다. 프로젝트 구조를 만듭니다. 빌드 도구를 구성합니다. React 애플리케이션을 만듭니다. REST API 엔드포인트를 작성합니다. 통신 메커니즘을 구성합니다. 실제 사례(SpringBoot+React): Java 코드: RESTfulAPI 컨트롤러를 정의합니다. React 코드: API에서 반환된 데이터를 가져오고 표시합니다.

컨테이너화를 통해 Java 기능의 성능을 최적화하는 방법은 무엇입니까? 컨테이너화를 통해 Java 기능의 성능을 최적화하는 방법은 무엇입니까? Apr 29, 2024 pm 03:09 PM

컨테이너화는 다음과 같은 방식으로 Java 기능 성능을 향상시킵니다. 리소스 격리 - 격리된 컴퓨팅 환경을 보장하고 리소스 경합을 방지합니다. 경량 - 시스템 리소스를 덜 차지하고 런타임 성능을 향상시킵니다. 빠른 시작 - 기능 실행 지연을 줄입니다. 일관성 - 애플리케이션과 인프라를 분리하여 환경 전체에서 일관된 동작을 보장합니다.

vue.js vs. React : 프로젝트 별 고려 사항 vue.js vs. React : 프로젝트 별 고려 사항 Apr 09, 2025 am 12:01 AM

vue.js는 중소형 프로젝트 및 빠른 반복에 적합한 반면 React는 크고 복잡한 응용 프로그램에 적합합니다. 1) vue.js는 사용하기 쉽고 팀이 불충분하거나 프로젝트 규모가 작는 상황에 적합합니다. 2) React는 더 풍부한 생태계를 가지고 있으며 고성능 및 복잡한 기능적 요구가있는 프로젝트에 적합합니다.

반응에는 어떤 클로저가 있습니까? 반응에는 어떤 클로저가 있습니까? Oct 27, 2023 pm 03:11 PM

React에는 이벤트 처리 함수, useEffect 및 useCallback, 고차 구성요소 등과 같은 클로저가 있습니다. 자세한 소개: 1. 이벤트 처리 함수 클로저: React에서 컴포넌트에 이벤트 처리 함수를 정의하면 함수가 클로저를 형성하고 컴포넌트 범위 내의 상태와 속성에 액세스할 수 있습니다. 이러한 방식으로 구성 요소의 상태와 속성을 이벤트 처리 함수에서 사용하여 대화형 논리를 구현할 수 있습니다. 2. useEffect 및 useCallback 등의 클로저.

React 모바일 적응 가이드: 다양한 화면에서 프런트엔드 애플리케이션의 디스플레이 효과를 최적화하는 방법 React 모바일 적응 가이드: 다양한 화면에서 프런트엔드 애플리케이션의 디스플레이 효과를 최적화하는 방법 Sep 29, 2023 pm 04:10 PM

React 모바일 적응 가이드: 다양한 화면에서 프런트 엔드 애플리케이션의 표시 효과를 최적화하는 방법 최근 모바일 인터넷의 급속한 발전으로 인해 점점 더 많은 사용자가 휴대폰을 사용하여 웹 사이트를 탐색하고 다양한 애플리케이션을 사용하는 데 익숙해졌습니다. . 그러나 다양한 휴대폰 화면의 크기와 해상도는 매우 다양하므로 프런트엔드 개발에 특정 문제가 발생합니다. 웹사이트와 애플리케이션이 다양한 화면에서 좋은 디스플레이 효과를 가지려면 모바일 단말기에 적응하고 이에 따라 프런트엔드 코드를 최적화해야 합니다. 반응형 레이아웃 사용 반응형 레이아웃은

See all articles