DEV Community

Cover image for How to Deploy a Web App Using Ansible in 10 Minutes
Krisha Arya
Krisha Arya

Posted on

How to Deploy a Web App Using Ansible in 10 Minutes

#devops #beginners #tutorial #cloud

💡 What is Ansible?

Ansible is a powerful automation tool used for:

✔ Server configuration
✔ Application deployment
✔ Orchestration
✔ Multi-server management

It works over SSH, requires no agent, and uses YAML playbooks to automate tasks.
Ansible is extremely popular in DevOps because of its simplicity and agentless architecture.

In this guide, you will learn:

How to install Ansible
How to set up a project structure
How to create inventory files
How to write playbooks
How to deploy a web page using Ansible

Step 1: Install Ansible on Ubuntu

sudo apt update
sudo apt install ansible -y
ansible --version
Enter fullscreen mode Exit fullscreen mode

Step 2: Create Ansible Project Structure

Create project folder:

mkdir ansible_demo
cd ansible_demo
Enter fullscreen mode Exit fullscreen mode

Create inventory & playbooks directories:

mkdir inventory playbooks
Enter fullscreen mode Exit fullscreen mode

Create inventory file:

cd inventory
touch hosts.ini
Enter fullscreen mode Exit fullscreen mode

Create playbook file:

cd ../playbooks
touch web_prac.yml
Enter fullscreen mode Exit fullscreen mode

Step 3: Add SSH Key to the Project

In the project root directory:

cd ..
mkdir ssh
cd ssh
touch nagios.pem
Enter fullscreen mode Exit fullscreen mode

Paste your PEM key content into nagios.pem.
Then assign secure permissions:

chmod 600 nagios.pem
Enter fullscreen mode Exit fullscreen mode

Step 4: Test SSH Connection with PEM

ssh -i ssh/nagios.pem ubuntu@ip_address_of_any_instance
Enter fullscreen mode Exit fullscreen mode

If you successfully log in → connection OK.

Step 5: Create Files Folder for Static Content

This is used when deploying frontend assets (like index.html):

cd ../playbooks
mkdir files
cd files
touch index.html
Enter fullscreen mode Exit fullscreen mode

You can add your HTML content inside index.html.

Step 6: Sample Playbook (web_prac.yml)

Inside ansible_demo/playbooks/web_prac.yml

---
- name: Setup Web Server
  hosts: webserver
  become: yes

  tasks:

    - name: Install NGINX
      apt:
        name: nginx
        state: present
        update_cache: yes

    - name: Copy index.html to web server
      copy:
        src: files/index.html
        dest: /var/www/html/index.html
        owner: www-data
        group: www-data
        mode: '0644'

    - name: Start and enable NGINX
      service:
        name: nginx
        state: started
        enabled: yes
Enter fullscreen mode Exit fullscreen mode

Step 7: Inventory File — hosts.ini

Inside ansible_demo/inventory/hosts.ini

[webserver]
13.201.29.244 

ansible_user=ubuntu 
ansible_ssh_private_key_file=../ssh/nagios.pem
Enter fullscreen mode Exit fullscreen mode

Step 8: Run the Ansible Playbook

From the ansible_demo directory:

ansible-playbook -i inventory/hosts.ini playbooks/web_prac.yml
Enter fullscreen mode Exit fullscreen mode

If successful →
✔ NGINX installed
✔ index.html deployed
✔ Web server active

Step 9: Verify on Browser

Open:

http://ip_address_of_instance

You should see your index.html content served via NGINX.

🎉 Final Result

By the end of this guide, you have:

  • Installed Ansible
  • Created a professional project structure
  • Created an inventory file
  • Created a YAML playbook
  • Added SSH key for authentication
  • Automated deployment of a web page

Top comments (0)