ホームページ > ウェブフロントエンド > jsチュートリアル > React と Kubernetes を使用して信頼性の高いコンテナ化アプリケーションを構築する方法

React と Kubernetes を使用して信頼性の高いコンテナ化アプリケーションを構築する方法

WBOY
リリース: 2023-09-26 09:07:41
オリジナル
1467 人が閲覧しました

React と Kubernetes を使用して信頼性の高いコンテナ化アプリケーションを構築する方法

React と Kubernetes を使用して信頼性の高いコンテナ化アプリケーションを構築する方法

クラウド ネイティブ テクノロジの急速な発展に伴い、コンテナ化アプリケーションは今日のソフトウェア開発における注目のトレンドになっています。人気のあるフロントエンド フレームワークである React は、その柔軟性と効率性により、多くの開発者にとって最初の選択肢となっています。この記事では、React と Kubernetes を使用して信頼性の高いコンテナ化アプリケーションを構築する方法を紹介し、いくつかの具体的なコード例を示します。

  1. React アプリケーションの作成
    まず、基本的な React アプリケーションを作成する必要があります。 Create React App を使用して、新しい React プロジェクトを初期化できます。次のコマンドを使用します。

    npx create-react-app my-app
    cd my-app
    npm start
    ログイン後にコピー

これにより、my-app という新しいプロジェクトが作成され、ローカル開発サーバーが起動します。プロジェクトが正常に実行できることを確認したら、次のステップに進むことができます。

  1. Dockerfile の作成
    React アプリケーションをコンテナーにパッケージ化するには、Dockerfile を作成する必要があります。プロジェクトのルート ディレクトリで、Dockerfile というファイルを作成し、次の内容をファイルに追加します。

    # 使用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 イメージを構築します:

    docker build -t my-react-app .
    ログイン後にコピー

    これにより、名前付きの Docker イメージが構築されます。 Dockerfile ファイルの定義に基づいており、my-react-app のミラーです。

  2. Kubernetes デプロイメント ファイルの作成
    次に、アプリケーションをデプロイするための Kubernetes デプロイメント ファイルを作成する必要があります。プロジェクトのルート ディレクトリで、deployment.yaml というファイルを作成し、次の内容をファイルに追加します。

    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 というファイルを定義します。 app では、先ほど構築した my-react-app イメージを使用し、ポート 3000 に公開します。

  1. アプリケーションを Kubernetes クラスターにデプロイする
    コマンド ラインで次のコマンドを使用して、アプリケーションを Kubernetes クラスターにデプロイします:

    kubectl apply -f deployment.yaml
    ログイン後にコピー

    これは次のようになります。 deployment.yaml ファイルの定義に基づいて、Kubernetes クラスターに my-react-app という名前のデプロイメントを作成します。

  2. アプリが適切に実行されていることを確認します
    次のコマンドを使用して、アプリが適切に実行されていることを確認できます:

    kubectl get pods
    ログイン後にコピー

    すべてが正常な場合は、 「my-react-app's Pod is running」という名前のメッセージを確認してください。

  3. アプリケーションへのアクセス
    最後に、サービスを通じてアプリケーションにアクセスできます。プロジェクトのルート ディレクトリで、service.yaml という名前のファイルを作成し、次の内容をファイルに追加します。

    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 という名前のサービスを定義します。外部リクエストは転送できます。ロードバランサーを介してアプリケーションに送信されます。

次のコマンドを使用してサービスを作成します。

kubectl apply -f service.yaml
ログイン後にコピー

次のコマンドを実行して、サービスの外部 IP アドレスを取得します。

kubectl get services
ログイン後にコピー

最後に、ブラウザを使用してアプリケーションを開くことができます :

http://<EXTERNAL-IP>
ログイン後にコピー

上記の手順を通じて、React と Kubernetes を使用して信頼性の高いコンテナ化されたアプリケーションを構築することに成功しました。 React は強力なフロントエンド開発機能を提供し、Kubernetes は信頼性の高いコンテナ オーケストレーションとオペレーティング環境を提供します。これらを組み合わせることで、コンテナ化されたアプリケーションを簡単に構築、デプロイ、管理できるようになります。

この記事が皆様のお役に立てば幸いです。また、クラウド ネイティブ テクノロジの開発をさらに深く研究し続けることをお勧めします。

以上がReact と Kubernetes を使用して信頼性の高いコンテナ化アプリケーションを構築する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート