Let's understand the major concepts first before doing the labs.
A) WEB APP
A web App, short for web application, is a a software application that runs on a web server and is accessed through a web browser or mobile device. It's a dynamic ad interactive way to provide services, information or entertainment to users over the internet. Web app have become increasingly popular due to their flexibility, scalability and accessibility.
KEY CHARACTERISTICS
1) DYNAMIC CONTENT: Web apps can update content in real-time, providing users with the most recent information
2) INTERACTIVITY: Users can interact with web apps through forms, buttons, and other UI elements, enabling a range of functionalities.
3) ACCESSIBILITY: Web apps can be accessed from anywhere, on any device with a web browser, making them highly accessibility.
4) SCALABILITY: Web apps can handle a large number of users and traffic, making them ideal for businesses and organizations.
TYPES OF WEB APPS:
1) STATIC WEB APPS: Simple web apps with static content that doesn't change frequently
2) DYNAMIC WEB APPS: Web apps that generate content on the fly based on user interactions or data changes.
3) PROGRESSIVE WEB APPS: Web apps that provide a native app-like experience, with features like offline support and push notifications.
B) CI/CD PIPELINES
CI/CD pipelines stands for Continuous Integration/ Continuous Deployment pipelines. CI/CD pipelines are a set of automated processes that help software development developments teams build, test and deploy high quality software faster and more reliable. CI/CD pipelines are a crucial part of DevOps practices, enabling teams to deliver software updates quickly and efficiently.
KEY COMPONENTS:
i) Continuous Integration (CI): Automates the build, test and
validation of code changes
ii) Continuous Deployment (CD): Automates the deployment of validated
code changes to production.
BENEFITS:
a) FASTER TIME-TO-MARKET: CI/CD pipelines enable teams to deliver
software updates quickly, reducing the time it takes for features
to reach users.
b) IMPROVED QUALITY: Automated testing and validation ensure that code
changes meet quality standards.
c) INCREASED EFFICIENCY: Automation reduces manual errors and frees up
developers to focus on writing code.
TOOLS AND TECHNOLOGIES
i) AZURE PIPELINES: A cloud-based CI/CD service that integrates with
Azure DevOps.
ii) GITHUB ACTIONS: A CI/CD platform that automates build, test and
deployment workflows.
iii)JENKINS: A popular open-source CI/CD tool
C) AZURE APP SERVICE
Azure App Service is a fully managed platform-as-a-service
(PaaS) offering from Microsoft Azure that enables developers to build, deploy and scale web applications quickly and efficiently. Azure App Service provides a range of features and tools to support web app development, deployment and management.
KEY FEATURES:
i) MANGED PLATFORM: Azure App Service manages the underlying infras-
tructure, patching and scaling.
ii) Support for Multiple Languages: Supports a range of programming
languages, including NET, Java, Python, Nodes.js etc.
iii) INTEGRATION WITH AZURE SERVICES: Seamless integration with other
Azure services, such as Azure DevOps, Azure storage and Azure SQL
Database.
BENEFITS:
- FASTER DEPLOYMENT: Quickly deploy web apps without worrying about infrastructure management
- SCALABILITY: Scale web apps to meet changing demands
- SECURITY: Leverage Azure's robust security features to protect web apps.
USE CASES
a) WEB APPLICATIONS: Build and deploy web applications using a variety
of programming languages and frameworks.
b) APIs: Create RESTful APIs to expose data and functionality to other
applications.
c) MOBILE APPS: Build and deploy mobile apps using Azure App Service's
mobile backend capabilities.
TO DEPLOY A WEB APP WITH CI/CD PIPELINES ON AZURE APP SERVICE,
- Sign in to azure portal using portal.azure.com & Create a Web App:
From the home page, search for App Service Plan as seen in the image below.
Click on 'app service plan'
Click on 'create'
- Create a Resource group
- Give the app service plan a name
- select your preferred operating system type
- select your preferred region
scroll down;
- Select preferred pricing plan
- click on 'review and create'
Click on 'create'
Deployment is complete, click on 'Go to resource'
2) Create 'App Service'
- on your search bar, type 'App service'
Click on the drop down menu under 'create'
- select 'web app'
On the create web app page;
- use the already created resource group earlier used in creating app service
- give the instance a name
- On publish, select 'code' to publish
- select your preferred runtime stack
- select your preferred operating system
- select the same region earlier used
Allow Linux plan and pricing plan at default
- click on 'Next'
Move from 'Database' option to 'Deployment' option then click next to 'Networking' option, then 'Monitor + secure' then finally click on 'Review and Create'
Click on 'Create'
When the deployment is complete, click on 'Go to resource'
On the overview page, copy the link to a browser and enter
After pasting the link: ema-web-app-bpbudccndaa9gcbe.eastus2-01.azurewebsites.net
my default web app is running waiting for contents to be pushed in.
3) Open VS code, go to file, open folder to create a new folder and give it a name
In the new file created, type index.php and press enter to run the code below
To push a file to GitHub, there is need to create a file. type the code and save as shown below
To do this, we have to create a GitHub repository. Go to GitHub and create a repository so that azure can read it. go to github.com
Give the repository a name and create
We are going to run GitHub commands on our VS code
The first code I will be running is 'git init'
On the VScode terminal, type 'git init'
The second code I will be running is 'git add index.php'
The third code I will be running is 'git status'
The fourth command I will be running is 'git commit -m "first commit"
The fifth command I will be running is 'git remote add origin https://github.com/Iniema84/ema-web-app.git'
The sixth command I will be running is 'git push -u origin master'
4) To push my content to the web, I'll go to azure portal, deployment center, on the drop down menu select 'github'
On the GitHub page, click on 'authorize AzureAppService'
After inputting the password, the page below will be displayed
- Fill in the organization name
- the repository name and
- the branch
Scroll down
Click on 'Preview' to view my CI/CD workflow configuration
Scroll up and click on 'save' to save the configuration
After successfully saving the configuration, the page below will be displayed
My content is successfully hosted on the web as shown
To make changes to my content, lets go to VScode
-add additional content
Run git add command
- git commit -m "second commit"
- git push and
- git pull origin master
The display below shows that the pull was successful
Finally, lets run the git push command, type 'git push' and press enter key
To confirm if the push is successful, Go to azure portal, deployment center
The CI/CD deployment was successful
Top comments (1)
My CI/CD was successfully integrated and deployed