Working on small projects and deploying to cloud platforms like GCP and AWS or Your Own VPS ?

Implementing CI/CD can be a headache. In this blog, we’ll unravel the secrets of Continuous Integration and Continuous Deployment for Next.js apps. Streamline your development workflow and deploy , with a CI/CD pipeline tailored for the modern web using simple and beginner friendly tools such as GitHub Actions And Docker.

Prerequisites:

1. A Virtual Cloud Machine from any cloud provider or a local Ubuntu VPS. In this case, we’ll be using Amazon Web Services (AWS) as our cloud provider.
2. Docker, Git, and Docker Compose installed on the given machine.
3. A NextJs Project You can check out a template here .
4. DockerHub And A GitHub Account

To get started, we’ll launch an AWS EC2 instance and provide a bash script to install the required dependencies. This will ensure a smooth setup for implementing the CI/CD pipeline for our Next.js application.

#!/bin/bash

# install.sh
# to run this file first : chmod +x install.sh
# then you can run it using : ./install.sh

# Update your system
sudo apt update

# Install prerequisites
sudo apt install -y apt-transport-https ca-certificates curl software-properties-common

# Install Docker
curl -fsSL https://get.docker.com -o get-docker.sh
sudo sh get-docker.sh

# Add current user to docker group
sudo usermod -aG docker $USER

# Install Docker Compose
sudo apt install -y docker-compose

# Install Git
sudo apt install -y git

# Clean up
rm get-docker.sh

echo "Installation complete. Please reboot your system for changes to take effect."

5. Add Your Docker Hub Username and Docker Hub Access token into the repository Secrets by navigating into your repository > Settings > Secrets and Variables and add your repository secrets as show in the image below

Understanding the CI/CD Workflow

To better grasp the workings of GitHub Actions, let’s explore a practical example using my Next.Js portfolio website.

1. Trigger:

• The workflow is triggered by a push event to the main branch.

2. Build Job (build):

• This job runs on the ubuntu-latest runner.
• The workflow first checks out the source code using the actions/checkout@v4 action.
• Then, it builds a Docker image using the docker build command. The image is tagged with prabirkalwani/portfolio:<latest>.
• To push the image to Docker Hub, the workflow logs in using the provided Docker username and access token stored in secrets (presumably set up beforehand).
• Finally, the built image is pushed to prabirkalwani/portfolio:latest on Docker Hub.

3. Deploy Job (deploy):

• This job depends on the successful completion of the build job. It won't run unless the image is built successfully.
• The deploy job runs on a self-hosted runner (meaning your own server or infrastructure).
• It starts by pulling the latest image (prabirkalwani/portfolio:latest) from Docker Hub.
• Next, it removes any existing container named prabir-website (assuming an old deployment was running).
• Finally, the workflow runs the container in detached mode (-d) and maps the container port 3000 to the host port 3000. The container is named prabir-website for easier identification.

Overall Flow:

1. You push code to the main branch.
2. The workflow triggers the build job which builds and pushes the Docker image to Docker Hub.
3. Once built, the deploy job pulls the image, removes any old container, and starts a new container running your application.

Setting Your CI/CD Pipeline:

Start By Completing the Prerequisites for this Project :

1. Connect your GitHub Runner
   GitHub Runner offers a self-hosted virtual machine to run workflows
2. Access your GitHub repository settings
   Click on “Actions”
   Click on “Runners”
   Click on “Add a new self-hosted runner”

Follow the steps and Connect your EC2 instance with GitHub
This will enable running CI/CD processes on the EC2 instance
The EC2 instance will act as the self-hosted runner for your repository

3. Configuring the self hosted runner application as a service
This will configure the self-hosted runner application as a service to automatically start the runner application when the machine starts.Follow the commands below :-

sudo ./svc.sh install
sudo ./svc.sh start

Lets write the code for the action that was explained above in this section :-

To set up the workflow, navigate to the Actions tab in your repository. Next, click on the New Workflow button and select the Docker configuration option.

Then, paste the following code snippet into the workflow editor:

name: Docker-Deploy

on:
  push:
    branches:
      - main

