Javascript Integration with Docker on AWS EC2

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 webportal 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

Start your AWS EC2 Instance:

Log in to your instance using the Public IP Address :

ssh -l ec2-user -i st2021_key.pem 13.233.236.212

Install and enable docker:

yum install docker

systemctl enable docker

Install and start Apache httpd process and python3:

yum install httpd

httpd

yum install python3

Create Client Side(.html) and Server Side(.py) program:

Client side program:

https://github.com/natasha012/Docker_interactive_webpage_AWS_EC2.git

Server side program:

To allow webpage permission to run commands:

setenforce 0

vi /etc/sudoers

apache ALL = (ALL) NOPASSWD : ALL (add this bellow root ALL = (ALL) ALL )

:wq!

Add Inbound Rule to allow users access:

Interactive Docker Webpage:

Total look of website:

Using interactive text box:

Using Docker Images Button:

To list all images

Using Docker ps Button:

To list all containers

Using Docker run Button:

To run docker names d1 using centos image

Using Docker rm-f Button:

To forcefully remove the docker d1

Using Docker exec Button:

To execute docker commands

A basic HTML interactive file:

#!/usr/bin/python3
import cgi
import subprocess
print(“context-type:text/html”)
print()
f=cgi.FieldStorage()
cmd=f.getvalue(“i”)
o=subprocess.getoutput(“sudo ”+cmd)
print(o)
Client side program:
<script>
function lw(){
var i=document.getElementById("in1").value
var xhr=new XMLHttpRequest();
xhr.open("GET","http://13.233.236.212:1234/cgi-bin/lw.py?x="+i,true)
xhr.send()
xhr.onload=function()
{
var output=xhr.responseText;
document.getElementById("d1").innerHTML=output;
}
}
</script>
Enter your command: <input id="in1"/>
<br/>
<pre>
<div id ="d1">Your command output</div>
</pre>
<button onclick="lw()">click</button>

--

--

--

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Why & How to choose Best React Native Development Company?

API Authentication using Passport JS and JSON Web Tokens.

AWS Cognito example using React UI and Node.js REST APIs — part 2 (React UI app with Redux)

Browser Console Methods

Serverless Telegram Bot with Firebase

JavaScript 101 — Create your online resume that will land your dream job — Part 3

Exploring GraphQL

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
K.S.L.K.Harini

K.S.L.K.Harini

More from Medium

What is RSA algorithm and how does it work?

Fixing AWS Upload Error

Mongoose is an Object Data Modeling (ODM) library for MongoDB and Node.js

Case Study — NodeJS based Automated Monitoring using Open Source