WebApp with Container in Docker

Sena Akbulut

Published in

CNK Tech

4 min readSep 10, 2020

I will explain how to create a container in Docker and make a simple web application using containers.

First of all, what are Docker and container?

Docker

Docker is a computer program that provides operating system-level virtualization, also known as “containerization”. Docker is used to run software packages called “containers”.

Container

Containers are the organizational units of Docker. When we build an image and start running it; we are running in a container. We can move it, in other words, “ship” the software, modify, manage, create or get rid of it, destroy it, just as cargo ships can do with real containers.

So what is the image mentioned here?

İmage

Docker images are the “source code” for our containers; we use them to build containers. They can have software pre-installed which speeds up deployment. They are portable, and we can use existing images or build our own.

Let’s make our own image to make the web application

Create Your First İmage

For this, I will make an image running the Flask application.

First, I will make a random cat selector generator created with Python Flask, then I will dockerizing with Dockerfile and create the image.

Start by opening a directory called flask app. In this directory, a file called app.py should be opened and the application that selects a random cat into it.

from flask import Flask, render_template
import random

app = Flask(__name__)

# list of cat images
images = [
   "http://img.buzzfeed.com/buzzfeed-static/static/2013-10/enhanced/webdr05/15/9/anigif_enhanced-buzz-26388-1381844103-11.gif",
    "http://img.buzzfeed.com/buzzfeed-static/static/2013-10/enhanced/webdr01/15/9/anigif_enhanced-buzz-31540-1381844535-8.gif",
    "http://img.buzzfeed.com/buzzfeed-static/static/2013-10/enhanced/webdr05/15/9/anigif_enhanced-buzz-26390-1381844163-18.gif",
    "http://img.buzzfeed.com/buzzfeed-static/static/2013-10/enhanced/webdr06/15/10/anigif_enhanced-buzz-1376-1381846217-0.gif",
    "http://img.buzzfeed.com/buzzfeed-static/static/2013-10/enhanced/webdr03/15/9/anigif_enhanced-buzz-3391-1381844336-26.gif",
    "http://img.buzzfeed.com/buzzfeed-static/static/2013-10/enhanced/webdr06/15/10/anigif_enhanced-buzz-29111-1381845968-0.gif",
    "http://img.buzzfeed.com/buzzfeed-static/static/2013-10/enhanced/webdr03/15/9/anigif_enhanced-buzz-3409-1381844582-13.gif",
    "http://img.buzzfeed.com/buzzfeed-static/static/2013-10/enhanced/webdr02/15/9/anigif_enhanced-buzz-19667-1381844937-10.gif",
    "http://img.buzzfeed.com/buzzfeed-static/static/2013-10/enhanced/webdr05/15/9/anigif_enhanced-buzz-26358-1381845043-13.gif",
    "http://img.buzzfeed.com/buzzfeed-static/static/2013-10/enhanced/webdr06/15/9/anigif_enhanced-buzz-18774-1381844645-6.gif",
    "http://img.buzzfeed.com/buzzfeed-static/static/2013-10/enhanced/webdr06/15/9/anigif_enhanced-buzz-25158-1381844793-0.gif",
    "http://img.buzzfeed.com/buzzfeed-static/static/2013-10/enhanced/webdr03/15/10/anigif_enhanced-buzz-11980-1381846269-1.gif"
    ]

@app.route('/')
def index():
    url = random.choice(images)
    return render_template('index.html', url=url)

if __name__ == "__main__":
    app.run(host="0.0.0.0")

For the structure of the web page to be created, open a directory called templates and write an HTML file named index.html into it.

<html>
  <head>
    <style type="text/css">
      body {
        background: black;
        color: white;
      }
      div.container {
        max-width: 500px;
        margin: 100px auto;
        border: 20px solid white;
        padding: 10px;
        text-align: center;
      }
      h4 {
        text-transform: uppercase;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <h4>Cat Gif of the day</h4>
      <img src="{{url}}" />
      <p><small>Courtesy: <a href="http://www.buzzfeed.com/copyranter/the-best-cat-gif-post-in-the-history-of-cat-gifs">Buzzfeed</a></small></p>
    </div>
  </body>
</html>

Now it’s time to write the Dockerfile. A Dockerfile is a text file that contains a list of commands that the Docker daemon calls while creating an image.
A file named Dockerfile should be opened and then the following codes should be written.

# our base image
FROM alpine:3.5

# Install python and pip
RUN apk add --update py2-pip

# install Python modules needed by the Python app
COPY requirements.txt /usr/src/app/
RUN pip install --no-cache-dir -r /usr/src/app/requirements.txt

# copy files required for the app to run
COPY app.py /usr/src/app/
COPY templates/index.html /usr/src/app/templates/

# tell the port number the container should expose
EXPOSE 5000

# run the application
CMD ["python", "/usr/src/app/app.py"]

Now we can build our image.

Build İmage

For this, it is necessary to use the docker build command. The docker build command allows creating images from Dockerfile.

When you run the docker build command given below, replace <YOUR_USERNAME> with your username. This username should be the same as you created while signing up for Docker Hub.

$ docker build -t <YOUR_USERNAME>/myfirstapp .

Now the built image can be run.

Run İmage

$ docker run -p 8888:5000 --name myfirstapp YOUR_USERNAME/myfirstapp
* Running on http://0.0.0.0:5000/ (Press CTRL+C to quit)

Head over to http://localhost:8888 and your app should be live.

Push İmage

If you want to add the created image to the Docker Hub, you need to:

First, you have to log in to your Docker Hub account, to do that:

docker login

Now all you have to do is:

docker push YOUR_USERNAME/myfirstapp

Now that you are done with this container, stop and remove it since you won’t be using it again.

$ docker stop myfirstapp
$ docker rm myfirstapp

See you in my next post.

WebApp with Container in Docker

Docker

Container

İmage

Create Your First İmage

Written by Sena Akbulut