🌈Empower Your DevOps Skills: Setting Up Multi-Tier Web Apps Locally-🌈🚀

Sowmiya Shankar
6 min readOct 30, 2023

--

🌈Introduction:

▪Have you ever wondered 🤔about real-time DevOps projects and how they work in practice? If the answer is yes, you’re in the right place! In this blog, we’ll explore a perfect beginner-friendly DevOps project that will help you understand the core concepts and also enable you to apply them in a real-world scenario. 🚀

🌈Setting Up a Multi-Tier Web Application Stack: Manual vs. Automation:

▪In this project, we’ll set up a multi-tier web application stack using both manual and automated methods.

▪Now, you might be wondering, “What’s a multi-tier web application?” Think of a multi-tier web application like a delicious sandwich🥪 with different layers. Each layer serves a unique purpose, and when these layers come together, they form a robust and functional web application.

▪What’s even better? You can create this setup on your local laptop or desktop, making it a hands-on and accessible learning experience. 💻

🌈Architecture Overview of Multi-Tier Web Application [Manual Way]:

▪In our project, we will examine the architectural workflow of various essential services. These services, including Nginx, Tomcat, RabbitMQ, Memcached, and MySQL, play pivotal roles in creating a seamless web application experience.

image source: Udemy Imran DevOps project

▪Let’s break down what each of these services does:

Nginx: Nginx is a web server that serves web content. It’s commonly used to manage web traffic, improve website performance, and enable load balancing. 🌐

Apache Tomcat: Apache Tomcat is a web server and servlet container designed for hosting Java-based web applications. So, if you have a web application written in Java, Tomcat is a very famous service to host it. ☕

Memcached: Memcached is a high-performance, distributed, and in-memory caching system. It’s designed to store and manage frequently used data in the computer’s main memory (RAM) to accelerate data retrieval. 📦

MySQL: MySQL is an open-source relational database management system (RDBMS) that is used to store, manage, and retrieve data. It is one of the most popular database systems in the world. 🧭

▪When a person wants to use the website, they usually type a web address into their browser. In our project, instead of a web address, we use an IP address, kind of like a postal code for the website. Nginx helps with this, making sure requests from users go to the right place. 🖥️🌐

▪If the website needs extra storage for data, we can use NFS servers. These are like storage rooms for information. If you have a cluster of servers and require centralized storage, Network File System (NFS) can be used to achieve this. 🗄️

▪In our project, we’ve added RabbitMQ, which acts as a message broker or queuing agent. It’s typically used to help different parts of an application communicate and enable the flow of data. However, in our case, it’s not fully functional; it’s intentionally simplified. We included it to introduce a bit of complexity for learning purposes, providing you with more opportunities for practice. 🐇💌

▪Now, let’s get back to how the website works. When a person logs in with their username and password, the website has to find their information, which is stored in MySQL. However, before reaching MySQL, the request takes a quick stop at Memcached. Think of Memcached like a useful notepad where commonly used information is written down. So, instead of directly going to the large database (MySQL) every time, it first checks the notepad (Memcached). If it’s there, great! If not, it goes to the big library. 📝🏛️

▪This setup makes the website run smoothly, quickly, and reliably, just like when your web browser remembers things in its cache to load pages faster. 🚀🏃

🌈Why Set Up a Web Application Stack Manually?

▪Now, you might be wondering, why should I set up a web application stack manually? When you set up a multi-tier web application stack manually, you gain a deep understanding of the components, configurations, and how they interact. This knowledge can be invaluable for troubleshooting and optimizing your stack. 🛠️🧐

🌈Challenges of Manual Setup:

▪Setting up everything manually on your local machine can be pretty tricky. It takes a lot of time, and you can’t easily do it again if needed. We want to create a local test environment to do some research and feel more confident about our project. But dealing with multiple services is complex, and it’s a time-consuming task that can’t be repeated easily. 🕰️🧩

🌈A Solution to Our Problem:

▪So, what can we do? Well, we can still have a local setup, but here’s the exciting part — it will be automated! That means we can repeat it as many times as we want. We’ll use something called “infrastructure as code” to set up our entire stack automatically. It’s a completely automated process, making our lives much simpler. 🤖🎉

🌈Architectural Workflow of Automating Web Application Setup:

▪We’ll use Vagrant to automate the creation of virtual machines. 🛠️💻

▪Vagrant communicates with Oracle VM VirtualBox, serving as the hypervisor, to automatically set up these virtual machines. 📦🔌

▪We’ll employ batch scripts and commands to configure vital services like Tomcat, Memcached, RabbitMQ, and MySQL. This orchestration assembles the entire web application experience. 📋🚀

🌈Prerequisites:

Hypervisor — Oracle VM VirtualBox: Oracle VM VirtualBox is a virtualization platform that allows you to run multiple operating systems on a single physical machine. 🧳🖥️

Automation — Vagrant: Vagrant is an open-source tool for building and managing virtualized development environments. It simplifies setting up and configuring VMs for consistent development workflows. 📦🔧

Vagrant Plugins: Vagrant plugins are small software extensions that enhance Vagrant’s functionality. 🧩🔌

CLI — Git Bash: Git Bash is a command-line interface that provides a Unix-like terminal experience on Windows. It’s useful for executing Git commands and other command-line operations. ⌨️🐧

IDE — Visual Studio: It provides a comprehensive set of tools for coding, debugging, and deploying applications. Visual Studio is known for its developer-friendly features and support for multiple programming languages. 🖥️🧰

▪In my case, I used Visual Studio, but you can also opt for other IDEs like Sublime Text or Notepad Plus, depending on your preference. 📝✨

▪If you’re looking for an easy way to install all these tools, Chocolatey has you covered.

▪Chocolatey is a Windows package manager that simplifies software installation and updates by automating the process of fetching and setting up applications. While it’s not mandatory, it’s a convenient one-stop-shop that can make your life a whole lot easier.

▪To install Chocolatey, please visit this link https://chocolatey.org/install and follow the installation steps provided in the documentation.

Chocolatey installation

▪Once the installation is complete, open PowerShell or Command Prompt and run the following commands to install the software you need. 🍫🔧

Run all the below commands on PowerShell (Open PowerShell as Admin):

🌈VirtualBox installation:

choco install virtualbox --version=7.0.8 -y

🌈vagrant installation:

choco install vagrant --version=2.3.4 -y

🌈git installation:

choco install git -y

🌈vscode installation:

choco install vscode -y

🌈Vagrant plugins installation:

Execute below command to install hostmanager plugin.

$ vagrant plugin install vagrant-hostmanager

▪Once we’ve ensured the prerequisites, we’ll set up a multi-tier web application stack both manually and using automation. Stay tuned for my next blog, where I’ll guide you through the step-by-step hands-on process. Until then, happy automating! 🚀🛠️

⭐⭐Enjoy your learning….!!!🌈⭐⭐

--

--