TDM 20200: Project 13 — Spring 2024

Motivation: In project 12 we created a container by pulling the ubuntu image. In this project we will try to create one simple container with a Virtual machine (as a simple web application).

Context: Create simple conceptual web app using Flask and create a container for the web app

Scope: Python, Visual Studio Code, container, flask

Learning Objectives

  • Create a conceptual web application using flask on Anvil

  • Create a container for the web app

  • Develop skills and techniques to create a container

  • Understand the Flask framework

Readings and Resources

Questions

Question 1 (2 points)

  1. Start a QEMU virtual machine and connect to it via ssh.

    • You may refer back to Project 12, where we learned the steps needed to start a virtual machine and connect to it.

Question 2 (2 points)

  1. Use the statement docker pull python:3.10-slim to pull a Python image from Docker Hub. (You do not need to run the docker image yet; just pull it for now.)

  2. Create a new directory named flaskP13App. Inside that directory, using an editor (such nano or vim), create a simple file called helloWorld.py which we will later use to display a sentence in a webpage. The sentence may be simple, e.g., "Hello from Flask inside a Docker container!"

    • This flask tutorial should be helpful, for students who want to know more about making a Flask app. For our purposes, our helloWorld.py file can be as simple as the following:

    from flask import Flask

app = Flask(__name__)

@app.route('/')
def hello_world():
    return 'Hello from Flask inside a Docker container!'

if __name__ == '__main__':
    app.run(host='0.0.0.0', port=8050, debug=True)

    Make SURE that your indentations look correct in your file!

  3. Create a requirements.txt file; it is a list of packages or libraries needed to work on a project. For instance, your requirements.txt might look like this:

    flask==2.1.1
jinja2==3.0.2
werkzeug==2.0.1

Question 3 (2 points)

  1. Create a file called Dockerfile inside the flaskP13App directory. If you want a full introduction to Docker, you can read this docker introduction, but for our purposes, the file called Dockerfile can just look like this:

# example of the contents of a dockerfile

# Use an official Python runtime as a parent image
FROM python:3.8-slim

# Set the working directory in the container
WORKDIR /home/tdm

# Copy all of the files from the current directory into the Docker container
COPY . .

# Install the packages from the requirements file
RUN pip install -r /home/tdm/requirements.txt

# Install Flask
RUN pip install Flask

# Make port 8050 available to the world outside this container
EXPOSE 8050

# Define environment variable
ENV NAME World

# Run helloWorld.py when the container launches
CMD ["python", "helloWorld.py"]

Question 4 (2 points)

  1. Build the Docker image using the command

docker build -t flaskapp .

(Don’t forget the period at the end of the command! The period refers to the current directory.)

There will be a couple of WARNING sentences written in red, but do not worry!

Question 5 (2 points)

  1. Run the Flask App in a Docker Container using the command

docker run flaskapp

For the output from this question, you may choose to just take a screen shot of your terminal output, showing that everything is running successfully, for instance, like this:

output
localhost:~/flaskP13App% docker run flaskapp
 * Serving Flask app 'helloWorld' (lazy loading)
 * Environment: production
   WARNING: This is a development server. Do not use it in a production deployment.
   Use a production WSGI server instead.
 * Debug mode: on
 * Running on all addresses.
   WARNING: This is a development server. Do not use it in a production deployment.
 * Running on http://172.17.0.2:8050/ (Press CTRL+C to quit)
 * Restarting with stat
 * Debugger is active!
 * Debugger PIN: 967-939-308

Project 13 Assignment Checklist

  • Jupyter Lab notebook with your code, comments and output for the assignment

    • firstname-lastname-project13.ipynb

  • bash file with code and comments for the assignment

    • firstname-lastname-project13.sh

  • Submit files through Gradescope

Please make sure to double check that your submission is complete, and contains all of your code and output before submitting. If you are on a spotty internet connection, it is recommended to download your submission after submitting it to make sure what you think you submitted, was what you actually submitted.

In addition, please review our submission guidelines before submitting your project.