EC2 INSTANCE SETUP:

• Create an EC2 Instance with Ubuntu and clone the GitHub repository at https://github.com/FaizanShaikh1/django-todo.git .

• Update the instance with the latest dependencies using the command:

    sudo apt-get update
  

• Navigate to the django-todo repository directory:

    cd django-todo/
  

• Install the Django package:

    sudo apt install python3-pip -y
    pip install django
  

• Perform database migrations:

    python3 manage.py migrate
  

• Edit the /django/todoApp/settings.py file to include the host IP or set it to '*' by running:

    vi /django/todoApp/settings.py
  

  Inside the file, update ALLOWED_HOSTS to either ['your_host_public_ip'] or ['*'].

• Start the Django development server accessible only on localhost:

    python3 manage.py runserver
  

• To make it accessible from any IP, modify the inbound rule in the security group by allowing 0.0.0.0 IP on port 8000. Access the application at <your_host_public_ip>:8000 by running:

    python3 manage.py runserver 0.0.0.0:8000
  

• Your todo app is now accessible through a web browser.

• To run the application in the background, use the following command:

    nohup python3 manage.py runserver 0.0.0.0:8000 &
  

• For monitoring and terminating the task, use the following commands:

  To list processes using port 8000:

    lsof -i:8000
  

  To terminate a specific task identified by its Process ID (PID):

    kill -9 <PID_ID>
  

  Replace <PID_ID> with the actual Process ID you wish to terminate.

DOCKER SETUP:

• Install Docker:

    sudo apt install docker.io -y
  

• Create Dockerfile: Open the Dockerfile using a text editor:

    vi Dockerfile
  

  Add the following content:

    FROM python:3
  
    RUN pip install django==3.2
  
    COPY . .
  
    RUN python manage.py migrate
  
    CMD ["python", "manage.py", "runserver", "0.0.0.0:8000"]
  

  Save and exit by typing :wq.

• Build Docker Image:

    sudo docker build . -t todo-app
  

  The image is now created.

• Check Running Containers:

    sudo docker ps
  

  If no containers are running, proceed to the next step.

• Run Docker Container:

    sudo docker run -p 8000:8000 <build_id>
  

  To run in the background and create a detached container:

    sudo docker run -d -p 8000:8000 <build_id>
  

  Now, the Docker container is created and running.

REMOVE DOCKER CONTAINER:

• List all Docker containers (running and stopped):

    sudo docker ps -a
  

  This will display a list of containers along with their IDs.

• Remove the Docker container:

    sudo docker rm <container_id>
  

  Replace <container_id> with the actual ID of the container you want to remove.

  If the container is still running, you might need to stop it first using docker stop:

    sudo docker stop <container_id>
  

  And then remove it.

• After completion, terminate the EC2 instance.

Prerequisites

Before we begin, make sure you have the following:

• An AWS account

• Terraform installed on your local machine

• Basic knowledge of Terraform and AWS S3 (AWS CLI must be installed )

Setting Up Your Project

Let's start by creating a project directory. Inside this directory, create a file named main.tf. This file will contain your Terraform configuration.

#create s3 bucket
resource "aws_s3_bucket" "mybucket" {
    bucket = var.bucketname
}

resource "aws_s3_bucket_ownership_controls" "example" {
  bucket = aws_s3_bucket.mybucket.id

  rule {
    object_ownership = "BucketOwnerPreferred"
  }
}

resource "aws_s3_bucket_public_access_block" "example" {
  bucket = aws_s3_bucket.mybucket.id

  block_public_acls       = false
  block_public_policy     = false
  ignore_public_acls      = false
  restrict_public_buckets = false
}

resource "aws_s3_bucket_acl" "example" {
  depends_on = [
    aws_s3_bucket_ownership_controls.example,
    aws_s3_bucket_public_access_block.example,
  ]

  bucket = aws_s3_bucket.mybucket.id
  acl    = "public-read"
}

resource "aws_s3_object" "index" {
  bucket = aws_s3_bucket.mybucket.id
  key = "index.html"
  source = "index.html"
  acl = "public-read"
  content_type = "text/html"
}

resource "aws_s3_object" "error" {
  bucket = aws_s3_bucket.mybucket.id
  key = "error.html"
  source = "error.html"
  acl = "public-read"
 content_type = "text/html"
}

resource "aws_s3_object" "profile" {
  bucket = aws_s3_bucket.mybucket.id
  key = "profile.png"
  source = "profile.png"
  acl = "public-read"
}

resource "aws_s3_bucket_website_configuration" "website" {
  bucket = aws_s3_bucket.mybucket.id
  index_document {
    suffix = "index.html"
  }

  error_document {
    key = "error.html"
  }

  depends_on = [ aws_s3_bucket_acl.example ]
}

create a file named provider.tf. This file will contain your Terraform Provider info.

provider "aws" {
    region = "us-east-1"
}

create a file named variables.tf. This file will contain your Terraform Variables .

variable "bucketname" {
  default = "myterraformprojwebsite001"
}

create a file named index.html. This file will contain your Website HTML code .

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">

    <title>Unitech Public School</title>

    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i" rel="stylesheet">

    <!-- Vendor CSS Files -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" rel="stylesheet">
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">

    <!-- Template Main CSS File -->
    <style>
        body {
            margin: 0;
            padding: 0;
            height: 100vh;
            background: url('profile.png') center/cover no-repeat; /* Add your image path */
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            color: #fff; /* Light Text Color */
            text-align: center;
            font-family: 'Open Sans', sans-serif;
        }

        .school-name {
            font-size: 36px;
            font-weight: bold;
            color: #fff; /* Light Text Color */
            text-shadow: 2px 2px 4px #333; /* Dark Text Shadow */
        }

        .powered-by {
            font-size: 14px;
            color: #ccc; /* Light Gray Color */
            text-shadow: 1px 1px 2px #333; /* Dark Text Shadow */
        }
    </style>
