Running Docker Commands by creating a WebGUI

2 min readJun 25, 2021

Docker or containerization has been the overpowering tech that has reduced the time to market and has made the accessibility of OS a flick of the finger. In this blog, we would be using a web-based interface to run the commands for docker. Here, we have used RedHat Linux to create a server, and this renders the output on the webpage.

To begin with we would setup a server. Install the “httpd module on the redhat”, and then start it.

>systemctl start httpd

Post this, we create a HTML file for the Webpage, and a CGI code. The HTML file is stored in “/var/www/html/” and cgi code in “/var/www/cgi-bin/”. We have created the files shash.html and sha.py.

The HTML file will show the output for the user, and the cgi file will run at the backend.

CGI FILE:sha.py#!/usr/bin/python3
import cgi
import subprocess
print(“Content-Type: text/html\n\n”)
field = cgi.FieldStorage()
cmd = field.getvalue(‘x’)
out = subprocess.getoutput(cmd)
print(out)

HTML CODE: shash.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Docker-webgui</title>
    <link rel="stylesheet" href="./stylesheet.css" />
  </head>
  <script>
    function shash() {
      var xhr = XMLHttpRequest();
      var x = document.getElementById("value").value            
      xhr.open("GET", "<your_ip>/cgi-bin/cmd.py?x="+x, true);
      xhr.send();
      var final = xhr.responseText;
      document.getElementById("value").innerHTML = final;
    }

    function shash1() {
      document.getElementById("value").value = "";
    }
  </script>
  <style>
    * {
      font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }

    section {
      text-align: center;
    }

    button {
      width: 8rem;
    }
  </style>
  <body>
    <section>
      <h1>Your Docker WebGui</h1>
      <div>
        Give your command here, and get your output
      </div>
      <div>(ITS SO COOOOOL!)</div>
    </section>
    <br /><br /><br /><br />
    <section>
      <input type="text" id="value" />
      <br /><br />
      <button onclick="shash()">Run Command</button>
      <button onclick="shash1()">Reset</button>
    </section>
  </body>
</html>

The above two files work in a combined manner to execute the commands you enter in the input box! That’s it! We have successfully created a WebGUI to run docker commands.

Running Docker Commands by creating a WebGUI

Written by Shashwat Gaur