DEVOPS ADVANCE CONFIGURATION MANAGEMENT

– INT-33
Memory Match Game Deployment Using Ansible
submitted in partial fulfilment of the requirement for the award of
degree of

BACHELOR OF TECHNOLOGY
In (Computer science and Engineering)

Submitted to Mrs. Chavi Ralhan Mam

Submitted By
Name B.Durga Bhavana
Reg No 12110740
Roll No 70
Section K0309
 TABLE OF CONTENTS

Inner first page ............................................................. (i)

Table of Contents ........................................................... (ii)

1. INTRODUCTION ........................................................... (iV)

2. PROBLEM STATEMENT ................................................ (iV)

2.1. Profile of the Problem .................................

2.2. Rationale/Scope of the Study .................

2.3. Feasibility Analysis ..........................................

2.4. Project Plan ..........................................................

3. SOFTWARE REQUIREMENT ANALYSIS ............(V)

3.1. Introduction ..........................................................

3.2. General Description ...........................................

3.3. Specific Requirements ....................................

4. DESIGN ............................................................. (Vii)

4.1. System Design ....................................................

4.2. Design Notations .................................................

4.3. Detailed Design ...................................................

4.4. Flowcharts ............................................................ (Viii)

ii
4.5. Pseudo Code .......................................................

5. IMPLEMENTATION .................................................. 11

5.1. Implementation of the Project .................

5.2. Conversion Plan .................................................

5.3. Post-Implementation and Software Maintenance .....

6. PROJECT LEGACY .................................................12

6.1. Current Status of the Project .......................

6.2. Remaining Areas of Concern .....................

6.3. Technical and Managerial Lessons Learnt ....

7. SOURCE CODE OR SYSTEM SNAPSHOTS ....... (13-20)

8. BIBLIOGRAPHY .......................................................... 21

iii
1. Introduction

This project demonstrates the deployment of a Memory Match Game on a

remote server using Ansible, an automation tool. The game is a simple yet

engaging browser-based game where users match pairs of cards by flipping

them. The game is developed using HTML, CSS, and JavaScript. The

deployment process uses Ansible to automate the setup of the necessary web

server (Apache) and the transfer of the required files. This report covers the

entire process from project initiation to deployment.

2. Problem Statement

Profile of the Problem:

In a typical web application deployment scenario, manually setting up the web

server, transferring files, and ensuring the configuration are consistent across

environments can be tedious and error-prone. Automating this process using

Ansible can streamline the deployment, ensuring quick, repeatable, and error-

free deployment of applications.

Rationale/Scope of the Study:

The primary goal of this project is to deploy a simple Memory Match Game

on a remote server using Ansible to automate the deployment of the web

application. The scope covers:

 Installing and configuring Apache as a web server on the target machine.

server.

 Ensuring the game is accessible via a browser after deployment.

Feasibility Analysis:

The project is feasible within the given timeframe and resources. The game

does not require complex server-side technologies or databases, making it

suitable for deployment using simple web technologies. The use of Ansible

further simplifies the deployment process by automating the tasks.

Project Plan:

 Phase 1: Setup – Install necessary software (Apache) on the target node.

 Phase 2: File Deployment – Copy the game’s files to the server.

 Phase 3: Testing and Verification – Ensure the game is accessible via the

web.

3. Software Requirement Analysis

Introduction

The Memory Match Game requires a web browser to run, as it is a client-

side application built using HTML, CSS, and JavaScript. The server-side

requirements are minimal: a web server (Apache) is required to serve the static

files.

v
General Description

 The game will be deployed on a remote Ubuntu server running Apache.

 The target server will host static files (HTML, CSS, and JavaScript),

which will be served by Apache to the user’s web browser.

 The deployment process will be automated using Ansible to ensure ease of

management and reproducibility.

Specific Requirements

 Hardware Requirements:

o A remote Ubuntu server (target node) for deployment.

o A local machine (manager node) with Ansible installed to manage the

deployment.

 Software Requirements:

o Apache2 – Web server to serve the game files.

o Ansible – Automation tool for deployment.

o SSH – For secure communication between manager and target nodes.

 File Requirements:

o index.html – The main HTML file for the game.

