Javascript Integration With Docker
Source : Pratik Kohad

Javascript Integration With Docker

?? 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, etc and try to cover the industry use cases also.

This is an important article on the integration of Javascript with Docker. In this article, I have configured docker on RHEL 8 O.S which is on AWS Cloud, and also configured the 'httpd' service in our RHEL 8 O.S.I have also integrated Javascript with docker so that users can use docker effectively.

Let's see Some of the basic terminologies before hands-on :

Docker??

No alt text provided for this image

Docker is a tool designed to make it easier to create, deploy, and run applications by using containers. Docker is an open platform for developing, shipping, and running applications. Docker enables you to separate your applications from your infrastructure so you can deliver software quickly. With Docker, you can manage your infrastructure in the same ways you manage your applications, It means you create your custom image. By taking advantage of Docker’s methodologies for shipping, testing, and deploying code quickly, you can significantly reduce the delay between writing code and running it in production.

HTTPd:

No alt text provided for this image

HTTPd stands for Hypertext Transfer Protocol daemon. HTTPd is a software program that usually runs in the background, as a process, and plays the role of a server in a client-server model using the HTTP and/or HTTPS network Protocols.

'httpd' is the Apache HyperText Transfer Protocol (HTTP) server program. It is designed to be run as a standalone daemon process. When used like this it will create a pool of child processes or threads to handle requests.

AWS

No alt text provided for this image

AWS (Amazon Web Services) is a comprehensive, evolving cloud computing platform provided by Amazon that includes a mixture of infrastructure as a service (IaaS), platform as a service (PaaS), and packaged software as a service (SaaS) offerings. As the lead cloud computing platform, Amazon Web Services (AWS) is the primary profit driver for Amazon. AWS provides servers, storage, networking, remote computing, email, mobile development, and security.?AWS for beginners offers database storage options, computing power, content delivery, and networking among other functionalities to help organizations scale up. It allows you to select your desired solutions while you pay for exactly the services you consume only.

Pre-requisite

  1. Docker installed on RHEL 8 O.S.
  2. Httpd service installed in our RHEL 8 O.S.

So, here we start with our task:-

No alt text provided for this image

Step 1: Installation of Httpd on top of our RHEL 8.0.

yum install httpd -y
        
No alt text provided for this image
No alt text provided for this image

HTTPD is now successfully installed.

Step 2: Installation of Docker?on top of our RHEL 8.0.

The command for same is


cd /etc/yum.repos.d/
        

Now, let’s type the following code in the repo file…(docker. repo file)


[docker]
baseurl=https://download.docker.com/linux/centos/7/x86_64/stable
gpgcheck=0

        

Now run this command to install Docker Community Edition-


yum install docker-ce --nobest -y
        
No alt text provided for this image

Docker is now successfully installed. Now let’s check.

Command used are :


rpm -aq | grep docker-ce

        

and command to see the version of docker is: docker --version

 


docker --version


        

To start the service we have :


systemctl start docker


        

To see the status of the service whether it is active or not we have :


systemctl status docker


        
No alt text provided for this image
No alt text provided for this image

Now let’s check httpd

To start the service we have :



systemctl start httpd

        

To see the status of the service whether it is active or not we have :


systemctl status httpd
        
No alt text provided for this image

Step 3: Creation of HTML,CSS AND JAVASCRIPT FILE in /var/www/html directory

No alt text provided for this image

The script part given below is from the code that I have shared in my GitHub repository below.

<script>
??function lw()
	        {
	        
	        var xhr=new XMLHttpRequest();
	        i=document.getElementById("in1").value;
	        
	        xhr.open("GET","https://65.2.148.204/cgi-bin/lw.py?x="+i,true);
	        xhr.send();
	        
	        xhr.onload=function (){
	        var output=xhr.responseText;
	        document.getElementById("d1").innerHTML=output;
	                      }
	        }
????????
</script>        

Github Repo for HTML,CSS and JAVASCRIPT code:

https://github.com/Pratikkohad1999/DockerProjects.git

Step 4: Creation of lw.py FILE in /var/www/cgi-bin directory

No alt text provided for this image

Step 5: Making Changes to /etc/group file

After this so that any non-root user can access from my server, I made changes as follows so that using the?"sudo"?command the non-root user can access the docker services.

In the terminal, we have to go to file-path?'/etc/group'.

Now we have to make the following change to allow our non-root users to access docker.


vim /etc/group
        
No alt text provided for this image

Step 6: Making Changes to /etc/sudoers file

No alt text provided for this image

Step 7: Using chmod command

We have to give access to our python file to be executable from the guest user. So for this, we have to give access to it by going into the directory where it was stored and then using the command given below.


chmod +x <your backend file name>.py
        
No alt text provided for this image

Now we are all set and can use our application in Windows web browser (Chrome) with the help of a URL.


https://<IP Address>/<your html file name >.html
        
No alt text provided for this image

Other output Screenshots:

No alt text provided for this image
No alt text provided for this image
No alt text provided for this image
No alt text provided for this image
No alt text provided for this image
No alt text provided for this image
No alt text provided for this image

Video Demonstration Link :

https://www.dhirubhai.net/posts/pratik-kohad-ab865719a_worldrecordholder-training-internship-activity-6867557296088719360-xdCY

Hence, we have successfully completed the task.

Thanks for Reading the article !!! ????????

Hope you might find this article helpful!!!!

You can appreciate the article by giving it a like and posting comments about your feedback.

Feel free to ask any queries. Don’t forget to share this article with your colleagues.??

No alt text provided for this image




要查看或添加评论,请登录

Pratik Kohad ????的更多文章

社区洞察

其他会员也浏览了