You may remember Part 1 of "Playing with CI/CD on Gitlab-CI" where I setup the skeleton for a basic pipeline. If not please check it out here, and try it out before continuing with this tutorial. Otherwise you'll be totally dazed and confused and wondering what I'm rambling about...

For today's tutorial I'll show you how to setup a website with python's Flask web framework. It won't just be your standard "Hello World" website; I'll also add a basic navigation bar using Bootstrap CSS framework.


Prerequisites

  1. Gitlab repo with the files created in part 1.
  2. Text editor (I'm using Visual Studio Code).
  3. Python 3 installed on your local machine.
  4. Basic understanding of html.

Setting up the Test Enviornment

To install Flask, simply use the pip command. Pip is the package manager for python similar to npm for node and gem for ruby. See this doc for installation details.

pip install flask

If you have multiple versions of python installed on your machine you may have to specify which version of pip to use. pip3 is for python 3.

pip3 install flask

Creating the Flask Website

Once you have installed the Flask libraries, open your text editor and create a file named app.py. It will tell python how to route traffic and basically what to do if someone tries to access the site. Note I set my website to be served on port 5000. You may choose another port if you prefer.

app.py:

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def index():
    return render_template('index.html')

app.run(port=5000)

Once app.py is finished create a new folder in the root directory of your project and name it templates.

Within in the templates folder, create the index.html file. This is where we will put the html code for the site.

For the purpose of this demonstration, I'm using Bootstrap 4.3.1 as my CSS framework. All of the source code I'm using for the html and CSS come from Bootstrap's documentation. I highly suggest you browse through their wonderful examples before going forward.

I made edits to my html code and added a rich blue nav bar to my site. If you're wondering where I got the code below, I got it from here.

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <title>phil's flask site</title>
  </head>
  <body>
        <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
                <a class="navbar-brand" href="#">Phil's Flask Site</a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                  <span class="navbar-toggler-icon"></span>
                </button>
              
                <div class="collapse navbar-collapse" id="navbarSupportedContent">
                  <ul class="navbar-nav mr-auto">
                    <li class="nav-item active">
                      <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" href="#">Link</a>
                    </li>
                    <li class="nav-item dropdown">
                      <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        Dropdown
                      </a>
                      <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                        <a class="dropdown-item" href="#">Action</a>
                        <a class="dropdown-item" href="#">Another action</a>
                        <div class="dropdown-divider"></div>
                        <a class="dropdown-item" href="#">Something else here</a>
                      </div>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
                    </li>
                  </ul>
                  <form class="form-inline my-2 my-lg-0">
                    <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
                    <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
                  </form>
                </div>
              </nav>

    <h1>
        <center>
                <img src="https://i.imgur.com/OE6JC0M.jpg" alt="Hello Kitty">
        </center>
    </h1>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  </body>
</html>

Make sure to save all of your new work! Now to start up the site open up the terminal and enter python app.py or python3 app.py.

You will get an output like below:

Simply go to http://127.0.0.1:5000/ on your web browser to view your web site! If you followed my example to the letter, you will be greeted by Hello Kitty. The navigation buttons do work, however we haven't put any code to make them do anything on the site.


Running the Website through the Pipeline

Now that the web site works locally on our machine, open up the user_data.txt file and add a thirty second delay and the command to start up the flask site. The delay will give the EC2 instance a chance to clone the repo and install the necessary tools before starting up the website.

As soon as you have all of that, save all of the new work and commit the changes. Quickly jump back into gitlab to view the catastrophe CI/CD pipeline in action! You should see the same exact process as before, but now before the process ends AWS will start up our Flask project.

user_data.txt:

#!/bin/bash
sudo su
yum update -y && yum upgrade -y
yum install -y vim net-tools curl wget git
eval "$(ssh-agent -s)"
ssh-add /root/.ssh/gitlab1
git clone git@gitlab.com:pafable/aws-deploy.git /appl
date > /appl/creation_date.txt
sleep 30s
python /appl/aws-deploy/app.py