jobs:
  build:
    runs-on: ubuntu-latest
    steps: 
      - name: Checkout Source
        uses: actions/checkout@v4
      - name: Build docker image
        run: docker build -t prabirkalwani/portfolio .
      - name: Login to Docker Hub
        run: docker login -u ${{ secrets.DOCKER_USERNAME }} -p ${{ secrets.DOCKER_ACCESS_TOKEN }}
      - name: Publish image to Docker Hub
        run: docker push prabirkalwani/portfolio:latest

  deploy:
    needs: build
    runs-on: self-hosted
    steps:
      - name: Pull image from Docker Hub
        run: sudo docker pull prabirkalwani/portfolio:latest
      - name: Delete old container
        run: sudo docker rm -f prabir-website  
      - name: Run Docker container
        run: sudo docker run -d -p 3000:3000 --name prabir-website prabirkalwani/portfolio:latest

You can modify the repository name and tag name to suit your project’s requirements. Additionally, you can modify the command is configured to monitor changes on the main branch, but you can alter this branch name as per your preferences.

4.Dockerfile for the NextJs Application

Lastly, we require a Dockerfile to containerize your Next.js application for deployment.

# Docker file for NextJS Application 
FROM node:20-alpine3.18 as builder 

# Creating an app directory 
WORKDIR /app

# copying the package-lock file 
COPY package*.json ./

# running npm install here 
RUN npm install --production 

# copying rest of the files 
COPY . . 

# creating a build folder
RUN npm run build

# exposing the host port
EXPOSE 3000

# running the application 
CMD ["npm", "run", "start"]

Upon committing changes, your continuous integration and continuous deployment (CI/CD) pipeline will be triggered, executing the following workflow steps.

Conclusion

This article is one of many I plan to create on Docker, DevOps, and related technologies that I’m currently exploring and learning. Sharing insights like these is genuinely enjoyable, and I look forward to creating more informative content as I further delve into containerization and DevOps practices.

Thank you for following along, If there are any better alternatives to this approach or suggestions feel free to reach out.

Bonus

Recently, I created a bash script that retrieves system vitals for a VPS, and I found the process immensely enjoyable. I encourage you to take a look at it as well.

#!/bin/bash

#system_info.sh file

# to run this file first : chmod +x system_info.sh
# then you can run it using : ./system_info.sh
# CPU Usage
CPU_USAGE=$(top -bn1 | grep "Cpu(s)" | sed "s/.*, *\([0-9.]*\)%* id.*/\1/" | awk '{print 100 - $1"%"}')

# Disk Usage
DISK_USAGE=$(df -h | awk '$NF=="/"{printf "Disk Usage: %.2f%\n", $5}')

# Memory Usage
MEMORY_USAGE=$(free | awk '/Mem/{printf("Memory Usage: %.2f%\n"), $3/$2*100}')

# System Uptime
UPTIME=$(uptime -p)

# Load Average
LOAD_AVERAGE=$(uptime | awk -F'average:' '{ print $2 }' | awk '{ print $1, $2, $3 }')

# Display Information
echo "System Information:"
echo "-------------------"
echo "CPU Usage: $CPU_USAGE"
echo "Memory Usage: $MEMORY_USAGE"
echo "Disk Usage: $DISK_USAGE"
echo "Uptime: $UPTIME"
echo "Load Average: $LOAD_AVERAGE"

Today, we( Prabir Kalwani , Snehil Sinha, Aayush Shah, Akshad Gawde, Karan Dwari, and ShashankShekhar) will be guiding you through the process of building a Secure React-based Web application with Firebase Authentication and Scalable Document Database.

Introduction

This idea came to fruition by being frustrated by the college portal’s sluggish updates for assignments and attendance tracking. Waiting for changes felt like an eternity, and seeing attendance promptly? Forget about it! That’s when our engineering spirit started to work: why not create a prototype Firebase and Cloud Firestore integration with React?

Before we begin lets understand why are we using React / Firebase in the first case ?

Firebase offers scalable backend services, Firestore provides advanced NoSQL querying, and React excels in creating dynamic user interfaces. Together, they enable efficient development of high-performance and real-time applications such as a college portal.

Installation

Begin by initialising a React app using pnpm create vite.

Follow the provided video guide to set up your Firebase console.

Once you've set up your Firebase project, add a new application to Firebase, selecting a web app. Within your project's src folder, create a firebase.js file and an .env file to store your Firebase configuration.

