Day 44: Deploying Web App using Ansible

Hello everyone!

In the last article, we saw how to write Ansible playbooks and deploy services on worker nodes using the same. Today as we wind up Ansible, we will deploy a web application on a worker node from the MAster server using Ansible. Let's jump into it.

Tasks:

Task 1) Create 2 EC2 instances. Make sure all three are created with the same key pair

Here, we have already created 2 EC2 instances in the previous articles of our series. So we will use the same instances here.

Task 2) Install Ansible in the host server.

Task 3) Copy the private key from local to the Host server (Ansible_host)

Task 3) Access the inventory file using sudo vim /etc/ansible/hosts

All the above tasks are been already done. You can check the previous article to perform the above tasks.

Task 4) Create a playbook to install Nginx

Create a file called “install_nginx.yaml”

---
- name: playbook5
  hosts: all
  become: true
  tasks:
  - name: update apt cache
    apt:
      update_cache: yes

  - name: install nginx
    apt:
      name: nginx
      state: present

Task 5) Deploy a sample webpage using the Ansible playbook

Now we will deploy a sample webpage using the Ansible playbook. this sounds interesting.

Create a file called “index.html”

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Welcome to My Nginx Ansible Web Application</title>
    <style>
        /* CSS styles */
        body {
            font-family: Arial, sans-serif;
            background-color: #f0f0f0;
            margin: 0;
            padding: 0;
            text-align: center;
        }

        header {
            background-color: #333;
            color: #fff;
            padding: 20px;
        }

        h1 {
            font-size: 2em;
        }

        .container {
            margin: 20px;
            padding: 20px;
            background-color: #fff;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
    </style>
</head>
<body>
    <header>
        <h1>Welcome to My Nginx Ansible Web Application</h1>
    </header>
    <div class="container">
        <p>This is a basic HTML page with CSS.</p>
        <p>Replace this content with your own web application content.</p>
    </div>
</body>
</html>

Now we will create a playbook to perform this particular task. Create a file called deploy_webapplication.yaml

---
- name: Deploy a web app
  hosts: all
  become: true
  tasks:
  - name: update apt cache
    apt:
      update_cache: yes

  - name: install nginx
    apt:
      name: nginx
      state: latest

  - name: start nginx
    service:
     name: nginx
     state: started

  - name: deploy webpage
    copy:
     src: index.html
     dest: /home/ansible