GCP — Deploying Angular App With Java Backend on GKE

A step by step guide with an example project

Bhargav Bachina
Dec 1, 2020 · 9 min read

GKE is Google’s managed Kubernetes solution that lets you run and manage containerized applications in the cloud. Since this is a managed Kubernetes service, you can start quickly with single-click clusters, leverage a high-availability control plane including multi-zonal and regional clusters, eliminate operational overhead with auto-repair, auto-upgrade, and release channels, secure by default, including vulnerability scanning of container images and data encryption, integrated Cloud Monitoring with infrastructure, application, and Kubernetes-specific views

In this post, we are going to deploy an Angular application with a Java environment. First, we dockerize our app and push that image to the Google container registry and run that app on Google GKE. We will see how we can build the Kubernetes cluster on Google GKE, Accessing clusters from outside, configuring kubectl to work with the GKE cluster, and many more.

  • Example Project
  • Prerequisites
  • Install gcloud CLI and Configure
  • Dockerize the Project
  • Pushing Docker Image To Container Registry
  • Creating GKE Cluster
  • Configure Kuebctl With GKE Cluster
  • Deploy Kubernetes Objects on GKE Cluster
  • Access the WebApp from the browser
  • Summary
  • Conclusion

Example Project

This is a simple project which demonstrates developing and running Angular application with Java. We have a simple app in which we can add users, count, and display them at the side, and retrieve them whenever you want.

Example Project

If you want to practice your own here is a Github link to this project. You can clone it and run it on your machine as well.

// clone the repo
git clone https://github.com/bbachi/angular-java-gke.git
// Run Angular on port 4200
cd /src/main/ui
npm install
npm start
// Run Java Code on 8080
mvn clean install
java -jar target/users-0.0.1-SNAPSHOT.jar

Prerequisites

  • If you are new to Angular please go through the below link on how to develop and build the Angular project with Java backend.

How To Develop and Build Angular App With Java Backend

The other prerequisites to this post are Docker essentials and Kubernests essentials. We are not going to discuss the basics such as what is a container or what is Kubernetes, rather, we will see how to build a Kubernetes cluster on GCP GKE. Below are the prerequisites you should know before going through this article

You need to understand Docker concepts such as creating images, container management, etc. Below are some of the links that you can understand about Docker if you are new.

You need to understand Kubernetes’ essentials as well along with Docker essentials. Here are some of the docs to help you understand the concepts of Kubernetes.

  • Create a New project
  • You need to create a Billing Account
  • Link Billing Account With this project
  • Enable All the APIs that we need to run the dataflow on GCP
  • Download the Google SDK

Need to create a service account so that when you run the application from your local machine it can invoke the GCP dataflow pipeline with owner permissions.

Service Account

You have to generate the key and download and set the environment variable called GOOGLE_APPLICATION_CREDENTIALS.

export GOOGLE_APPLICATION_CREDENTIALS="/Users/bhargavbachina/gcp-credentials/gcp-dataflow-service-account.json"

Finally, you can run the following command to log in to your GCP account.

gcloud auth login

Install gcloud CLI and Configure

Once you have the GCP Account you can install the gcloud command-line tool. You can go to the below documentation and install gcloud CLI based on your operation system. You can configure gcloud CLI with your project.

The gcloud CLI is a part of the Google Cloud SDK. You must download and install the SDK on your system and initialize it before you can use the gcloud command-line tool

// initializing
gcloud init
// auth login
gcloud auth login

Once you run the above command, it opens up a browser for you to login into your GCP and you get the response as below.

gcloud auth login

You can list the projects with the following command.

gcloud projects list

You can set the current project with the following command.

gcloud config set project staticweb-test
Configuring the project

Dockerize the Project

Google GKE is a managed service that makes it easy for you to run Kubernetes on the Google Cloud Platform. The first thing you need to do is to dockerize your project.

Here is the Dockerfile and it is using OpenJDK as a base image.

Dockerfile

If you want to know the whole process of creating a Docker image for this project, please check the below link.

Dockerizing Angular App With Java Backend

Here are the commands to build the image and run it on the Docker engine on your local machine.

// build the image
docker build -t java-angular .
// run the container
docker run -d -p 8080:8080 --name javaangular java-angular
// list the container
docker ps
// logs
docker logs javaangular

Pushing Docker Image To Container Registry

Container Registry is a single place for your team to manage Docker images, perform vulnerability analysis, and decide who can access what with fine-grained access control. Existing CI/CD integrations let you set up fully automated Docker pipelines to get fast feedback. You can check the whole documentation here.

GCP GKE works with any Docker registry such as Docker Hub, etc. But, in this post, we see how we can use a GCP container registry to store our Docker images. Make sure you enable the relevant API on GCP. If you log in and go to the Container Registry you can see the empty registry.

Container Registry Console

The first thing we need to do is to enable the API with the following command.

gcloud services enable containerregistry.googleapis.com

You need to configure docker with the following command. You can see the full documentation here.

