GithubHelp home page GithubHelp logo

101-kittens-carousel-static-website-ec2-project's Introduction

Project-101 : Kittens Carousel Static Website deployed on AWS EC2 using Cloudformation

Description

Kittens Carousel is a static website application deployed with Apache Web Server on AWS Elastic Compute Cloud (EC2) Instance using AWS Cloudformation Service.

Problem Statement

Project_101

  • Your company has recently started a web application project that will serve as an attraction point for pet lovers. As a first step of the project, developers in your team have prepared a preliminary design of the kittens carousel application and pushed the necessary files for the project to the repository on GitHub.

  • Your task is to show the how the design of the application looks as static web page in the development environment. Thus, you need to deploy the web application using the index.html and an images given within the static-web folder. Note the following for your web application.

    • User should face first with index.html when the web app starts.

    • Application should be deployed on Apache Web Server.

    • Application should be deployed in the development environment on AWS EC2 Instance using AWS Cloudformation Service. In the development environment, you can configure your Cloudformation template using the following,

      • The application stack should be created with new AWS resources.

      • The application should run on the latest version of Amazon Linux 2023 Image (!!!!Bonus). Here is the link where you can find information about this challenge.

        https://aws.amazon.com/blogs/compute/query-for-the-latest-amazon-linux-ami-ids-using-aws-systems-manager-parameter-store/

      • EC2 Instance type can be configured as t2.micro.

      • Instance launched by Cloudformation should be tagged Web Server of StackName

      • The Web Application should be accessible via web browser from anywhere.

      • The Application files should be downloaded from the Github repo and deployed on the EC2 Instance using user data script within Cloudformation template.(Hint:use curl or wget)

      • Kittens Carousel Application Website URL should be given as output by Cloudformation Service after the stack is created.

Project Skeleton

101-kittens-carousel-static-website-ec2 (folder)
|
|----readme.md         # Given to the students (Definition of the project)          
|----cfn-template.yml  # To be delivered by students (Cloudformation template)
|----static-web
        |----index.html  # Given to the students (HTML file)
        |----cat0.jpg    # Given to the students (image file)
        |----cat1.jpg    # Given to the students (image file)
        |----cat2.jpg    # Given to the students (image file)

Expected Outcome

Project 101 : Kittens Carousel Application Snapshot

At the end of the project, following topics are to be covered;

  • Apache Web Server Installation on Linux

  • Static Website Deployment

  • Bash scripting

  • AWS EC2 Service

  • AWS Security Groups Configuration

  • AWS Cloudformation Service

  • AWS Cloudformation Template Design

  • Git & Github for Version Control System

At the end of the project, students will be able to;

  • install Apache Web Server on Amazon Linux 2023.

  • improve bash scripting skills using user data section in Cloudformation to install and setup web application on EC2 Instance.

  • configure AWS EC2 Instance and Security Groups.

  • configure Cloudformation template to use AWS Resources.

  • use AWS Cloudformation Service to launch stacks.

  • use git commands (push, pull, commit, add etc.) and Github as Version Control System.

Steps to Solution

  • Step 1: Download or clone project definition from clarusway repo on Github

  • Step 2: Create project folder for local public repo on your pc

  • Step 3: Prepare a cloudformation template to deploy your app on EC2 Instance

  • Step 4: Push your application into your own public repo on Github

  • Step 5: Deploy your application on AWS Cloud using Cloudformation template to showcase your app within your team.

Notes

  • Customize the application by hard-coding your name instead of student_name within index.html.

Resources

101-kittens-carousel-static-website-ec2-project's People

Contributors

ekrem0691 avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.