---
title: Deploying your first application
exercise: 2
date: '2023-12-05'
tags: ['openshift','containers','kubernetes','deployments','images']
draft: false
authors: ['default']
summary: "Time to deploy your first app!"
---


Now that we have had a tour of the OpenShift web console to get familiar, let's use the web console to deploy our first application.

Let’s start by doing the simplest thing possible - get a plain old Docker-formatted container image to run on OpenShift. This is incredibly simple to do. With OpenShift it can be done directly from the web console.

Before we begin, if you would like a bit more background on what a container is or why they are important click the following link to learn more: https://www.redhat.com/en/topics/containers#overview


## 2.1 - Deploying the container image

In this exercise, we’re going to deploy the **web** component of the ParksMap application which uses OpenShift's service discovery mechanism to discover any accompanying backend services deployed and shows their data on the map. Below is a visual overview of the complete ParksMap application.

<Zoom>
|![parksmap-architecture](/static/images/parksmap-architecture.png) | 
|:-------------------------------------------------------------------:|
| *ParksMap application architecture*                                 |
</Zoom>

Within the **Developer** perspective, click the **+Add** entry on the left hand menu.

Once on the **+Add** page, click **Container images** to open a dialog that will allow you to quickly deploy an image.

In the **Image name** field enter the following:

```text
quay.io/openshiftroadshow/parksmap:latest
```

Leave all other fields at their defaults (but take your time to scroll down and review each one to familiarise yourself! 🎓)

Click **Create** to deploy the application.

OpenShift will pull this container image if it does not exist already on the cluster and then deploy a container based on this image. You will be taken back to the **Topology** view in the **Developer** perspective which will show the new "Parksmap" application.

<Zoom>
|![first-app](/static/images/first-app.gif) | 
|:-------------------------------------------------------------------:|
| *Deploying the container image*                                     |
</Zoom>


## 2.2 - Reviewing our deployed application

If you click on the **parksmap** entry in the **Topology** view, you will see some information about that deployed application. 

The **Resources** tab may be displayed by default. If so, click on the **Details** tab. On that tab, you will see that there is a single **Pod** that was created by your actions.

<Zoom>
|![app-details](/static/images/app-details.gif) | 
|:-------------------------------------------------------------------:|
| *Deploying the container image*                                     |
</Zoom>

> Note: A pod is the smallest deployable unit in Kubernetes and is effectively a grouping of one or more individual containers. Any containers deployed within a pod are guaranteed to run on the same machine. It is very common for pods in kubernetes to only hold a single container, although sometimes auxiliary services can be included as additional containers in a pod when we want them to run alongside our application container.


## 2.2 - Accessing the application

Now that we have the ParksMap application deployed. How do we access it??

This is where OpenShift **Routes** and **Services** come in.

While **Services** provide internal abstraction and load balancing within an OpenShift cluster, sometimes clients outside of the OpenShift cluster need to access an application. The way that external clients are able to access applications running in OpenShift is through an OpenShift **Route**. 

You may remember that when we deployed the ParksMap application, there was a checkbox ticked to automatically create a **Route**. Thanks to this, all we need to do to access the application is go the **Resources** tab of the application details pane and click the url shown under the **Routes** header.

<Zoom>
|![app-details](/static/images/app-route.gif) | 
|:-------------------------------------------------------------------:|
| *Opening ParksMap application Route*                                |
</Zoom>

Clicking the link you should now see the ParksMap application frontend 🎉

> Note: If this is the first time opening this page, the browser will ask permission to get your position. This is needed by the Frontend app to center the world map to your location, if you don’t allow it, it will just use a default location.

<Zoom>
|![app-frontend](/static/images/app-frontend.png) | 
|:-------------------------------------------------------------------:|
| *ParksMap application frontend*                                     |
</Zoom>


## 2.3 - Checking application logs

If we deploy an application and something isn't working the way we expect, reviewing the application logs can often be helpful. OpenShift includes built in support for reviewing application logs.

Let's try it now for our ParksMap frontend.

In the **Developer** perspective, open the **Topology** view.

Click your "Parksmap" application icon then click on the **Resources** tab.

From the **Resources** tab click **View logs**

<Zoom>
|![app-logs](/static/images/app-logs.gif) | 
|:-------------------------------------------------------------------:|
| *Accessing the ParksMap application logs*                           |
</Zoom>


## 2.4 - Checking application resource usage

Another essential element of supporting applications on OpenShift is understanding what resources the application is consuming, for example cpu, memory, network bandwidth and storage io.

OpenShift includes built in support for reviewing application resource usage. Let's take a look at that now.

In the **Developer** perspective, open the **Observe** view.

You should see the **Dashboard** tab. Set the time range to the `Last 1 hour` then scroll through the dashboard.

How much cpu and memory is your ParksMap application currently using?

<Zoom>
|![app-logs](/static/images/app-resources.gif) | 
|:-------------------------------------------------------------------:|
| *Checking the ParksMap application resource usage*                  |
</Zoom>

Well done, you've finished exercise 2! 🎉
