JavaScript Integration with Docker

In this article, we are going to integrate multiple technologies like Python-CGI, HTML, CSS, and JavaScript. The user is provided a webpage from which he/she could execute Docker commands without focusing on how to set up the environment for the same.

Task Description 📄

📌 In this task, you have to create a Web Application for Docker (one of the great Containerization Tool which provides the user
Platform as a Service (PaaS)) by showing your own creativity and UI/UX designing skills to make the web portal user-friendly.
📌 This app will help the user to run all the docker commands like:
👉docker images
👉docker ps
👉docker run
👉docker rm -f
👉docker exec
👉 add more if you want. (Optional)
👉 Make a blog/article/video explaining this task step by step.

Before jump into the tutorial, make sure you have the set-up the VM as follows

First, stop the SELinux security

#setenforce 0

To check use the command: #getenforce

Note: if it is permissive you are good to go

Then, disable the firewall by using the command as follows

#systemctl disable firewalld

Check the status as follows: #systemctl status firewalld

Installation

Install the webserver to allow others to connect with you remotely. For which run the following command

Here, we using the apache webserver

#yum install httpd

and then start the apache server, using the command as follows:

#systemctl start httpd

Setting up the CGI-Python program

Go to the directory cgi-bin and create a python file and make it asexecutable

#cd /var/www/cgi-bin/

#touch docker.py

Note: Here, we named docker as the name of the python file

Open the file using vim editor or gedit

#vim dockrer.py

To make this file execute run the follwing command

#chmod +x docker.py

Note: Giving this file both read and write access

Let start discussing how we going to implement this.

First, we need to create a basic HTML file containing an input tag and button. It is your choice to style the HTML layout using CSS

The second step is to write the javascript code, it is always recommended to write in a seperate file. Always remember to add script files in HTML code.

Here, we using Ajax (Asynchronous Javascript XML) to run the command without reloading the page. Also, it helps us to run multiple functions/events at a time without waiting for the first function to complete.

In the third step, we need to the CGI program using python. As it allows to run os or the Linux commands remotely using a webpage.

Sample code of the CGI Program

#!/usr/bin/python3
import cgi
import subprocess
import timeprint("content-type: text/html")
print()f=cgi.FieldStorage()
cmd = f.getvalue("x")
o = subprocess.getoutput("sudo " +  cmd)
print(o)

Code is explained below:

1. Imported the libraries
2. Defining the context type which we will be receiving from the client
3. Retrieving the value from the webpage so we can run that command in the servers where we have Docker available

Now, All you need to do is open the HTML page on any browser.

This app will help the user to run all the docker commands like:
👉docker images
👉docker ps
👉docker run
👉docker rm -f
👉docker exec.

For more details visit this GitHub link: https://github.com/ajmalmohammedn/summer_program_2021/tree/main/task%207

Thank you for reading.