フロントエンド Vue プロジェクトを Kubernetes クラスターにデプロイする方法について説明します。

Kubernetes (略して K8s) は、コンテナ化されたアプリケーションのデプロイ、実行、管理に使用される、自動コンテナ操作用のプラットフォームです。 Kubernetes はコンテナを簡単に拡張できるため、アプリケーションのデプロイがより簡単かつ効率的になります。ここでは、フロントエンド Vue プロジェクトを Kubernetes クラスターにデプロイする方法を見ていきます。

1. Vue プロジェクトの準備

デプロイの準備をする前に、まず Vue プロジェクトを転送し、Docker イメージにパッケージ化する必要があります。ここでは、Vue プロジェクトの準備ができていることを前提としています。

2. Docker イメージの作成

Docker を使用して、Vue プロジェクトを Docker イメージにパッケージ化します。まず、Docker イメージを構築するための一連の手順が含まれる Dockerfile を作成する必要があります。以下は Dockerfile のサンプルです:

# Base image
FROM nginx:1.17.6

# Copy the default nginx.conf
COPY nginx.conf /etc/nginx/nginx.conf

# Copy the built files
COPY dist /usr/share/nginx/html

# Expose port 80
EXPOSE 80

その中でベースイメージとして NGINX を使用し、ビルドされた Vue プロジェクト ファイルを NGINX の html ディレクトリにコピーします。最後に、パブリック ポート 80 で公開します。

3. Docker イメージを Docker Hub にプッシュする

Docker イメージを Kubernetes クラスターにアップロードするには、Docker イメージを Docker Hub レジストリのプライベート リポジトリにプッシュする必要があります。こうすることで、Kubernetes はコンテナーをデプロイするときにそれを使用できます。

4. Kubernetes デプロイメントの作成

次のステップでは、デプロイするポッド (1 つ以上の Docker コンテナの組み合わせ) を定義する Kubernetes デプロイメント オブジェクトを作成します。以下は、Kubernetes Deployment 構成ファイルの例です:

apiVersion: apps/v1
kind: Deployment
metadata:
  name: my-vue-app
spec:
  replicas: 3
  selector:
    matchLabels:
      app: my-vue-app
  template:
    metadata:
      labels:
        app: my-vue-app
    spec:
      containers:
      - name: my-vue-app
        image: my_username/my-vue-app:latest
        ports:
        - containerPort: 80

その中で、3 つのポッドを持つ Deployment オブジェクトを定義します。次に、ラベル app=my-vue-app を持つポッドを選択し、コンテナ ポート 80 でコンテナ イメージを構成します。

5. Kubernetes サービスの作成

最後に、Vue アプリケーションに外部からアクセスできるように、Kubernetes サービスを作成する必要があります。 Kubernetes Service 構成ファイルの例を次に示します。

kind: Service
apiVersion: v1
metadata:
  name: my-vue-app-service
spec:
  selector:
    app: my-vue-app
  ports:
  - protocol: TCP
    port: 80
    targetPort: 80
  type: LoadBalancer

「LoadBalancer」サービス タイプを使用します。これにより、外部ロード バランサー (AWS ELB など) が自動的に作成されます。

6. デプロイメントを完了する

Kubernetes デプロイメント オブジェクトとサービス オブジェクトをデプロイすると、Vue アプリケーションが Kubernetes クラスター内で起動して実行されるようになります。アプリケーションにアクセスするには、ロード バランサーの IP アドレスでブラウザを開き、ポート 80 を入力します。

概要:

この記事を通じて、Vue プロジェクトを Kubernetes クラスターにデプロイする方法を学びました。 Docker と Kubernetes を使用すると、高可用性とパフォーマンスを維持しながら、Vue アプリケーションを簡単にデプロイおよび拡張できます。

以上がフロントエンド Vue プロジェクトを Kubernetes クラスターにデプロイする方法について説明します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。