gcloud auth configure-docker
Configuring Docker

As we have seen in the Example Project section, let's build the Docker image with the following command.

docker build -t angular-java .

Let’s tag the local docker image with the registry name by using the command:

docker tag [SOURCE_IMAGE] [HOSTNAME]/[PROJECT-ID]/[IMAGE]:[TAG]// run this command
docker tag angular-java gcr.io/staticweb-test/angular-webapp:v1

Finally, push the image into the GCP container registry

docker push gcr.io/staticweb-test/angular-webapp:v1
docker push

You can see the repository in the console as well.

Container Registry

Creating GKE Cluster

We have pushed the Docker image into the container registry and it’s time to create a GKE Cluster. You can create the cluster with the following command.

gcloud container clusters create my-cluster

But, we will see how we can create Cluster through the console. Go to the GKE dashboard in the GCP console. Click the button to create a cluster.

GKE Dashboard

It asks you some basic questions such as location type, version of kubernetes, etc.

Creating a GKE Cluster

Once you click on the create button on the above screen it creates the cluster with three Nodes.

Cluster Created

You can click on the cluster and go to the details section where you can see the nodes.

Three nodes

You can list the clusters with the following command.

gcloud container clusters list
Cluster is in running state

Configure Kuebctl With GKE Cluster

Kubectl is the command-line utility for the Kubernetes. You need to install kubectl before you configure it. Click on the connect button on the console so that it gives you a command to configure kubectl with the GKE Cluster.

Cluster

Just copy the below command and run it on your terminal.

gcloud container clusters get-credentials frontend-cluster --zone us-central1-c --project staticweb-test

Once you run this command, kubectl is configured to use GKE Cluster and you can even get the nodes from the cluster.

kubectl is configured with GKE cluster

Deploy Kubernetes Objects on GKE Cluster

Now we have configured kubectl to use GCP GKE from our own machine. Let’s create deployment and service objects and use the image from the GCP Container Registry.

First, you need to get the repository URL from the details section of Container Registry where our repositor resides.

Repository URL

Here is the manifest file which contains these objects. Notice we are using the same repository from the Container Registry.

manifest.yml

If you cloned the above example project and you are at the root folder just use this command to create objects kubectl create -f manifest.yml

kubectl create -f manifest.yml

You can use the following commands to verify all the objects are in the desired state.

// list the deployment
kubectl get deploy
// list the pods
kubectl get po
// list the service
kubectl get svc

We can see 5 pods running since we have defined 5 replicas for the deployment.

Kubernetes Objects Running on GCP GKE

Access the WebApp from the browser

We have created a service with the LoadBalancer type. You can get the external IP from the service and access the entire from the browser.

service

You can access the webapp with the following URL

http://34.68.127.81:8080
Accessing from the browser

Delete the Cluster

You can just delete the cluster with the following command. Make sure you delete if you don’t want to incur charges.

gcloud container clusters delete [CLUSTER_NAME]

Summary

  • GKE is Google’s managed Kubernetes solution that lets you run and manage containerized applications in the cloud.
  • Before starting this, you need to have docker and Kubernetes essentials. If you don’t have these essentials please go through these with the links provided.
  • You need to create a GCP Account here.
  • You need a billing account to be associated with your project so that all the cost is billed to this billing account.
  • You can create the GKE cluster through a console, Gcloud CLI, REST API as well.
  • You can install gcloud CLI and configure it to use with your GKE Cluster.
  • Configure kubectl to use the GKE cluster.
  • Create a deployment and service with Loadbalancer so that you can access it from outside.
  • You can access the dashboard with either Kubeconfig or Token.
  • Make sure you delete if you don’t want to incur charges.

Conclusion

We have deployed a simple Angular application with Java Backend on Google GKE Cluster and access it from the browser. In future posts, we can see more advanced use cases.

Bachina Labs

Tutorials Ranging from Beginner guides to Advanced | Never…

By Bachina Labs

Tutorials Ranging from Beginner guides to advanced on Frontend, Backend, Blockchain, Docker, k8s, DevOps, Cloud,AI, ML. Thank you for subscribing and let me know if you want me cover anything?  Take a look.

By signing up, you will create a Medium account if you don’t already have one. Review our Privacy Policy for more information about our privacy practices.

Check your inbox
Medium sent you an email at to complete your subscription.

Bhargav Bachina

Written by

Software Architect — Sharing Experiences With Examples | Frontend, Backend, Blockchain, Docker, k8s, DevOps, Cloud,AI, ML | https://www.linkedin.com/in/bachina/

Bachina Labs

Tutorials Ranging from Beginner guides to Advanced | Never Stop Learning

Bhargav Bachina

Written by

Software Architect — Sharing Experiences With Examples | Frontend, Backend, Blockchain, Docker, k8s, DevOps, Cloud,AI, ML | https://www.linkedin.com/in/bachina/

Bachina Labs

Tutorials Ranging from Beginner guides to Advanced | Never Stop Learning

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store