1. Home
  2. Training Library
  3. DevOps
  4. Courses
  5. Building A Cloud Native Application

Create Frontend Docker Image

The course is part of this learning path

Building and Deploying a Cloud Native Application
course-steps 4 certification 1 lab-steps 6

Contents

keyboard_tab
Introduction
1
Introduction
PREVIEW3m 32s
Quick Demonstration
Architecture Review
5
Go API
9m 54s
Test and Validation
Summary
12
Review
1m 15s
play-arrow
Start course
Overview
DifficultyIntermediate
Duration51m
Students45

Description

Introduction

This training course is designed to help you master the skills of designing and building cloud native applications.

Observe first hand the end-to-end process of building a sample cloud native application using React, Go, MongoDB, and Docker. By taking this course you'll not only get to see firsthand the skills required to create a robust enterprise grade cloud native application, 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:

https://github.com/cloudacademy/voteapp-frontend-react
https://github.com/cloudacademy/voteapp-api-go
https://github.com/cloudacademy/language-vote-app

Learning Objectives

What you'll learn:

  • Understand the basic principles of building cloud native applications
  • Understand the benefits of using React for frontend web development
  • Understand the benefits of using Go for backend api development
  • Understand the benefits of using MongoDB as a database system
  • And finally, you’ll learn how to package and run microservices as lightweight containers using Docker

Demonstration

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

  • Build a React based web frontend
  • Build a Go based API
  • Deploy and configure a MongoDB database
  • Deploy the full end-to-end application to Docker running locally

Prerequisites

  • A basic understanding of web based software development
  • Previous exposure to containers and containerisation - in particular docker

Intended Audience

  • Anyone interested in learning how to architect cloud native applications
  • Anyone interested in using modern development tools such as React, Go, MongoDB and Docker
  • Anyone interested in containerisation
  • DevOps Practitioners

Transcript

- [Instructor] Okay, welcome back. In this lecture I'll demonstrate how to compile and package the front end into a light weight, deployable microservice using Docker. For starters I'll create an empty demo folder used to store all of the coding assets as we move forward. Next I'll clone the frontend repository into it, like so. 

I'll then navigate into the new voteapp frontend react directory, and list its contents. To get a clearer view of the project structure, I'll clear the terminal and use the tree command. From here, I'll display the contents of the package.json file as this file declares the dependencies that are used within the frontend. The main dependency of interest is the axios library, which we use to provide ajax functionality for the frontend to be able to communicate with the api servers. Next, I'll clear the terminal again and then list out the contents of the current project group folder. 

Here, take notice that the node_modules folder does not yet exist. This will be created and populated with all of the dependencies recursively, when we run the next command. Let's do this now. I'll run the command yarn install, like so. Okay, that looks good. 

All of the dependencies have now been downloaded and placed into the new node_modules directory. I'll now open the current directory up within visual code and then open up and edit the .emv file. As you can see, the .emv file contains a single react environment variable. We need to replace this with the actual real host name that we'll use within our local deployment. In this demonstration, well set this to local localhost port 8080 since we'll spin up the api on local host. Okay, we'll save this and now perform a rebuild. 

Jumping back into the terminal, we perform a rebuild by running the command yarn build, like so. Okay, that has completed successfully. Let's now examine the contents of the new build folder, which should contain all of our static frontend assets which we just created by the previous command. Here we can see the set of files which will be served to the browser when requested. Okay, we're now ready to package and create the frontend Docker image. Clearing the terminal, we'll quickly examine the Docker file which contains the Docker image packaging commands. 

As you can see, we're simply going to base our Docker image on the official nginx Docker image. This will prove us with the nginx web service. We then copy in the build folder, created by the yarn build command. We copy this into the default directory that nginx is configured to serve from. Okay, let's kick off the Docker build for the frontend and tag it like so. I'll run the command Docker build, dash T for tag, cloudacademy frontend version one. And now if we examine the local Docker images we'll see our new version one frontend Docker image. Okay, that completes the build and packaging sequence for the frontend micro service.

About the Author

Students11252
Labs28
Courses65
Learning paths15

Jeremy is the DevOps Content Lead at Cloud Academy where he specializes in developing technical training documentation for DevOps.

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

Jeremy holds professional certifications for both the AWS and GCP cloud platforms.
 

Covered Topics