GitOps with ArgoCD
ArgoCD with Jenkins CI Pipeline
Git Reposiories Dockerfile and Application Walkthrough
This article provides a detailed overview of the application source code along with its associated Git repositories. It covers two main areas: the GitOps repository managed by ArgoCD for Kubernetes deployment and the PHP-based Solar System application's source repository. Below, you'll find step-by-step explanations, code samples, and configuration details designed to help you understand the deployment process and application structure.
Git Repositories Overview
Two primary Git repositories are involved in this project:
- The source repository, which stores the application's source code.
- The GitOps repository, managed by ArgoCD, which contains the Kubernetes manifests used to deploy the application.
Let's start by exploring the GitOps repository.
GitOps Repository
Inside the GitOps repository, navigate to the Jenkins-demo
directory. Here, several Kubernetes manifests are available. These manifests define the necessary deployment and service resources in Kubernetes and are actively monitored by ArgoCD. Any changes detected in these manifests are automatically applied to the cluster, ensuring smooth configuration management.
Source Code Repository
The second repository contains the PHP-based Solar System application. This repository includes an index.php
file and an images folder, which provides the visual assets required for the application. Specifically, the index.php
file integrates PHP with HTML, rendering the application's user interface with dynamic elements.
The UI relies on two critical visual components:
- The Solar System image for creating engaging animations.
- A background image that enhances the overall visual appeal.
Below is the core CSS embedded within the index.php
file, responsible for styling and animating the application:
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#solar-system {
background: url("http://139.59.21.103:3000/siddharth/solar-system/raw/branch/main/images/solar-system-9.png") center center;
background-repeat: no-repeat;
background-size: cover;
content: "";
position: static;
animation: spin 25s linear infinite;
width: 50vw;
height: 50vw;
}
@keyframes spin {
100% { transform: rotate(360deg); }
}
body {
display: flex;
align-items: center;
justify-content: center;
background: url("http://139.59.21.103:3000/siddharth/solar-system/raw/branch/main/images/background.png");
}
/*
.shadow {
animation: rainbow 2s linear infinite;
} */
</style>
Note
The above CSS ensures the Solar System element is animated with a 25-second rotation cycle, while the overall page maintains a centered layout with a static background.
Dockerizing the PHP Application
Containerization is simplified through the use of a Dockerfile included in the project. This Dockerfile leverages an official PHP image with Apache, copying the necessary source files and assets into the appropriate directory for deployment on a web server.
Below is the Dockerfile content:
FROM php:7.4-apache
COPY index.php /var/www/html/
COPY images /var/www/html/images
EXPOSE 80
The Dockerfile performs the following steps:
- Uses the official
php:7.4-apache
base image. - Copies the
index.php
file into the Apache default web directory at/var/www/html/
. - Copies the entire
images
directory into/var/www/html/images
to ensure all visual assets are available. - Exposes port 80, which is the default port for Apache, enabling web traffic to access the application.
Additional Files
In addition to the main application code and Dockerfile, the repository also contains:
- A Jenkinsfile for configuring continuous integration pipelines.
- A pr.sh shell script used for automating pull request tasks.
These additional files help streamline CI/CD workflows and will be discussed in greater detail in a forthcoming article.
Thank you for reading this walkthrough. For more information on similar topics, consider exploring the following resources:
Happy coding!
Watch Video
Watch video content