</head>

<body>

    <!-- ======= Header ======= -->
    <header id="header">
        <div class="school-name animated fadeInUp">Unitech Public School</div>
        <div class="powered-by animated fadeInUp">Powered by Future Unitech Education Society</div>
    </header><!-- End Header -->

    <!-- ======= Hero Section ======= -->
    <section id="hero" class="d-flex flex-column justify-content-center align-items-center">
        <div class="hero-container" data-aos="fade-in">
            <h1>Welcome to Unitech Public School</h1>
            <p>Your child's first step towards a bright future!</p>
        </div>
    </section><!-- End Hero -->

    <!-- ======= About Section ======= -->
    <section id="about" class="about">
        <div class="container" style="text-align: center;">
            <div class="section-title">
                <h2>About Us</h2>
                <h3>Providing quality education to young minds</h3>
            </div>
            <p>Hello! Welcome to Unitech Public School, where we nurture young minds and foster a love for learning.</p>
            <!-- Add more content about the school -->
        </div>
    </section><!-- End About Section -->

    <!-- ... Add more sections as needed -->

    <!-- Vendor JS Files -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

</body>

</html>

create a file named error.html. This file will contain your error html info.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Error - John's Portfolio</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <!-- Header section -->
  <header>
    <h1>John's Portfolio</h1>
    <nav>
      <!-- Add navigation links here if needed -->
    </nav>
  </header>

  <!-- Error section -->
  <section id="error">
    <h2>Error</h2>
    <div class="error-message">
      <h3>Oops! Something went wrong.</h3>
      <p>We apologize for the inconvenience. The page you are looking for cannot be found or is currently unavailable.</p>
      <a href="index.html">Go back to the homepage</a>
    </div>
  </section>

  <!-- Add more sections as needed (e.g., About, Contact, etc.) -->

  <script src="app.js"></script>
</body>
</html>

Also use one profile.png picture for your website.

This website will be hosted publicly because its changing private to public in its main terraform file.

For more Information / Practice clone my Repo from GitHub :

https://github.com/FaizanShaikh1/Terraform-lab-websitehosting-s3.git

Deploying Your Infrastructure

Initialize your Terraform configuration by running:

terraform init

Now, apply the configuration:

terraform plan

# if all plan is correct ,go ahead and apply
terraform apply

Terraform will prompt you to confirm the creation of the resources. Type yes and hit Enter. Once the process is complete, you'll see the URL of your newly created S3 bucket.

Uploading Your Website

You can see your website by pasting URL on the browser.

Conclusion

Congratulations! You've successfully set up a static website on AWS S3 using Terraform. This is a basic example, and you can further enhance it by adding features like CloudFront for CDN, custom domains, and more.

Terraform provides a powerful and declarative way to manage your infrastructure, making it easy to version, manage, and scale your web hosting infrastructure on AWS.

Happy coding and hosting!

Overview:

This guide is tailored for beginners who wish to leverage AWS to host their websites effortlessly. By following these straightforward steps, you can have your website hosted in no time. The use of an AWS free tier account allows you to explore and deploy your website on an EC2 instance.

AWS EC2 Instance:

Step-by-step guide illustrate launching an Ubuntu instance on Amazon EC2:

1. Login to AWS Console:

   • Open the AWS Management Console: https://aws.amazon.com/.

   • Sign in to your AWS account.

2. Navigate to EC2:

   • In the AWS Management Console, go to the "Services" dropdown and select "EC2" under the "Compute" section.

3. Launch an Instance:

   • Click on the "Launch Instance" button.

4. Choose an Amazon Machine Image (AMI):

   • In the "Choose an Amazon Machine Image (AMI)" step, select an Ubuntu AMI. Use the search bar to filter by entering "ubuntu."

5. Choose an Instance Type:

   • In the "Choose an Instance Type" step, select the instance type that meets your requirements (Free tier t2.micro). The default selection is usually a good starting point.

6. Configure Instance:

   • In the "Configure Instance" step, you can leave the default settings or customize them based on your needs.

7. Add Storage:

   • In the "Add Storage" step, specify the amount of storage you need for your instance. The default settings are typically sufficient for a basic setup.

8. Add Tags (Optional):

   • You can add tags to your instance for better organization (like practice). This step is optional.

9. Configure Security Group:

   • In the "Configure Security Group" step, configure the security group to allow incoming traffic. At least, allow SSH (port 22) for connecting to your instance. Optionally, allow HTTP (port 80) for web server access.

10. Review and Launch:

    • Review your configurations in the "Review Instance Launch" step. If everything looks good, click on the "Launch" button.

11. Select Key Pair:

    • In the "Select an existing key pair or create a new key pair" window, choose an existing key pair or create a new one. This key pair is necessary to connect to your instance securely.

12. Launch Instances:

    • Click on the "Launch Instances" button.

Your Ubuntu instance is now launching. Once it's running, you can connect to it using SSH using the private key associated with the key pair you selected during the launch process or you can connect directly through aws console connect option.

Screenshots:

Follows the screenshots for reference:

Paste the public ip in the browser and access the website

Terminates the machines after completion.

Conclusion:

With this guide, even beginners can confidently host their websites on AWS. The use of an AWS free tier account ensures a cost-effective and risk-free environment to explore the powerful capabilities of cloud hosting. Follow these steps, and soon your website will be live, hosted securely on an AWS EC2 instance.

Disclaimer:

Always be mindful of AWS best practices and security measures to ensure a reliable and secure hosting experience.