DEV Community: B.G.Skillz 🧑‍💻

[Boost]

B.G.Skillz 🧑‍💻 — Sun, 21 Dec 2025 15:18:47 +0000

Dockerizing a React Task: A Hands-On DevOps Implementation

B.G.Skillz 🧑‍💻 ・ Dec 20

Dockerizing a React Task: A Hands-On DevOps Implementation

B.G.Skillz 🧑‍💻 — Sat, 20 Dec 2025 04:16:30 +0000

In this article, I’ll walk through how I built a Dockerized React Task Manager from scratch, emphasizing real-world DevOps practices like containerization, multi-stage builds, and production-ready deployment.

1. Project Overview

Build a React-based Task Manager to track tasks in real time.

Containerize the frontend using Docker and serve it with Nginx.

Set up a backend API placeholder for future integration.

Implement multi-container orchestration using Docker Compose.

This project serves as both a DevOps practice exercise and a production-ready application template.

2. File Structure

devops-react-task-manager/ ├── frontend/ │ ├── Dockerfile │ ├── nginx.conf │ ├── package.json │ └── src/ ├── backend/ │ ├── Dockerfile ├── package.json │ └── app.js ├── docker-compose.yml ├── .env └── README.md

3. Setting Up the React Environment

I use vite for React
cd frontend npm create vite@latest . -- --template react npm install npm run dev

Verified the React app works locally.
Initially displayed default Vite UI with counter and logos

4. Containarized the frontend

# Build stage
FROM node:20-alpine AS build
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build

# Production stage
FROM nginx:alpine
COPY nginx.conf /etc/nginx/conf.d/default.conf
COPY --from=build /app/dist /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

In the first Dockerfile I wrote I use node:18 which It doesnt work with vite during the testing I met with errors before realizing vite doesnt work with version 18 but version 20.

5. Docker Compose Setup

version: "3.9"

service:
  frontend:
   build: ./frontend
   ports:
   - "3000:80"
   depend_on:
   - backend

  backend:
  build: ./backend
  ports:
  -"5000:5000
  env_file:
  - .env
  network:
  - devops-net

network:
 devops-net:
  driver: bridge

frontend: React app served via Nginx on port 3000.
backend: Placeholder API for future development.

Building Containers

docker compose up --build
TO run in background
docker compose up -d --build

Frontend available at http://localhost:3000

Backend available at http://localhost:5000

What I understand after the implementation

Multi-stage Docker builds for optimized production images.
Node version management: Vite requires Node 20+.
Frontend-backend orchestration with Docker Compose.
Nginx for static hosting of React production builds.
Container networking: frontend calls backend using service names.
Troubleshooting: identifying build errors and version mismatches.

Docker for Beginners: How I Containerized an Existing Project Node-by-Node

B.G.Skillz 🧑‍💻 — Wed, 10 Dec 2025 23:05:12 +0000

INTRODUCTION

The Local Government Report System is a system develop for people in a Local Government to report any activity going in their area in order for the local government representative.
I dockerized this project in order to make because dockerization is important for project to provides conistent and reliale way to deploy applications across different environments.

PROJECT OVERVIEW

The Project was cloned from GitHub and the READ.ME was read in order to understand what the projects entails which I learnt that it run in a Virtual environment venv. And with docker we dont need to set up virtual environment.

WORKFLOW OF THE EXISTING PROJECT

venv
SQLAchemy
Template/Admin_dashoard.html, base.html, index.html, login.html, manage_user.html, new_complaint.html e.t.c

CLONING OF THE GITHUB REPO

This is the image representation of the clone project

CREATING A DOCKERFILE FOR THE APPLICATION

FROM python:3.11-slim

WORKDIR /app

COPY requirements.txt .

RUN pip install --no-cache-dir -r requirements.txt

COPY . .

EXPOSE 500

CMD ["python", "app.py"]

BUILDING DOCKER IMAGE

After the Dockerfile is store with the clone system file that I proceed to create the Image using sudo docker build -t citizen-report

