Use Circle CI to deploy Flask-Python app in Docker
Tags: devops, docker, learning, cicd
Published: 2024-04-26 19:12:34

### *Clone the repo*
#####Repo: https://github.com/surajupadhaya/Portfolio-app
Push the same code to your repository.

### *Setup the Circle CI (free CI/CD tool) with GitHub* 
######Sign in to your CircleCI account.
Connect your GitHub account to CircleCI.
Once connected, you’ll see your existing projects populate on your CircleCI dashboard.
Add the environment variable by click on project setting option you will find Environment variable option
$Hub_Pass = docker hub password
$Hub_user = docker hub username

#### Now make changes in templates/index.html file as needed

```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Suraj Upadhaya</title>
    <style>
        /* Basic styling */
        body {
            font-family: 'IBM Plex Mono', monospace;
            margin: 0;
            padding: 0;
            overflow: hidden;
            background: url('../static/stars2.jpg') fixed;
            background-size: cover;
        }
        .container {
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            background-color: rgba(255, 255, 255, 0.8);
            border-radius: 5px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }
        h1 {
            color: #833AB4;
            font-size: 36px;
            font-weight: bold;
            text-align: center;
            margin-bottom: 20px;
        }
        p {
            color: #333;
            font-size: 18px;
            text-align: center;
        }
        a {
            color: #FD1D1D;
            text-decoration: none;
        }
        .logo-container {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 20px;
        }
        .logo {
            width: 30px;
            height: 30px;
            margin-right: 10px;
        }
    </style>
</head>
<body>
    <div class="stars"></div>
    <div class="container">
        <h1>!! Hey !!</h1>
        <p>Check out my <a href="https://github.com/surajupadhaya">GitHub profile</a> and connect with me on <a href="https://www.linkedin.com/in/surajupadhaya/">LinkedIn</a>.</p>
	<p style="font-family: Arial, sans-serif; font-size: 18px; color: #333;">Tech Stack:</p>
	<ul style="font-family: 'Courier New', monospace; font-size: 16px; color: #666;">
	    <li><a href="https://docs.ansible.com/">Ansible</a></li>
	    <li><a href="https://www.gnu.org/software/bash/manual/">Bash</a></li>
	    <li><a href="https://www.perl.org/docs.html">Perl</a></li>
	    <li><a href="https://docs.microsoft.com/en-us/azure/azure-resource-manager/bicep/">Azure Bicep</a></li>
	    <li><a href="https://docs.python.org/3/">Python</a></li>
	</ul>
        <div class="logo-container">
            <a href="https://github.com/surajupadhaya"><img class="logo" src="../static/github-logo.png" alt="GitHub Logo"></a>
            <a href="https://www.linkedin.com/in/surajupadhaya/"><img class="logo" src="../static/linkedin-logo.png" alt="LinkedIn Logo"></a>
        </div>
    </div>
</body>
</html>
```
change Title name , GitHub repo link , LinkedIn link

```
<title>Suraj Upadhaya</title>
<p>Check out my <a href="https://github.com/surajupadhaya">GitHub profile</a> and connect with me on <a href="https://www.linkedin.com/in/surajupadhaya/">LinkedIn</a>.</p>
```
Push to your repository with the changes, Once pushed you will see the circle Ci pipeline get triggered and it starts to build the Docker images with python app and try to push the image to docker hub registry.
Once build is complete it will start with deploy the container and try to curl the localhost on port 5500 for html output of that application.   

- If you don't want to trigger the pipeline for any change push to repository then use [skip ci] in your commit message 

Basic Structure of .circleci/config.yml
```
jobs:
  build :
     steps:
       - run:
         command: echo "hello word"
  deploy:
     steps:
       - run:
         command: echo "hello word"
workflows:
   "how you want your jobs to run "

```

 
Snippet below 
  

## BUILD : 

```
jobs:
  
  build:
    docker:
      - image: cimg/base:current
    steps:
      - checkout
      - setup_remote_docker
      - run :
           name: Build the image from Docker file 
           command: |
             docker build -t suru12/portflask-cci:v1 .
             echo $Hub_Pass |docker login -u $Hub_user --password-stdin
             docker push suru12/portflask-cci:v1
```
This step  images will get create according to the Dockefile and the image will get pushed to docker hub



![Build](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fi7768l1gr6ez8l7ig9n.png)

## DEPLOY: 

```
 - run :
           name: Run the docker container with suraj/portflask-cci:v1 images 
           command: |
              docker run -d  --name portfolio -p 5500:5000 suru12/portflask-cci:v1
              sleep 20 
              curl localhost:5500
```
This step will run the docker container using the same image you just created and try to run curl on localhost:5500
![Deploy](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fiwe7w4vb78ow8ai39wr.png)