Merge pull request #1 from HimanM/test

Test

Author: HimanM

.github/workflows/check-deploy.yml

@@ -0,0 +1,77 @@
+name: Check Deploy Strategy
+
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  check-and-deploy:
+    name: Check Deploy Strategy
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Check DEPLOY_AWS secret
+        id: check-deploy
+        run: |
+          if [ "${{ secrets.DEPLOY_AWS }}" == "true" ]; then
+            echo "deploy_to_aws=true" >> $GITHUB_OUTPUT
+            echo "Deploy to AWS ECS"
+          else
+            echo "deploy_to_aws=false" >> $GITHUB_OUTPUT
+            echo "Deploy to GitHub Pages"
+          fi
+
+      - name: Trigger AWS Deployment
+        if: steps.check-deploy.outputs.deploy_to_aws == 'true'
+        uses: actions/github-script@v7
+        with:
+          github-token: ${{ secrets.GITHUB_TOKEN }}
+          script: |
+            await github.rest.actions.createWorkflowDispatch({
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              workflow_id: 'deploy.yml',
+              ref: context.ref
+            });
+
+      - name: Setup Node.js
+        if: steps.check-deploy.outputs.deploy_to_aws == 'false'
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+          cache: 'npm'
+          cache-dependency-path: './aws-deploy-guide/package-lock.json'
+
+      - name: Install dependencies
+        if: steps.check-deploy.outputs.deploy_to_aws == 'false'
+        working-directory: ./aws-deploy-guide
+        run: npm ci
+
+      - name: Build for GitHub Pages
+        if: steps.check-deploy.outputs.deploy_to_aws == 'false'
+        working-directory: ./aws-deploy-guide
+        run: npm run build
+        env:
+          NEXT_PUBLIC_BASE_PATH: ''
+
+      - name: Add .nojekyll file
+        if: steps.check-deploy.outputs.deploy_to_aws == 'false'
+        working-directory: ./aws-deploy-guide
+        run: touch out/.nojekyll
+
+      - name: Add CNAME file
+        if: steps.check-deploy.outputs.deploy_to_aws == 'false'
+        working-directory: ./aws-deploy-guide
+        run: echo "devops4.himanmanduja.fun" > out/CNAME
+
+      - name: Deploy to GitHub Pages
+        if: steps.check-deploy.outputs.deploy_to_aws == 'false'
+        uses: peaceiris/actions-gh-pages@v3
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          publish_dir: ./aws-deploy-guide/out
+          cname: devops4.himanmanduja.fun

.github/workflows/deploy.yml

@@ -1,9 +1,7 @@
 name: Deploy to Amazon ECS
 
 on:
-  push:
-    branches:
-      - main
+  workflow_dispatch:
 
 env:
   AWS_REGION: ${{ secrets.AWS_REGION }}                   # set this to your preferred AWS region, e.g. us-west-1
@@ -27,15 +25,15 @@ jobs:
         uses: actions/checkout@v4
 
       - name: Configure AWS credentials
-        uses: aws-actions/configure-aws-credentials@v1
+        uses: aws-actions/configure-aws-credentials@v4
         with:
           aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
           aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
           aws-region: ${{ env.AWS_REGION }}
 
       - name: Login to Amazon ECR
         id: login-ecr
-        uses: aws-actions/amazon-ecr-login@v1
+        uses: aws-actions/amazon-ecr-login@v2
 
       - name: Build, tag, and push image to Amazon ECR
         id: build-image
@@ -58,15 +56,15 @@ jobs:
 
     steps:
       - name: Configure AWS credentials
-        uses: aws-actions/configure-aws-credentials@v1
+        uses: aws-actions/configure-aws-credentials@v4
         with:
           aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
           aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
           aws-region: ${{ env.AWS_REGION }}
 
       - name: Login to Amazon ECR
         id: login-ecr
-        uses: aws-actions/amazon-ecr-login@v1
+        uses: aws-actions/amazon-ecr-login@v2
 
       - name: Download Task Definition
         run: |
@@ -82,7 +80,7 @@ jobs:
           image: ${{ steps.login-ecr.outputs.registry }}/${{ env.ECR_REPOSITORY }}:${{ github.sha }}
 
       - name: Deploy Amazon ECS task definition
-        uses: aws-actions/amazon-ecs-deploy-task-definition@v1
+        uses: aws-actions/amazon-ecs-deploy-task-definition@v2
         with:
           task-definition: ${{ steps.task-def.outputs.task-definition }}
           service: ${{ env.ECS_SERVICE }}

README.md

@@ -1,70 +1,156 @@
-# Guide to Deploy a Container in AWS
+# AWS Deployment Guide and DevOps Project Hub
 
-This is a Next.js application that serves as a comprehensive guide for deploying containerized applications on AWS ECS Fargate. It includes a step-by-step workflow, prerequisites, and links to other DevOps projects.
+![Project Home](docs/guide_home.png)
 
