Create Frontend Docker Image
Start course
1h 26m

This training course is designed to help you master the skills of deploying cloud-native applications into Kubernetes.

Observe first hand the end-to-end process of deploying a sample cloud-native application into a Kubernetes cluster. By taking this course you'll not only get to see firsthand the skills required to perform a robust enterprise-grade deployment into Kubernetes, but you'll also be able to apply them yourself as all code and deployment assets are available for you to perform your own deployment:

Kubernetes Resources

This training course provides you with in-depth coverage and demonstrations of the following Kubernetes resources:

  1. Namespace
  2. Deployment/ReplicaSet
  3. Pod
  4. Service
  5. Ingress/Ingress Controller
  6. StatefulSet
    1. Persistent Volume
    2. Persistent Volume Claim
    3. Headless Service
  7. NetworkPolicy

Learning Objectives

What you'll learn:

  • Learn and understand the basic principles of deploying cloud-native applications into a Kubernetes cluster
  • Understand how to set up and configure a locally provisioned Kubernetes cluster using Minikube
  • Understand how to work with and configure many of the key Kubernetes cluster resources such as Pods, Deployments, Services, etc.
  • And finally, you’ll learn how to manage deployments and Kubernetes cluster resources through their full lifecycle.


This training course provides you with many hands-on demonstrations where you will observe first hand how to

  • Create and provision a Minikube Kubernetes cluster
  • Install the Cilium CNI plugin
  • Build and deploy Docker containers
  • Create and configure Kubernetes resources using kubectl


  • A basic understanding of containers and containerization
  • A basic understanding of software development and the software development life cycle
  • A basic understanding of networks and networking

Intended Audience

  • Anyone interested in learning Kubernetes
  • Software Developers interested in Kubernetes containerization, orchestration, and scheduling
  • DevOps Practitioners

- [Instructor] Okay, welcome back. In this lecture, we're ready to compile and packaged the Frontend Docker Image. 

To do so, we'll first navigate into the Vote App Fronted React Directory, like so. We'll now use the Tree command to examine and display react-based source files contained within its directory. Next, we need to perform and install of all the third party JavaScript libraries that we used and referenced. 

We'll use the Yarn command to perform this. Yarn provides us a safety net for managing third party JavaScript libraries, ensuring that the correct versions are downloaded each and every time. And that we can perform reproducible in identical builds of the react-based frontend. Yarn looks at the yarn.lock file to determine the exact versions of each of the libraries that it should download. 

Okay, let's now refresh the current directory. And this time, we should have a new node modules folder that contains all the third party JavaScript libraries that the frontend depends on. At this stage, we're now ready to build and transpile our React J6 source files. And at the same time, minify and compress all of the files so that they are optimized for setting to the browser. This will take several seconds to complete the compilation process. Again, we'll refresh the current directory. And this time, we should have a new build fold up, which contains all of our static frontend assets that have been just created by the previous command. 

Excellent, we're now ready to package and create the Frontend Docker image. The Docker Image Packaging commands a histogram from a docker file within the Project Root folder needs to examine its contents by running cat Dockerfile. As you can see, we're going to base our image onto the official nginx image. This will provide us with the nginx web services. We then copy on the Build folder, created by the Build command. We copy this into the Default Directory that nginx is configured to serve from. And in this case, the user/share/nginx html directory. 

Okay, let's kick off the Docker build for the frontend and tag it with the tag cloudacademy/frontend v1 for version one. Excellent, the build is completed successfully. And now we examine the loaded docker images, we should see our new frontend dockerd image. 

Okay, that completes the build and packaging sequences for the frontend. We can now move on to building and packaging the API Dockered Image.

About the Author
Learning Paths

Jeremy is a Content Lead Architect and DevOps SME here at Cloud Academy where he specializes in developing DevOps technical training documentation.

He has a strong background in software engineering, and has been coding with various languages, frameworks, and systems for the past 25+ years. In recent times, Jeremy has been focused on DevOps, Cloud (AWS, Azure, GCP), Security, Kubernetes, and Machine Learning.

Jeremy holds professional certifications for AWS, Azure, GCP, Terraform, Kubernetes (CKA, CKAD, CKS).