RUNNING THE DOCKER CONTAINER

During the running I perform port mapping 8080 with 5000 8080:5000 this allow the application to run in localhost:8080.
The command used for this is sudo docker run -d -p 8080:5000 --name local-report-container citizen-report
The command means that I have an image named citizen-report and run it a container named local-report-container, making the listen port 8080 and the application is available at 5000.

OUTPUT OF THE WORK

The application is running in http//localhost:8080

Common Error Fixed in the project

Syntax error in the Dockerfile some --, " and others
Wrong Port, Missing requirement.txt et.c

TO Detect were the error are comming from run sudo docker log <image-name>

THANKS FOR YOUR TIME

STAY TUNED FOR MORE ARTICLE ON DOCKER UP NEXT Docker Compose, CI/CD

Design and Deploy a Static Website with AWS S3 and CloudFront

B.G.Skillz 🧑‍💻 — Sat, 08 Mar 2025 13:29:26 +0000

INTRODUCTION
In today's fast-paced digital landscape, businesses require websites that are fast, scalable, and globally accessible. AWS (Amazon Web Services) provides an excellent solution using Amazon S3 (Simple Storage Service) for static content hosting and Amazon CloudFront (Content Delivery Network) for optimized global delivery. This blog explores how to design and deploy a static website using AWS S3 and CloudFront. AWS S3 and CloudFront.

Let begin with little explain on Amazon S3 and Amazon CloudFront

What is AWS S3
Amazon S3 is an object storage service that offers industry-leading scalability, data availability, security, and performance. You can use Amazon S3 to store and retrieve any amount of data at any time, from anywhere.

What is AWS CloudFront
Amazon CloudFront is a content delivery network (CDN) service that helps you distribute your static and dynamic content quickly and reliably with high speed.

SCENARIO for the Task
A local business needed a cost-effective, highly available, and globally accessible website to showcase its services. Instead of using traditional web hosting, AWS S3 and CloudFront provided an efficient and scalable solution. This setup ensures:

Low latency due to caching at CloudFront edge locations.
High availability with S3 storage redundancy.
Cost efficiency by paying only for what is used.

Architecture Overview
The Architecture shows how the Static Website is design and deploy for users in order to access it. During the deployment of the static website the CloudFront was unable to access due to internal issue on Amazon Web Service.

Steps to Deploy a Static Website on AWS S3 & CloudFront

1. Create an S3 Bucket

Log in to AWS Console and navigate to S3.
Create a new bucket and name it (e.g., s3-cloudfront-static-site).
Disable Block Public Access (if not using CloudFront OAC).
Enable Static Website Hosting and specify index.html as the default document.

2. Upload Website Files

Upload index.html, style.css, script.js, and other necessary files.
Ensure the files are in the root directory (not inside a subfolder).

3. Configure Bucket Policy for CloudFront