o styles.css – The CSS file for styling the game.

o script.js – JavaScript file to implement the game’s logic.

vi
4. Design

System Design

The system design focuses on the deployment architecture using Ansible and

Apache. It is a simple client-server architecture where:

 Manager Node (local machine) – Contains the Ansible playbook,

inventory file, and the game’s files.

 Target Node (remote server) – The Ubuntu server where the game is

deployed. Apache is configured to serve the game files.

Design Notations

The system follows the standard client-server model:

 The manager node acts as the client initiating the playbook execution.

 The target node acts as the server hosting the game’s files and serving

them over HTTP.

Detailed Design

1. Manager Node:

o Installs Ansible to automate the deployment.

o Defines the inventory file that lists the target server’s IP and SSH

key.

o Contains the playbook (deploy.yml) for setting up the game.

vii
 2. Target Node:

o Installs Apache to host the static files.

o The index.html, styles.css, and script.js are copied to the appropriate

directory (/var/www/html/).

o The Apache server is restarted to apply changes.

Flowchart:

1.Flow of Deployment Process:

viii
2)Flow of Game Interaction:

ix
Pseudo Code:

Deploy.yml

---

- name: Deploy Memory Match Game

hosts: target

become: yes

tasks:

- name: Install Apache web server

apt:

name: apache2

state: present

- name: Start Apache service

systemd:

name: apache2

state: started

enabled: yes

- name: Copy memory game files to Apache root

copy:
1
 src: "/path/to/memory-game/"

dest: "/var/www/html/"

owner: www-data

group: www-data

mode: '0755'

recurse: yes

- name: Ensure Apache service is running

systemd:

name: apache2

state: restarted

enabled: yes

Index.html

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Memory Match Game</title>

<link rel="stylesheet" href="style.css">

</head>

2
<body>

<div class="game-container">

<h1>Memory Match Game</h1>

<div class="board">

<!-- Game cards will be inserted here dynamically -->

</div>

<div class="game-info">

<button class="restart-btn">Restart Game</button>

<p class="moves">Moves: 0</p>

</div>

</div>

<script src="script.js"></script>

</body>

</html>

Style.css

/* General reset */