In the firebase.js file, import the necessary Firebase SDK functions, and configure Firebase using the environment variables specified in your .env file.

touch .env // fancy way just to create the file

VITE_APIKEY= YOUR_KEY_VALUE
VITE_AUTHDOMAIN= YOUR_KEY_VALUE
VITE_PROJECTID= YOUR_KEY_VALUE
VITE_STORAGEBUCKET= YOUR_KEY_VALUE
VITE_MESSAGESENDERID= YOUR_KEY_VALUE
VITE_APPID= YOUR_KEY_VALUE
VITE_MEASUREMENTID= YOUR_KEY_VALUE

touch Firebase.js  // fancy way just to create the file

// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";
import { getAnalytics } from "firebase/analytics";
import { getAuth } from "firebase/auth";
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries

// Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
// im using an env file here 
const firebaseConfig = {
  apiKey: import.meta.env.VITE_APIKEY,
  authDomain: import.meta.env.VITE_AUTHDOMAIN,
  projectId: import.meta.env.VITE_PROJECTID,
  storageBucket: import.meta.env.VITE_STORAGEBUCKET,
  messagingSenderId: import.meta.env.VITE_MESSAGESENDERID,
  appId: import.meta.env.VITE_APPID,
  measurementId: import.meta.env.VITE_MEASUREMENTID,
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);
export const auth = getAuth(app);
const analytics = getAnalytics(app);

export default app;

npm install firebase // installing dependencies for firebase

In your Firebase project, navigate to the Firestore Database section. Initialise the database, then proceed to the rules section.Replace the existing rules with the provided code snippet.

// The provided code snippet sets your Firestore rules to allow unrestricted read and write access

rules_version = '2';

service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write: if true;
    }
  }
}

Congratulations! You’ve successfully set up Firebase Authentication and Cloud Firestore for your React application. Now, you’re ready to start writing code to leverage these services in your project.

Authentication & Database

Before authentication we need to store the user data in a context file you can use redux or any other service for this Im Using createContext& useContext Hook by React

1.AuthContextProvider:

• Sets up a React context to manage user authentication state in the application.
• Provides functions like createUser, signIn, and logout to interact with Firebase Authentication services.
• Utilises Firebase’s onAuthStateChanged method to keep track of the current user and update the context accordingly.
• Exposes the user object and authentication functions via the context provider for use throughout the application.

// Auth Context File 
import { createContext, useContext, useEffect, useState } from "react";
import {
  createUserWithEmailAndPassword,
  signInWithEmailAndPassword,
  signOut,
  onAuthStateChanged,
} from "firebase/auth";
import { auth } from "../firebase";

const UserContext = createContext();

export const AuthContextProvider = ({ children }) => {
  const [user, setUser] = useState({});

  const createUser = (email, password) => {
    return createUserWithEmailAndPassword(auth, email, password);
  };

  const signIn = (email, password) => {
    return signInWithEmailAndPassword(auth, email, password);
  };

    const logout = () => {
      return signOut(auth);
    };

  useEffect(() => {
    const unsubscribe = onAuthStateChanged(auth, (currentUser) => {
      setUser(currentUser);
    });
    return () => {
      unsubscribe();
    };
  }, []);

  return (
    <UserContext.Provider value={{ createUser, user, logout, signIn }}>
      {children}
    </UserContext.Provider>
  );
};

export const UserAuth = () => {
  return useContext(UserContext);
};

Lets a more detailed understanding of CRUD level Operations using Signup And signIN

handleSubmit Function:

• Triggers upon form submission, preventing default behavior.
• Attempts to create a new user account using Firebase’s createUser function.
• If successful, links user UID to Firestore data, navigates to account page, and displays success notification.

linkUidToFirestore Function:

• The linkUidToFirestore function serves the purpose of associating the user's unique identifier (UID) with Firestore documents containing additional user information.
• It ensures that user data is properly structured and stored in Firestore for further use and retrieval within the application.
• It accesses the Firestore database instance (db) previously initialized within the component.
• Documents are organized within collections, with each document containing specific user-related data.
• Upon invocation, the function creates or updates a document within the “Users” collection in Firestore.
• This document typically contains essential user information such as UID, email, user type, and course.
• Additionally, the function establishes subcollections within the user document for specific purposes, such as attendance, assignments, and ID card details.
• Within these subcollections, default or empty documents are created to accommodate data related to attendance records, assignments, and ID card information.

