devops-group-overleaf/digitalOceanDocker.tex

\chapter{Digital Ocean Docker Deployment}

\section{Overview}

This chapter documents the deployment of the group's Docker-based website to a DigitalOcean Droplet. The application is a Node.js and Express website containing two buttons. The buttons change the background color of the webpage to either blue or red.

The website was modified to use a class-based JavaScript implementation. The application was then deployed inside a Docker container running on an Ubuntu DigitalOcean Droplet.

\section{DigitalOcean Droplet Setup}

A DigitalOcean Droplet was created using Ubuntu as the operating system. Password authentication was selected during Droplet creation. The Droplet was accessed remotely using SSH with the root account and the password configured during creation.

The Droplet was accessed with the following command:

\begin{minted}{bash}
ssh root@<DROPLET-IP>
\end{minted}

After connecting to the Droplet, the Ubuntu package lists were updated and available packages were upgraded.

\begin{minted}{bash}
sudo apt update
sudo apt upgrade -y
\end{minted}

\section{Installing Docker}

Docker Engine was installed on the Ubuntu Droplet using Docker's official Ubuntu package repository.

First, the required packages were installed:

\begin{minted}{bash}
sudo apt install ca-certificates curl -y
\end{minted}

The Docker repository signing key was then installed:

\begin{minted}{bash}
sudo install -m 0755 -d /etc/apt/keyrings
sudo curl -fsSL https://download.docker.com/linux/ubuntu/gpg \
  -o /etc/apt/keyrings/docker.asc
sudo chmod a+r /etc/apt/keyrings/docker.asc
\end{minted}

The Docker repository was added:

\begin{minted}{bash}
sudo tee /etc/apt/sources.list.d/docker.sources <<EOF
Types: deb
URIs: https://download.docker.com/linux/ubuntu
Suites: $(. /etc/os-release && echo "${UBUNTU_CODENAME:-$VERSION_CODENAME}")
Components: stable
Architectures: $(dpkg --print-architecture)
Signed-By: /etc/apt/keyrings/docker.asc
EOF
\end{minted}

The package list was updated and Docker was installed:

\begin{minted}{bash}
sudo apt update
sudo apt install docker-ce docker-ce-cli containerd.io \
  docker-buildx-plugin docker-compose-plugin -y
\end{minted}

Docker was checked to verify that the service was running:

\begin{minted}{bash}
sudo systemctl status docker
\end{minted}

The installation was tested using Docker's Hello World image:

\begin{minted}{bash}
sudo docker run hello-world
\end{minted}

The successful execution of the Hello World container verified that Docker was installed and functioning on the Droplet.

\section{Website Application}

The application uses Node.js and Express. The Docker project contains the following files:

\begin{itemize}
    \item \texttt{Dockerfile} -- defines how the Docker image is built.
    \item \texttt{package.json} -- defines the Node.js application and its dependencies.
    \item \texttt{server.js} -- starts the Express web server.
    \item \texttt{public/index.html} -- contains the webpage.
    \item \texttt{public/script.js} -- contains the class-based JavaScript implementation.
\end{itemize}

The Dockerfile uses Node.js 20 Alpine as its base image and exposes port 3000.

\section{Class-Based JavaScript}

The website was changed from individual button event handlers to a reusable \texttt{ColorButton} class.

\begin{minted}{javascript}
class ColorButton {
    constructor(buttonId, color) {
        this.button = document.getElementById(buttonId);
        this.color = color;
        this.initialize();
    }

    initialize() {
        this.button.addEventListener("click", () => this.handleClick());
    }

    handleClick() {
        document.body.style.backgroundColor = this.color;
    }
}

const blueButton = new ColorButton("blueBtn", "blue");
const redButton = new ColorButton("redBtn", "red");
\end{minted}

The \texttt{ColorButton} class contains the button element and its associated color. The constructor receives the HTML element ID and the color, and \texttt{initialize()} registers the click event. When the button is clicked, \texttt{handleClick()} changes the webpage background color.

Two objects are created from the class:

\begin{itemize}
    \item \texttt{blueButton} uses the \texttt{blueBtn} element and the color \texttt{blue}.
    \item \texttt{redButton} uses the \texttt{redBtn} element and the color \texttt{red}.
\end{itemize}

\section{UML Class Diagram}

Figure~\ref{fig:color-button-uml} shows the class-based design. Both button objects are instances of the \texttt{ColorButton} class.

\begin{figure}[htbp]
    \centering
    \includegraphics[width=0.75\textwidth]{ColorButtonUML.png}
    \caption{UML class diagram for the class-based ColorButton implementation}
    \label{fig:color-button-uml}
\end{figure}

\section{Transferring the Application to the Droplet}

The application files were transferred to the DigitalOcean Droplet. For example, the project directory can be copied from the local computer with:

\begin{minted}{bash}
scp -r color-buttons-digitalocean root@<DROPLET-IP>:/root/
\end{minted}

After the files were transferred, an SSH connection was used to access the project:

\begin{minted}{bash}
ssh root@<DROPLET-IP>
cd /root/color-buttons-digitalocean
\end{minted}

\section{Building the Docker Image}

The Docker image was built from the project's Dockerfile:

\begin{minted}{bash}
docker build -t color-buttons-app .
\end{minted}

The resulting Docker image can be viewed with:

\begin{minted}{bash}
docker images
\end{minted}

\section{Running the Docker Container}

The application container was started with the following command:

\begin{minted}{bash}
docker run -d --name color-buttons-app -p 80:3000 color-buttons-app
\end{minted}

The \texttt{-d} option runs the container in detached mode. The \texttt{--name} option gives the container the name \texttt{color-buttons-app}. The \texttt{-p 80:3000} option maps port 80 on the DigitalOcean Droplet to port 3000 inside the Docker container.

The resulting connection is:

\begin{center}
\texttt{Internet -> Droplet port 80 -> Docker port 3000 -> Express server}
\end{center}

The running container was verified with:

\begin{minted}{bash}
docker ps
\end{minted}

The port mapping should appear similar to:

\begin{minted}{text}
0.0.0.0:80->3000/tcp
\end{minted}

\section{Deployment Verification}

The deployed website was accessed using the public IP address assigned to the DigitalOcean Droplet.

\begin{center}
\url{http://<DROPLET-IP>}
\end{center}

The website was tested by selecting both buttons. Selecting the blue button changed the webpage background to blue. Selecting the red button changed the webpage background to red.

\begin{figure}[htbp]
    \centering
    \includegraphics[width=0.90\textwidth]{digitalOceanWebsite.png}
    \caption{Website running from the DigitalOcean Docker deployment}
    \label{fig:digitalocean-website}
\end{figure}

\section{Deployment Summary}

The deployment process consisted of the following steps:

\begin{enumerate}
    \item A DigitalOcean Ubuntu Droplet was created.
    \item The Droplet was accessed using SSH and password authentication.
    \item Ubuntu was updated.
    \item Docker Engine was installed and tested.
    \item The class-based JavaScript website was transferred to the Droplet.
    \item A Docker image named \texttt{color-buttons-app} was built.
    \item A Docker container was created from the image.
    \item Port 80 on the Droplet was mapped to port 3000 in the container.
    \item The website was accessed through the Droplet's public IP address.
    \item The blue and red buttons were tested to verify the deployed application.
\end{enumerate}