*{

margin: 0;

padding: 0;

box-sizing: border-box;

}
3
body {

font-family: 'Arial', sans-serif;

background: #f8f8f8;

display: flex;

justify-content: center;

align-items: center;

height: 100vh;

flex-direction: column;

.game-container {

text-align: center;

background: #fff;

padding: 20px;

box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);

border-radius: 10px;

h1 {

font-size: 36px;

margin-bottom: 20px;

}
4
.board {

display: grid;

grid-template-columns: repeat(4, 100px);

gap: 10px;

justify-content: center;

margin-bottom: 20px;

.card {

width: 100px;

height: 100px;

background: #3498db;

display: flex;

justify-content: center;

align-items: center;

font-size: 24px;

color: transparent;

border-radius: 10px;

cursor: pointer;

transition: transform 0.3s ease;

5
.card.flipped {

background: #fff;

color: #3498db;

transform: rotateY(180deg);

.card.matched {

background: #2ecc71;

color: #fff;

transform: rotateY(180deg);

cursor: default;

.game-info {

margin-top: 20px;

button {

padding: 10px 20px;

background-color: #3498db;

border: none;

color: white;

border-radius: 5px;

6
 cursor: pointer;

button:hover {

background-color: #2980b9;

.moves {

margin-top: 10px;

font-size: 18px;

Script.js:

// Select the board and game information

const board = document.querySelector('.board');

const movesText = document.querySelector('.moves');

const restartBtn = document.querySelector('.restart-btn');

// Card symbols and shuffle function

◆', '
const symbols = ['` ', 'e
·', '
Ċ ', ' ', ' ◆', '~
', '` :'];

let gameCards = [...symbols, ...symbols];

gameCards = shuffle(gameCards);

// Variables to track game state

let matchedCards = [];

let moveCount = 0;

// Function to shuffle cards

function shuffle(array) {

return array.sort(() => Math.random() - 0.5);

// Create and display cards on the board

function createCards() {

board.innerHTML = '';

gameCards.forEach((symbol, index) => {

const card = document.createElement('div');

card.classList.add('card');

card.dataset.index = index;

card.dataset.symbol = symbol;

card.addEventListener('click', flipCard);

board.appendChild(card);

});

// Handle card flip

8
function flipCard(event) {

const card = event.target;

if (flippedCards.length < 2 && !card.classList.contains('flipped') &&

!card.classList.contains('matched')) {

card.classList.add('flipped');

card.textContent = card.dataset.symbol;

flippedCards.push(card);

// Check if two cards are flipped

if (flippedCards.length === 2) {

checkMatch();

// Check if two flipped cards match

function checkMatch() {

moveCount++;

movesText.textContent = `Moves: ${moveCount}`;

const [card1, card2] = flippedCards;

if (card1.dataset.symbol === card2.dataset.symbol) {

9
 card1.classList.add('matched');

card2.classList.add('matched');

matchedCards.push(card1, card2);

flippedCards = [];

// Check if the game is won

if (matchedCards.length === gameCards.length) {

setTimeout(() => alert('You won the game!'), 500);

} else {

setTimeout(() => {

card1.classList.remove('flipped');

card2.classList.remove('flipped');

flippedCards = [];

}, 1000);

// Restart the game

function restartGame() {

gameCards = shuffle([...symbols, ...symbols]);

matchedCards = [];

flippedCards = [];

10
 moveCount = 0;

movesText.textContent = `Moves: 0`;

createCards();

// Add event listener to the restart button

restartBtn.addEventListener('click', restartGame);

// Start the game by creating cards

createCards();

5. Implementation

Implementation of the Project

The project is implemented by setting up an Apache server on the target node, copying

the HTML, CSS, and JavaScript files using an Ansible playbook, and ensuring the

server is running to serve the game in a browser.

Conversion Plan

1. Manual Deployment to Automated Deployment:

o Previously, deploying the game would require manually installing Apache

and copying the files. With Ansible, the deployment process is automated,

making it easier to replicate on other servers and ensuring consistency.

2. From Single Server to Multiple Servers:

o The playbook can be extended to deploy the game to multiple target nodes

by adding more servers to the hosts file.

Post-deployment, the game can be maintained by:

 Updating game files (e.g., improving the JavaScript or CSS).

 Ensuring the Apache server is running and accessible.

 Scaling the game for multiple users by enhancing the backend or optimizing the

Apache configuration.

6. Project Legacy

Current Status of the Project

The Memory Match Game has been successfully deployed and is accessible via a web

browser on the target node. The deployment process has been automated using Ansible.

Remaining Areas of Concern

 Scalability: The game could be enhanced by implementing user authentication or

a score system.

 Performance: Apache can be optimized for better performance if there is a large

number of concurrent users.

Technical and Managerial Lessons Learnt

 Technical: The process of automating deployments with Ansible significantly

reduces the complexity of repetitive tasks and minimizes human error.

 Managerial: Automation tools like Ansible can streamline workflows and

improve collaboration, making project management more efficient.

12
7. Source Code (where ever applicable) or System Snapshots

1)Create 2 ec2 instances

Manger Node:

public 16.171.140.106

private 172.31.38.134

Target Node:

public 16.171.43.110

private 172.31.43.136

13
2) Install Ansible in Manager Node

sudo apt update

sudo apt install ansible -y

14
Set Up the Ansible Project

1. Create the Project Directory:

mkdir project

cd project

2. Create Required Files and Directories:

touch ansible.cfg hosts deploy.yml

mkdir -p files templates

15
3) hosts: inventory file

nano hosts:Configure your target node private ip address

4) nano ansible.cfg

16
5) nano deploy.yml(playbook)

6) nano files/index.html

7) nano files/style.css

17
8) nano files/script.js

18
9) Deploy the playbook

ansible-playbook deploy.yml

19
10) Now access your website with the public ip address of your

target node

http://16.171.43.110/

20
8. Bibliography (References)

 Ansible Documentation: https://docs.ansible.com

 Apache Documentation: https://httpd.apache.org/docs/

 HTML5 and CSS3 Guide: https://www.w3schools.com

 JavaScript Documentation: https://developer.mozilla.org/en-

US/docs/Web/JavaScript

21