we use aysnc and await in these functions for better handling of promises

// SignUp Logic 
 const { theme } = useTheme();
  const { createUser } = UserAuth();
  const [placeholder, setPlaceholder] = useState({
    email: "",
    password: "",
  });
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [error, setError] = useState("");
  const [course, setCourse] = useState("");
  const navigate = useNavigate();
  const db = getFirestore();

  const courses = ["BTECH", "MBATECH", "BTI", "MCA"];

  const linkUidToFirestore = async (uid, email, course) => {
    const val = doc(db, "Users", uid);
    await setDoc(
      val,
      { uid, email, type: "student", course: course },
      { merge: true }
    );
    const attendanceCollection = collection(val, "attendance");
    await setDoc(doc(attendanceCollection, "day1"), {
      present: true,
    });
    const assignmentCollection = collection(val, "assignment");
    await setDoc(doc(assignmentCollection, "assign1"), {
      present: true,
    });
    const idCollection = collection(val ,"ID_card");
    await setDoc(doc(idCollection,"Card") , {
      Name : "",
      DOB : "",
      BloodGroup : "",
      Department : "",
      Course : "",
      Email : "",
      SAP_ID : "",
      Year : "",
      Address :"",
      ClgEmail : "",
    });
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    setError("");
    try {
      const response = await createUser(email, password);
      if (response.user) {
        await linkUidToFirestore(response.user.uid, email, course);
        navigate("/account");
      }
      toast.success("Account Created Successfully");
    } catch (error) {
      setError(error.message);
      toast.error(error.message);
    }
  };

  useEffect(() => {
    document.body.style.overflow = "hidden";
    return () => {
      document.body.style.overflow = "";
    };
  }, []);

If your code is functioning properly, your database should exhibit the following structure.

Protective Routing

To safeguard against potential security breaches from curious engineers within our college, we’ll implement protective routes to prevent backtracking through different links. This measure aims to ensure our system’s security and protect sensitive information from unauthorized access.

// protectedRoutesByType.js
import React, { useEffect } from "react";
import { Navigate } from "react-router-dom";
import { getDoc, doc, getFirestore } from "firebase/firestore";
import { UserAuth } from "../Context/AuthContext";

const ProtectedRoutesByType = ({ children }) => {
  const { user, loading } = UserAuth();
  const db = getFirestore();

  useEffect(() => {
    const fetchUserType = async () => {
      if (user) {
        try {
          const userDocRef = doc(db, 'Users', user.uid);
          const userDocSnapshot = await getDoc(userDocRef);
          if (userDocSnapshot.exists()) {
            const userData = userDocSnapshot.data();
            const userType = userData.type;
            if (userType !== "XYZ") {
              window.location.href = "/account";
            }
          }
        } catch (error) {
          console.error("Error fetching user type:", error);
        }
      }
    };

    fetchUserType();
  }, [user, db]);

  if (loading) {
    return <div>Loading...</div>;
  }

  if (!user) {
    return <Navigate to="/" />;
  }

  return children; 
};

export default ProtectedRoutesByType;

Authentication and User Type Retrieval: The ProtectedRoutesByType component first checks the user’s authentication status and loading state using the UserAuth hook in the React application.

User Type Validation: Upon successful authentication, the component retrieves the user’s document from Firebase Firestore, extracting their user type. It then compares this user type with an expected value (e.g., “XYZ”) to determine access to protected routes.

Routing and Redirection: If the user is authenticated and their type matches the expected value, the protected routes are rendered seamlessly using React Router’s Navigate component. However, if there’s a mismatch in user type, the user is redirected to the account page using window.location.href. In the case of authentication failure, users are redirected to the home page.

To use the above protected Routes :-

<Route path="/fac/home" element={<ProtectedRoutesByType><Home /></ProtectedRoutesByType>} />

Conclusion

This guide offers a thorough walkthrough of integrating React with Firebase to build a robust college management system and a scalable database using Firestore Cloud.

Thank you for following along, and feel free to refer to the provided resources or reach out for further clarification or assistance.