-## Features
+This repository contains a Next.js application designed to serve as a comprehensive, interactive guide for deploying containerized applications to AWS ECS Fargate. It documents the entire DevOps lifecycle, from configuring AWS credentials to setting up a CI/CD pipeline with GitHub Actions.
 
-- **Interactive Guide**: Step-by-step instructions for AWS deployment.
-- **Modern UI**: Built with shadcn/ui and Tailwind CSS in a dark theme.
-- **Animations**: Smooth workflow animations using Framer Motion.
-- **Project Hub**: Links to other DevOps projects.
+The application itself is a hands-on learning tool, featuring a step-by-step workflow visualization, detailed command explanations, and a centralized dashboard for other DevOps projects.
 
-## Getting Started
+## Project Overview
 
-First, run the development server:
+The primary goal of this project is to demystify the process of deploying a Dockerized application to the cloud. It breaks down complex AWS tasks into manageable steps, providing visual aids and direct links to necessary resources.
 
-```bash
-npm run dev
-```
+### Key Features
 
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+*   **Interactive Deployment Workflow**: A guided experience through the AWS deployment process.
+*   **Mobile-Optimized Design**: A responsive interface that works seamlessly on desktop and mobile devices.
+*   **Automated CI/CD**: A fully functional GitHub Actions pipeline for continuous deployment.
+*   **DevOps Dashboard**: A collection of links to related DevOps initiatives.
 
-## CI/CD Pipeline (GitHub Actions)
+## Technical Architecture
 
-This project includes a GitHub Actions workflow (`.github/workflows/deploy.yml`) that automatically builds and deploys the application to AWS ECS whenever changes are pushed to the `main` branch.
+*   **Frontend Framework**: Next.js 14 (React)
+*   **Styling**: Tailwind CSS
+*   **UI Components**: Shadcn/UI, Lucide Icons
+*   **Infrastructure**: AWS ECS (Fargate), AWS ECR, AWS IAM
+*   **Containerization**: Docker
+*   **CI/CD**: GitHub Actions
 
-### Prerequisites for CI/CD
-You must configure the following **Secrets** in your GitHub Repository (Settings > Secrets and variables > Actions):
+## Deployment Walkthrough
 
-| Secret Name | Description | Example Value |
-| :--- | :--- | :--- |
-| `AWS_ACCESS_KEY_ID` | Your AWS Access Key ID | `AKIA...` |
-| `AWS_SECRET_ACCESS_KEY` | Your AWS Secret Access Key | `wJalr...` |
-| `AWS_REGION` | AWS Region | `us-west-2` |
-| `ECR_REPOSITORY` | Name of your ECR Repository | `aws-deploy-guide` |
-| `ECS_CLUSTER` | Name of your ECS Cluster | `aws-deploy-guide-cluster` |
-| `ECS_SERVICE` | Name of your ECS Service | `aws-deploy-guide-task-service` |
-| `ECS_TASK_DEFINITION` | Name of your Task Definition Family | `aws-deploy-guide-task` |
-| `CONTAINER_NAME` | Name of the container in Task Def | `aws-deploy-guide-container` |
+This section documents every step required to deploy the application, corresponding to the interactive guide within the app.
 
-### Workflow Stages
-1.  **Build and Push:** Builds the Docker image and pushes it to Amazon ECR.
-2.  **Deploy to ECS:** Updates the ECS Task Definition with the new image and deploys it to the ECS Service.
+### 1. AWS Configuration
 
-## Docker Deployment
+The first step involves setting up the necessary permissions and tools to interact with AWS.
 
-This project includes a `Dockerfile` to containerize the application.
+**Create Access Keys**
+Generate programmatic access keys in the AWS IAM Console to allow the AWS CLI to authenticate.
+![AWS Access Keys](docs/access_keys_created.png)
 
-### Build the Docker Image
+### 2. Container Registry (ECR)
 
-```bash
-docker build -t aws-deploy-guide .
-```
+Amazon Elastic Container Registry (ECR) is used to store the Docker images.
 
-### Run the Container Locally
+**Create Repository**
+A new repository is created to host the application image.
+![ECR Repository List](docs/repo_list.png)
 
-```bash
-docker run -p 3000:3000 aws-deploy-guide
-```
+**Push Commands**
+The AWS CLI provides specific commands to authenticate Docker and push the image.
+![Push Commands](docs/push_commands.png)
 
-Access the application at `http://localhost:3000`.
+**Successful Push**
+Verifying that the image has been successfully uploaded to ECR.
+![CLI Push Success](docs/cli_push_success.png)
 
-## AWS Deployment Steps (Summary)
+**Repository Content**
+The ECR repository now contains the tagged Docker image.
+![ECR Repo with Image](docs/ecr_repo_with_image.png)
 