To ensure secure access via CloudFront, update the bucket policy:

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::s3-cloudfront-static-site/*"
        }
    ]
}

** 4. Create a CloudFront Distribution **

Navigate to CloudFront in AWS.
Click Create Distribution and set S3 bucket as the origin.
Enable Origin Access Control (OAC) for security.
Configure caching settings and save the distribution.
Copy the CloudFront Domain Name (e.g., https://d123abc.cloudfront.net).

Testing the Deployment

To test the deployment:
Open the CloudFront URL in your browser.
Check if the index.html page loads correctly.
Ensure CloudFront caching is working by monitoring load speeds.

The Deployed site is working perfectly

Benefits of Using AWS S3 & CloudFront
✅ Fast global delivery using CloudFront edge locations.
✅ Highly scalable with automatic redundancy.
✅ Secure access using OAC and S3 policies.
✅ Cost-effective with pay-as-you-go pricing.

Conclusion

Deploying a static website with AWS S3 and CloudFront is an efficient and scalable way to host websites. It ensures fast content delivery, security, and high availability. By following this approach, businesses can provide an optimal user experience with minimal operational costs.

🚀 Next Steps: Try deploying your own static website using AWS and optimize it further with Route 53 for custom domains!

AUTOMATING USER CREATION AND MANAGEMENT WITH BASH USING REPLIT

B.G.Skillz 🧑‍💻 — Mon, 24 Feb 2025 16:52:06 +0000

What is the Purposes of this Task
Creating of User and adding them to group manually and setting the permission one by one, will take a lot time. Bash Script can do the task automatically. This is useful in companies.

Scenario for the Task
Assuming I am working with TechNova Corp, and the company recruit a new set of employees. The IT department is resposible for creating the Linux Accounts and setting up Access permissions. Instead of Typing commands for each user.

How the Script will work

Creating Random Username: The script will help to create Username name randomly after the First_Name and the Last_Name has been declared and initialized with values

#!/bin/bash
# Define First and Last Names
First_Names=("Bolarinwa" "Ayinla" "Ayoade" "Ajibade" "Lawal" "Oseni" "Adeyemi" "Adeyinka" "Adeyinka")
Last_Names=("Gbolahan" "Moses" "Ayobami" "Mayowa" "Ademola" "Sodiq" "Opeyemi" "Adebayo" "Tunde")

The base directory was also set BASE_DIR="/home/dept" sudo mkdir -p "$BASE_DIR"

Define User Groups: There are 6 department which include Departments=("Sales" "Marketing" "Finance" "HR" "IT" "Legal")
Create Users and Assign Them to Groups

The useradd command was used to create new Linux Users from the name initialized above and also assign them to their department group

Setting permission for Department Folders Each department have different folders

/dept/Sales
/dept/Marketing
/dept/Finance
/dept/HR
/dept/IT
/dept/Legal
Users are only allow to access their department folder they cant access another Department folder
chown and chmod was used for the access control

# Create department directories with appropriate permissions
for dept in "${Departments[@]}"; do
    sudo mkdir -p "$BASE_DIR/$dept"
    sudo chmod 770 "$BASE_DIR/$dept"  # 770 allows only the owner and group to access
    sudo chown root:root "$BASE_DIR/$dept"
done

Generating a Summary Report of all created users, their groups and access permissions

Below is the full script

#!/bin/bash

# Define First and Last Names
First_Names=("Bolarinwa" "Ayinla" "Ayoade" "Ajibade" "Lawal" "Oseni" "Adeyemi" "Adeyinka" "Adeyinka")
Last_Names=("Gbolahan" "Moses" "Ayobami" "Mayowa" "Ademola" "Sodiq" "Opeyemi" "Adebayo" "Tunde")

# Define Departments
Departments=("Sales" "Marketing" "Finance" "HR" "IT" "Legal")

# Set base directory (changed from /dept to /home/dept)
BASE_DIR="/home/dept"
sudo mkdir -p "$BASE_DIR"

# Create department directories with appropriate permissions
for dept in "${Departments[@]}"; do
    sudo mkdir -p "$BASE_DIR/$dept"
    sudo chmod 770 "$BASE_DIR/$dept"  # 770 allows only the owner and group to access
    sudo chown root:root "$BASE_DIR/$dept"
done

# Number of users to create
NUM_USERS=9

# Create a report file
REPORT_FILE="user_report.txt"
echo "Username | Group | Password" > "$REPORT_FILE"
echo "--------------------------" >> "$REPORT_FILE"

# Create users and assign to departments
for ((i=0; i<$NUM_USERS; i++)); do
    FIRST="${First_Names[$RANDOM % ${#First_Names[@]}]}"
    LAST="${Last_Names[$RANDOM % ${#Last_Names[@]}]}"
    USERNAME="$(echo "$FIRST.$LAST" | tr '[:upper:]' '[:lower:]')"

    PASSWORD=$(openssl rand -base64 8)
    DEPT="${Departments[$RANDOM % ${#Departments[@]}]}"

    # Ensure the department group exists
    sudo groupadd -f "$DEPT"

    # Create user with home directory
    sudo useradd -m -s /bin/bash "$USERNAME"

    # Set user password
    echo "$USERNAME:$PASSWORD" | sudo chpasswd

    # Assign user to department group
    sudo usermod -aG "$DEPT" "$USERNAME"

    # Set correct ownership and permissions for department folder
    sudo chown root:"$DEPT" "$BASE_DIR/$DEPT"
    sudo chmod 770 "$BASE_DIR/$DEPT"

    echo "$USERNAME | $DEPT | $PASSWORD" >> "$REPORT_FILE"
    echo "User $USERNAME created and assigned to $DEPT department"
done

echo "User creation complete. Check $REPORT_FILE for details."

Deploying a FastAPI Application with CI/CD Pipeline: HNG Task 2

B.G.Skillz 🧑‍💻 — Sat, 15 Feb 2025 11:00:58 +0000

Introduction
In this article, I will explain how I deployed a FASTAPI application with continuous Integration (CI) and Continuous deployment (CD).

Tools Requirements

Python
Docker
GitHub Actions Secrets e.g SSH_HOST, SSH_PRIVATE_KEY
AWS Linux Server
Nginx
FastAPI Application

First Step: Fork and Clone the Repository
The first step is to fock the repo and clone the repository to your local device
git clone https:/github.com/hng12-devbotops/fastapi-book-project.git
Then you navigate to your repo after clone it
cd fastapi-book-project/

Second Step: Setting Up a Virtual Environment
Testing the application locally before deploying, using a virtual environment is good for Python dependencies. And to achieve this you need to create and and activate a virtual environment.
python3 -m venv hng
source hng/bin/activate
And connecting to virtual environment I then install the required dependency using the following command.
pip install -r requirements.txt

Third Step: Implementing the Missing Endpoing in book.py
The API is currently unable to fetch book using its ID. In this step, I added a new endpoing to the FASTAPI router that handles a GET request to retrieve a book based on provided ID.
So I updated the missing endpoint by add this code to book.py file

@router.get("/{book_id}", response_model=Book, status_code=status.HTTP_200_OK)  # New endpoint
async def get_book(book_id: int):
    book = db.books.get(book_id)
    if not book:
        raise HTTPException(
            status_code=status.HTTP_404_NOT_FOUND, 
            detail="Book not found"
        )
    return book

And also the HTTPException was imported from fastapi

Forth Step: Testing the Endpoint to check if it working perfectly
Once I finish implementing the endpoint, it's important to test it to ensure it working perfectly as expected, So I confirm using pytest commmand

After this I start the FASTAPI application using Uvicorn uvicorn main:app --reload

{
  "1": {
    "id": 1,
    "title": "The Hobbit",
    "author": "J.R.R. Tolkien",
    "publication_year": 1937,
    "genre": "Science Fiction"
  },
  "2": {
    "id": 2,
    "title": "The Lord of the Rings",
    "author": "J.R.R. Tolkien",
    "publication_year": 1954,
    "genre": "Fantasy"
  },
  "3": {
    "id": 3,
    "title": "The Return of the King",
    "author": "J.R.R. Tolkien",
    "publication_year": 1955,
    "genre": "Fantasy"
  }
}

The application seem to be running fine on the localhost

Fifth Test: Dockerizing the APP
create a Dockerfile in the project directory

# Use an official lightweight Python image
FROM python:3.9-slim

# Set work directory
WORKDIR /app

# Install dependencies
COPY requirements.txt .
RUN pip install --upgrade pip
RUN pip install -r requirements.txt

# Copy project files
COPY . .

# Expose the port FastAPI runs on
EXPOSE 8000

# Run the FastAPI application using Uvicorn
CMD ["uvicorn", "main:app", "--host", "0.0.0.0", "--port", "8000"]

Sixth Step: Nginx Integrating
To make things easier for me, I used a docker-compose.yml file to configure Nginx as a reverse proxy. To do this I created an nginx.conf file with the configurations for my application. The purpose of this configuration is to have Nginx listen on port 80 and forward incoming HTTP requests to the FastAPI application running on port 8000 inside its container.
nginx.conf

server {
    listen 80;
    server_name your_domain_or_IP;
    location / {
        proxy_pass http://app:8000;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For 
        $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
}

Then processed to the docker-compose.yml

version: '3.8'
services:
  app:
    build: .
    container_name: fastapi-app
    ports:
      - "8000:8000"

  nginx:
    image: nginx:latest
    container_name: fastapi-nginx
    volumes:
      - ./nginx.conf:/etc/nginx/conf.d/default.conf
    ports:
      - "80:80"
    depends_on:
      - app

The app service builds and runs our FastAPI application.
The Nginx service uses an Nginx image, mounts the custom configuration file, and maps port 80 of the container to port 80 on the host.
The depends_on command ensures that the FastAPI container starts before Nginx.
Then I used this command to build the containers docker-compose up --build

Seventh Step: Creating a Linux Server
For hosting and deploying our FastAPI application, I set up a Linux server on AWS. This server serves as the backbone of our deployment environment, where our Dockerized application will run and be accessible to users.

Eighth Step: Set Up the CI/CD Pipeline
I created a GitHub Actions Workflow File for this step to automatically run tests on every pull request targeting the main branch. This ensures that any new changes are validated before they can be merged.
mkdir -p .github/workflows/
cd .github/workflows/
nano test.yml
After the necessary details needed has been input and I close using Ctrl X then press Y and Enter

name: ci pipeline

on:
  pull_request:
    branches: [ main ]

jobs:
  test:
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v2
    - name: Set up Python
      uses: actions/setup-python@v2
      with:
        python-version: '3.9'
    - name: Install dependencies
      run: |
        python -m pip install --upgrade pip
        pip install -r requirements.txt
    - name: Run tests
      run: pytest

Then follow by the CD Pipeline/Deployment Pipeline
For continuous deployment, I created another GitHub Actions Workflow File named deploy.yml. This deployment pipeline is triggered whenever changes are pushed to the main branch, automating the process of updating the live application.
nano deploy.yml

name: CD Pipeline
on:
  push:
    branches: [main]
jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout repository
        uses: actions/checkout@v3

      - name: Deploy via SSH
        uses: appleboy/ssh-action@master
        with:
          host: ${{ secrets.SSH_HOST }}
          username: ${{ secrets.SSH_USERNAME }}
          key: ${{ secrets.SSH_PRIVATE_KEY }}
          script: |
            # Update package index and install dependencies
            sudo apt-get update -y
            sudo apt-get install -y apt-transport-https ca-certificates curl software-properties-common

            # Add Docker's official GPG key
            curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo apt-key add -
            sudo add-apt-repository "deb [arch=amd64] https://download.docker.com/linux/ubuntu $(lsb_release -cs) stable"

            # Install Docker
            sudo apt-get update -y
            sudo apt-get install -y docker-ce docker-ce-cli containerd.io

            # Add the SSH user to the Docker group
            sudo usermod -aG docker ${{ secrets.SSH_USERNAME }}

            # Install Docker Compose
            sudo curl -L "https://github.com/docker/compose/releases/download/v2.20.2/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose
            sudo chmod +x /usr/local/bin/docker-compose

            # Verify installations
            docker --version
            docker-compose --version

            # Navigate to the project directory and deploy
            cd /home/ubuntu/
            git clone <your-github-repo>
            cd fastapi-book-project/
            git pull
            docker-compose up -d --build

After pushing the file git add. deploy.yml test.yml and Check the status of the Pipeline they are working perfectly

After that the Post-Deployment Verification the pipeline are working perfectly

Thanks for reading, don't forget to drop a like and comment

LOVE YOU

Building a Number Classification API with AWS Lambda & API Gateway

B.G.Skillz 🧑‍💻 — Sat, 08 Feb 2025 19:42:46 +0000

Introduction

In the world of DevOps, deploying a scalable and serverless API is a valuable skill. This blog post walks you through building a Number Classification API using AWS Lambda, API Gateway, and Python. The API takes a number as input and returns its mathematical properties along with a fun fact.

I have used Local Machine to perform the task but I am having issue with the Deployment. After making many attempt to use the local machine it doesnt work out. I decided to use AWS Lamba and import my code to the code editor

CREATING OF THE FUNCTION
I navigate to my Console home and search for Lambda then select and create a function number-classifcation-api

WHY I CHOOSE LAMBA
I chose AWS Lambda because it is serverless—meaning I don't need to manage servers. AWS automatically provisions the infrastructure, executes the code, and shuts down after execution, making it highly cost-effective since I'm only billed when the function runs.

After create the function I import my code

import json
import math
import urllib.request
def is_prime(n):
    if n < 2:
        return False
    if n in (2, 3):
        return True
    if n % 2 == 0 or n % 3 == 0:
        return False
    for i in range(5, int(math.sqrt(n)) + 1, 2):
        if n % i == 0:
            return False
    return True
def is_armstrong(n):
    if n < 0:
        return False
    digits = [int(digit) for digit in str(n)]
    power = len(digits)
    return sum(digit ** power for digit in digits) == n
def is_perfect(n):
    if n < 1:
        return False
    return sum(i for i in range(1, n // 2 + 1) if n % i == 0) == n

def get_fun_fact(n):
    if n < 0:
        return "Fun fact not available for negative numbers."
    try:
        url = f"http://numbersapi.com/{n}/math"
        with urllib.request.urlopen(url, timeout=5) as response:
            return response.read().decode("utf-8")
    except Exception:
        return "Fun fact not available."
def lambda_handler(event, context):
    query_params = event.get("queryStringParameters", {})
    number_str = query_params.get("number") if query_params else None

    if not number_str:
        return {
            "statusCode": 400,
            "headers": {
                "Access-Control-Allow-Origin": "*",
                "Access-Control-Allow-Methods": "GET",
                "Access-Control-Allow-Headers": "Content-Type"
            },
            "body": json.dumps({"error": "No number provided."})
        }

    try:
        number = int(float(number_str))
    except ValueError:
        return {
            "statusCode": 400,
            "headers": {
                "Access-Control-Allow-Origin": "*",
                "Access-Control-Allow-Methods": "GET",
                "Access-Control-Allow-Headers": "Content-Type"
            },
            "body": json.dumps({
                "error": "Invalid number format",
                "invalid_input": number_str  # Include the invalid input in the response
            })
        }

    properties = ["odd" if number % 2 else "even"]
    if is_armstrong(number):
        properties.insert(0, "armstrong")

    response_body = {
        "number": number,
        "is_prime": is_prime(number),
        "is_perfect": is_perfect(number),
        "properties": properties,
        "digit_sum": sum(int(d) for d in str(abs(number))),
        "fun_fact": get_fun_fact(number)
    }

    return {
        "statusCode": 200,
        "headers": {
            "Access-Control-Allow-Origin": "*",
            "Access-Control-Allow-Methods": "GET",
            "Access-Control-Allow-Headers": "Content-Type"
        },
        "body": json.dumps(response_body)
    }

After importing the code I test the code before deploying it was working

How the API Works

The API is designed to classify a number based on its properties and return some interesting facts. The flow works as follows:

A user requests the API
The API Gateway forwards the request to AWS Lambda
AWS Lambda processes the request and generates a response
The API Gateway sends the response back to the user

Setting Up API Gateway

Go to AWS API Gateway → Create API
Choose REST API → New API
Set Endpoint as Lambda Function
Define Resource Path /api/classify-number
Enable CORS (for cross-origin requests)
Deploy the API to a stage (prod)

After that I navigate to the APIGateway to create the API and named it NumberClassificationAPI then use GET to create the path /api/classfiy-api and I deploy the stage using (prod) and I enable CORS then I deploy it.
(https://nr7acfudff.execute-api.us-east-1.amazonaws.com/prod/api/classify-number?number=371)

(https://github.com/Bolarinwa2030/Lambda_function/tree/main)

This is output

Setting Up an NGINX Web Server on Azure and Local Machine: My DevOps Stage 0 Experience

B.G.Skillz 🧑‍💻 — Sun, 02 Feb 2025 13:05:03 +0000

Introduction

As part of my DevOps Stage 0 Intership, I was tasked with setting up and configuring NGINX on a fresh Ubuntu Server. This Challenge aimed to test my ability to install and configure a web server while demonstrating and understanding of basic System Administration. In this blog, I document my approach, the challenges I faced and the lessons learned from the Task.
Approach to Completing the Task
For me to successfully configure NGINX, I followed a structured approach:
I register as a new user on Azure so that I will be able to access the Cloud Infrastructure and create a new/fresh Ubuntu Server.

After Create a new/fresh Ubuntu Server and selected all the necessary things I need to make the server work better.

Preparing the Server
I used MobaXterm to connect to the Server using IP address, my Admin Username and the Password I set. Before installing NGINX, I updated my server to ensure all system packages were current
sudo apt update && sudo apt upgrade -y
Installing NGINX
I installed NGINX using:
sudo apt install nginx -y
After the installation, I check to know if NGINX is running using command sudo systemctl status nginx it shows

It shows Active and Running and I enable and start nginx using sudo systemctl enable nginx sudo systemctl start nginx

Configuring Default Page
I then customized the default web page by modifying the index.html file located at at /var/www/html/index.html. Using the nano text editor, I added the required message needed. sudo nano /var/www/html/index.html and I replaced the content in it with
`

Welcome to HNG DevOps Internship

Welcome to DevOps Stage 0- Bolarinwa Gbolahan/Bolarinwa

After writing the code I save with Ctrl X then Y and Press Enter. I restart the NGINX using commandsudo systemctl restart nginx`.
Verifying the Configuration

I check if everything was working correctly, I tested the setup in a web browser by using my IP address and it works perfectly both on Local Machine and Azure Ubuntu Server

Challenges Faces and How I Overcame them

NGNIX Not starting after installation I encountered an issue where NGINX wouldn't start. Checking the service status with sudo netstat -tulnp | grep :80
Firewall Blocking HTTP Requests After configuring NGINX, I realized my webpage wasn't accessible from a web browser. So I troubleshoot this by sudo ufw status

How this task contribute to my DevOps Learning

The task reinforced my understanding of Ubuntu System Administration, Web Server, NGINX Server, and networking.

References

DevOps Engineer
Cloud Engineers
Platform Engineers

DEV Community: B.G.Skillz 🧑‍💻

[Boost]

Dockerizing a React Task: A Hands-On DevOps Implementation

B.G.Skillz 🧑‍💻 ・ Dec 20

Dockerizing a React Task: A Hands-On DevOps Implementation

1. Project Overview

2. File Structure

3. Setting Up the React Environment

4. Containarized the frontend

5. Docker Compose Setup

Building Containers

What I understand after the implementation

Docker for Beginners: How I Containerized an Existing Project Node-by-Node

INTRODUCTION

PROJECT OVERVIEW

WORKFLOW OF THE EXISTING PROJECT

CLONING OF THE GITHUB REPO

CREATING A DOCKERFILE FOR THE APPLICATION

BUILDING DOCKER IMAGE

RUNNING THE DOCKER CONTAINER

OUTPUT OF THE WORK

Common Error Fixed in the project

Design and Deploy a Static Website with AWS S3 and CloudFront

AUTOMATING USER CREATION AND MANAGEMENT WITH BASH USING REPLIT

Deploying a FastAPI Application with CI/CD Pipeline: HNG Task 2

Building a Number Classification API with AWS Lambda & API Gateway

How the API Works

Setting Up API Gateway

Setting Up an NGINX Web Server on Azure and Local Machine: My DevOps Stage 0 Experience

Introduction

Welcome to DevOps Stage 0- Bolarinwa Gbolahan/Bolarinwa

Challenges Faces and How I Overcame them

How this task contribute to my DevOps Learning

References