Deploy React app to GKE using PULUMI

Deploy React app to GKE using PULUMI

ยท

2 min read

Kubernetes, Docker, React, GCP, Pulumi

Build and Push Docker Image

  • Build Docker image for our react todo list application.

    •   docker build -t us.gcr.io/$GCP_PROJECT_ID/react-todolist-app .
      
  • Push the image to GCR

    •   docker push us.gcr.io/$GCP_PROJECT_ID/react-todolist-app
      

Write Pulumi Scripts

  • Create new Pulumi Project using JavaScript GCP Template

    •   pulumi new gcp-javascript
      
  • Install @pulumi/kubernetes for k8s Object deployment

    •   npm install @pulumi/kubernetes
      
  • Set pulumi configs for GCP

    •   pulumi config set gcp:project $GCP_PROJECT_ID
        pulumi config set gcp:zone us-central1-c
      
  • Require all dependencies and configs

    •   const pulumi = require("@pulumi/pulumi");
        const gcp = require("@pulumi/gcp");
        const k8s = require("@pulumi/kubernetes");
        const gcpConfig = new pulumi.Config("gcp");
        const zone = gcpConfig.require("location");
      
  • Write code for creating GKE Cluster

      const cluster = new gcp.container.Cluster("my-cluster", {
        name: "my-first-cluster",
        location: zone,
        initialNodeCount: 3,
        minMasterVersion: "latest",
        nodeConfig: {
          machineType: "g1-small",
          diskSizeGb: 32,
        },
      });
    
  • Write kubeconfig for connecting to the cluster

      const kubeconfig = pulumi
        .all([cluster.name, cluster.endpoint, cluster.masterAuth])
        .apply(([name, endpoint, masterAuth]) => {
          const context = `${gcp.config.project}_${gcp.config.zone}_${name}`;
          return `apiVersion: v1
      clusters:
      - cluster:
          certificate-authority-data: ${masterAuth.clusterCaCertificate}
          server: https://${endpoint}
        name: ${context}
      contexts:
      - context:
          cluster: ${context}
          user: ${context}
        name: ${context}
      current-context: ${context}
      kind: Config
      preferences: {}
      users:
      - name: ${context}
        user:
          exec:
            apiVersion: client.authentication.k8s.io/v1beta1
            command: gke-gcloud-auth-plugin
            installHint: Install gke-gcloud-auth-plugin for use with kubectl by following
              https://cloud.google.com/blog/products/containers-kubernetes/kubectl-auth-changes-in-gke
            provideClusterInfo: true`;
        });
    
  • Write code for kubernetes provider configuration

      const clusterProvider = new k8s.Provider("hello", {
        kubeconfig: kubeconfig,
      });
    
  • Write code for kubernetes Deployment

      const reactAppLabels = {
        app: "react-app-todo-list",
      };
    
      const deployment = new k8s.apps.v1.Deployment(
        "my-deployment",
        {
          metadata: {
            name: "my-deployment",
          },
          spec: {
            replicas: 1,
            selector: {
              matchLabels: reactAppLabels,
            },
            template: {
              metadata: {
                labels: reactAppLabels,
              },
              spec: {
                containers: [
                  {
                    name: "my-container",
                    image: "us.gcr.io/$GCP_PROJECT_ID/react-todolist-app",
                    ports: [
                      {
                        containerPort: 80,
                      },
                    ],
                  },
                ],
              },
            },
          },
        },
        { provider: clusterProvider }
      );
    
  • Write code for Load Balancer service

      const service = new k8s.core.v1.Service(
        "my-service",
        {
          metadata: {
            name: "react-todo-list-app-lb-service"
          },
          spec:{
            type: "LoadBalancer",
            ports: [{
              port: 80,
              targetPort: 80
            }],
            selector: reactAppLabels
          }
        },
        { provider: clusterProvider }
      );
    
  • Export required values as output

      exports.clusterIP = cluster.endpoint;
      exports.servicePublicIP = service.status.apply(s => s.loadBalancer.ingress[0].ip)
    

Run Pulumi Scripts

pulumi up

Now your application will be deployed successfully to GKE. You can access it using the service IP address which you will get from pulumi output variables.


Did you find this article valuable?

Support KubeKode Blogs by becoming a sponsor. Any amount is appreciated!

ย