-1.  **Login to AWS**: Configure CLI and login to ECR.
-2.  **Push Image**: Tag and push your Docker image to ECR.
-3.  **Create Cluster**: Set up an ECS Fargate cluster.
-4.  **Deploy Service**: Create a task definition and service to run your container.
-5.  **Access**: Use the public IP assigned to your task.
+### 3. ECS Cluster Setup
 
-For detailed steps, run the application and follow the interactive guide.
+Amazon Elastic Container Service (ECS) is the orchestration service used to run the containers.
+
+**Cluster Creation Form**
+Configuring a new Fargate cluster in the AWS Console.
+![ECS Cluster Creation Form](docs/ecs_cluster_creation_form.png)
+
+**Cluster Created**
+The ECS Cluster is successfully provisioned and ready to host services.
+![ECS Cluster Created](docs/ecs_cluster_created.png)
+
+### 4. Task Definition
+
+The Task Definition serves as a blueprint for the application, specifying the container image, CPU, and memory requirements.
+
+**Configure Task Definition (Step 1)**
+Setting the task family name and infrastructure requirements.
+![New Task Definition Form 1](docs/new_task_definition_form_1.png)
+
+**Configure Container (Step 2)**
+Specifying the container details and port mappings.
+![New Task Definition Form 2](docs/new_task_definition_form_2.png)
+
+**Select Image URI**
+Using the URI of the image pushed to ECR earlier.
+![ECR Image Selection](docs/ecr_image_selection_on_new_task_def.png)
+
+**Task Definition Created**
+The task definition is successfully registered.
+![Task Definition Success](docs/task_definition_creation_success.png)
+
+### 5. Service Deployment
+
+The ECS Service maintains the desired number of tasks and handles networking.
+
+**Create Service (Step 1)**
+Defining the service name and desired task count.
+![Create Service Form 1](docs/create_service_form_1.png)
+
+**Environment Configuration (Step 2)**
+Setting up the deployment type and platform version.
+![Create Service Form 2](docs/create_service_form_2_env.png)
+
+**Deployment Settings (Step 3)**
+Configuring deployment strategies (e.g., rolling updates).
+![Create Service Form 3](docs/create_service_form_3_deployment.png)
+
+**Networking (Step 4)**
+Defining the VPC, subnets, and security groups for the service.
+![Create Service Form 4](docs/create_service_form_4_networking.png)
+
+**Service Created**
+The service is successfully created and begins provisioning tasks.
+![Service Creation Success](docs/service_creation_success.png)
+
+### 6. Verification
+
+Once the service is stable, the application is accessible via the public IP of the Fargate task.
+
+**Access Application**
+The application is live and accessible in the browser.
+![Access Application](docs/access_application.png)
+
+**Deployed Dashboard**
+The live dashboard showing the successful deployment.
+![Deployed Application](docs/deployed_application.png)
+
+## CI/CD Pipeline
+
+The project includes a GitHub Actions workflow to automate the build and deploy process.
+
+**GitHub Secrets**
+Securely storing AWS credentials and configuration variables in GitHub.
+![GitHub Secrets](docs/github_secrets.png)
+
+**Workflow Visualization**
+The GitHub Actions interface showing the progress of the build and deploy jobs.
+![GitHub Workflow](docs/github_workflow.png)
+
+### Required Secrets
+
+To enable the CI/CD pipeline, the following secrets must be configured in the GitHub Repository:
+
+*   AWS_ACCESS_KEY_ID
+*   AWS_SECRET_ACCESS_KEY
+*   AWS_REGION
+*   ECR_REPOSITORY
+*   ECS_CLUSTER
+*   ECS_SERVICE
+*   ECS_TASK_DEFINITION
+*   CONTAINER_NAME
+
+## Educational Project Disclaimer
+
+This is an educational project designed to demonstrate DevOps best practices and modern web development techniques. Anyone is free to fork this repository and modify anything to suit their own learning needs or project requirements.

aws-deploy-guide/next.config.ts

@@ -3,6 +3,10 @@ import type { NextConfig } from "next";
 const nextConfig: NextConfig = {
   /* config options here */
   reactCompiler: true,
+  output: 'export',
+  images: {
+    unoptimized: true,
+  },
 };
 
 export default nextConfig;

aws-deploy-guide/package-lock.json

@@ -23,6 +23,7 @@
     "next": "16.0.5",
     "react": "19.2.0",
     "react-dom": "19.2.0",
+    "react-icons": "^5.5.0",
     "tailwind-merge": "^3.4.0"
   },
   "devDependencies": {
@@ -31,6 +32,7 @@
     "@types/react": "^19",
     "@types/react-dom": "^19",
     "babel-plugin-react-compiler": "1.0.0",
+    "baseline-browser-mapping": "^2.8.32",
     "eslint": "^9",
     "eslint-config-next": "16.0.5",
     "tailwindcss": "^4",