references:-

• GitHub - PrabirKalwani/NMIMS-Student-Portal: A redevelopment of the NMIMS College Student Portal leveraging Firebase and React, employing .
• Portal SVKM
• Choose a data structure | Firestore | Firebase

Knowing how to write production-level code is essential for developers, and it involves following specific methodologies that depend from organisation to organisation. For the case of Flutter, we have multiple such Architectures to write production ready code such as MVVM, MVP, and MCP.

Prerequisites

Flutter Installation

• You have to first install Flutter using the flutter documentation Below :-

Choose your development platform to get started

After This You can proceed to clone the following Repository

GitHub - PrabirKalwani/MVVM_Boilerplate

Thats All Congratulations You have successfully Setup an Flutter Application with basic MVVM

What is MVVM ?

Introduction

MVVM Stands for model view view model.
Lets Create MVVM button application where each click results in an incremental change in its value, reflecting the total number of clicks :-

Model:

• Represents the user data, for the case of the application the above code it is counter to count the number of times the user has clicked.
• Model Can also be used to interact with external services like F backend APIs, or databases.

View:

• Contains the UI elements for the counter page which is the button which is to be clicked and the display of the counter variable .
• Receives data and state updates from the ViewModel and displays them on the screen.
• Captures user interaction events like button clicks and text field changes.

ViewModel:

• Acts as the bridge between the View and the Model.
• Exposes functions for user interaction events (e.g., button click.
• Handles business logic like validation, error handling, and data formatting.
• Fetches data from the Model and exposes it to the View in a suitable format.
• Updates the UI by notifying the View when the state changes.

State Management:

• Various state management solutions can be used to connect the ViewModel with the View. Popular options include:
• Provider: Offers a simple and powerful way to manage state with ChangeNotifier classes. (being used in this project)
• Riverpod: Provides dependency injection and state management with streams and providers.
• GetIt and Bloc: Alternative state management libraries with different approaches.

Additional Considerations:

• Navigation: Use a separate navigation service to handle transitions between different screens based on the authentication state.
• Error Handling: Clearly display error messages to the user through the ViewModel and View.
• Testing: Utilize unit and widget testing to ensure the functionality of each component individually and as a whole.

Great , Now you have developed a key undertanding of the flutter MVVM Application . Moving to how to secure your Flutter Enviornment .

How To Secure Your Environment

Introduction

There are multiple ways but for the simplicity of understanding we will Obfuscation and Environment Variables .

Obfuscation in Flutter Refers to the process of transforming your app’s binary code into a more complex and obscure form while preserving its functionality. This makes it harder for humans to understand the code and hinders reverse engineering efforts.

Implementation

Lets Create the example of the Obfuscation using the current project:-

Note :- Please Dont commit this folder / file to Github

• We can create a env folder in you project lib directory
• Add envied to pubsec.yaml and pub get the package (install the envied package to your project)
• post this create a .env file in your directory consisting of your environment secrets

YOUR_API_KEY = justasimpleapikey

• After that create a file called env.g.dart which comprises of

import 'package:envied/envied.dart';
part 'env.g.dart';
@Envied(path: '.env')
abstract class Env {
  @EnviedField(varName: "YOUR_API_KEY", obfuscate: true)
  static final String yourapikey = _Env.yourapikey;
  
}

• Post this run the following command to Obfuscate your project

dart run build_runner build

• To declare / call your api key just use the following syntax

apiKey: Env.YOUR_API_KEY,

You have now Successfully completed your env Obfuscation to protect your Environment secrets locally

I hope this article was helpful in making you understand the basics of how to write production ready code and in a secure manner.

Queries

For any issues with the above program please contact me and ill try to reply as soon as possible

prabir.kalwani@gmail.com

Introduction

Have you ever faced the frustration of trying to access a website, only to find it blocked on your college or office Wi-Fi? I know the feeling all too well. But fear not, because I’ve got a solution that will blow your mind — building your own proxy server on the cloud!

Navigate to the steps by clicking here.

This idea struck me while I was preparing for my end-semester exams and couldn’t afford to waste time on blocked websites. In this article, I’ll be your guide on how to create your very own proxy server that will help you bypass any pesky website blocks and enjoy unrestricted internet access. Excited yet? Let’s get started!

So For Those Who Don’t Know what is a Proxy Server ?
A proxy server acts as a bridge between a user’s device and the internet, serving various purposes depending on the user’s needs, such as enhancing privacy, accessing geo-restricted content, optimising network performance, bypassing content filters, and facilitating secure remote access, making it a versatile tool for digital empowerment. So now lets see how to make it

Getting Started

As physical servers can be expensive, it’s not a necessity to own one. Cloud services like AWS, Azure, and GCP offer a great alternative. You can use a free-tier server with good bandwidth and still get the job done. In this example, I’ll be using AWS EC2, which has budget-friendly options to create a proxy server that’s both cost-effective and powerful.

Let’s dive into how we can leverage AWS EC2 to build a server that not only protects your online activities but also fits within your budget.

For This Fire up your AWS Console and go EC2 ( Elastic Compute)

• Initiate a new AWS Instance.
• Select Ubuntu as your preferred operating system.
• Opt for a key pair login for enhanced security.
• Configure the instance with a basic amount of storage.
• And then Launch Your Instance

Now Connect to your instance using SSH and run the following Maintaince Commands

Sudo apt upgrade 
Sudo apt update

Most Linux Distro’s Come with SSH installed … We will be leveraging this for our proxy server by using something called SSH tunnel.

Now, An SSH Tunnel also known as an SSH port forwarding, is a secure way to establish a connection between a local and a remote computer through an encrypted channel. Basically A connection to our Proxy Server.

The Process

1. So Lets write a command to connect to our instance
   Open Up Your Terminal and Run

ssh -i  "[PATH OF YOUR KEY ]" -D 1369 -N -C ubuntu@[YOUR PUBLIC IP]

To Better Understand this we can break down

• ssh -i ”[PATH OF YOUR KEY]” :- This option specifies the path to the private key file used for authentication
• D 1369 :- This option enables dynamic port forwarding. It opens a local port (1369 in this case) and sets up a SOCKS proxy on that port.
• -N :- This option tells SSH not to execute any commands on the remote server
• -C :- This option enables compression during data transfer.
• ubuntu@[YOUR PUBLIC IP] :- This specifies the username (ubuntu in this case) and the public IP address of the remote server you want to connect to

Optional Step

We Can Save Us Some Time whenever we write this command by adding the following to our ssh config file :-

Host VPN
 Hostname <YOUR IP>
 User ubuntu
 IdentityFile <YOUR FILEPATH>
 DynamicForward 1369
 RequestTTY no
 Compression yes
 ExitOnForwardFailure yes
 LogLevel ERROR

You can now run this by the following command :-

ssh VPN -N

Now We have Successfully Established a connection to Our Server

For a more beginner-friendly approach, we’ll integrate this proxy with our web browser instead of applying it globally. So Fire up your web browser , Im going to be using Firefox for this demo

Now i will open up my firefox settings and search for proxy setting then a pop like the one shown here will open :-

After this select Manual Proxy Configuration and in the SOCKS Host put in localhost 1369 as your configuration as shown in the image above and thats it your proxy is setup .

You Can Refer this quick Demonstration To understand more about it :-

Conclusion

In this blog post, we have discussed how to establish a secure gateway to the internet with your cloud-based proxy server.
We have covered the basics of proxy servers, why you might want to use one, and how to set one up using AWS EC2 and Firefox.And We have also seen a video demonstration of the process.

Thank you for taking the time to read this guide on setting up your own cloud-based proxy server.All the References for the technologies used above are given below.

Feel free to reach out to me if you have any queries/Suggestions

References:

• SSH config file syntax and how-tos for configuring the OpenSSH client
• What is Amazon EC2?
• What is an SSH Tunnel & SSH Tunneling?

Being a novice programmer, I’m captivated by websites . While creating digital realms feels natural, a key question arises: how do I share these websites online?

This is the start of a series that aims to make web hosting easy to understand. We’ll start with the basics, move to more advanced topics, and finally explore the detailed world of web hosting. The series will guide you through the basics and then into more complicated aspects step by step

In this article , we embark on a journey learning of web hosting, ushering you through each stage, each concept, and each practice. From the rudimentary building blocks to the more sophisticated mechanics, I’ll provide you with a comprehensive understanding of hosting websites using AWS S3, ensuring that by the series’ end, you’ll have traversed the entire A-to-Z spectrum of web hosting.

So, what exactly is AWS ?

Think of AWS (Amazon Web Services) as owning land or property, but in the digital world. When you own property in a country, you have your own space where you can build things, such as a house or a workshop. Similarly, in the digital realm, when you use AWS, you’re essentially “owning” a space on their cloud platform where you can set up and run various types of digital tools and services.

Imagine you’re a craftsman who needs a place to build things. Instead of constructing your own workshop from scratch, which can take a lot of time and resources, you decide to lease a ready-made workshop in a business park. This workshop comes fully equipped with tools, machinery, and utilities, and you only pay for what you use. Plus, if you ever need more space or specialised equipment, you can easily upgrade your workshop without the hassle of building or maintaining it yourself.

Prerequisites :

AWS account :- If you Dont have an AWS account , click here to register

Getting Started :

Let’s begin by organising your website files into a dedicated folder. This beginner-friendly tutorial will cover HTML and CSS hosting, while the next tutorial will delve into hosting with React JS — so keep an eye out for that.

If you’re currently without HTML files, don’t fret. We’ve prepared demo files for you, accessible through this GitHub link. Click here to access them and enrich your learning journey.

For the people using GitHub for the files :-

Clone the Github Repository to your local machine by the command below

git clone https://github.com/PrabirKalwani/404page.git

Create A S3 Bucket:-

1. Access your AWS dashboard and locate the S3 (Simple Storage Service) through the search function. Once you’re on the S3 dashboard, continue with the next steps.
2. Navigate to the left-hand side and select “Buckets.” Proceed by clicking on the “Create Bucket” option, highlighted in yellow.
   Think of a bucket as analogous to a Google Drive, where you can store your website files.
3. Moving forward, configure the bucket with general settings. Employ your domain name as the bucket name, as this setup will be employed for hosting purposes. If you lack a domain name, feel free to use a name of your preference.
4. Subsequently, click on “ACLs” to enable Access Control Lists (ACLs). More about ACLS here
5. It’s advisable to choose the region closest to your location. This reduces website latency and eliminates the need for a Content Delivery Network (CDN). Further details about CDNs will be covered in the upcoming article.
6. Within this setup, opt to grant unrestricted access to the bucket.
7. Subsequently, proceed to create your bucket by clicking the designated button. For a comprehensive walkthrough, a video outlining the entire process is provided below.

While it’s recommended to carefully review each security rule for enhanced safety, for the sake of efficiency, we’re proceeding with permitting public access for now.

Make The Bucket Ready For Hosting

1. Following this, proceed to upload all your files and directories to your S3 bucket
2. Select the checkbox to highlight all files and folders. Then, access the “Actions” menu and choose the option to make them public by utilizing the ACL feature.

Host Your Files

Navigate to the upper section and select “Properties.” Proceed to scroll down to the “Static Website Hosting” option. Activate this feature and proceed to input the name of your primary HTML file in the designated “Index Document” tab.

Subsequently, return to the properties tab where you’ll find a prepared link for your website.

Conclusion

In conclusion, Amazon S3 offers an accessible hosting solution with user-friendly features. However, this convenience comes at the cost of potential security vulnerabilities.

On the positive side, it simplifies file management and accommodates varying traffic levels while being cost-effective and ensuring high availability.

Conversely, limitations in customization, security measures, absence of server-side scripting, and potential performance constraints should be considered.

Deciding on Amazon S3 as a hosting solution requires weighing its ease of use against its security and functionality trade-offs, depending on your project’s specific requirements.

The subsequent pair of articles will explore the implementation of Server Hosting through NGINX Proxy Manager, Docker, AWS EC2, SSL Certificates, and Cloudflare.

This approach offers several advantages, including enhanced security, scalability, streamlined management through Docker, reliable SSL encryption, and improved performance through Cloudflare’s content delivery network.

Feel Free to react out to me if you have any feedback / queries

Special Thanks to Darsh Mashru and Aryan Irani for inspiring me to write this article

References:-

• Hosting a static website using Amazon S3
• Amazon S3 objects overview
• What is a CDN? - Content Delivery Network Explained - AWS
• Buckets overview