# sandeepkumar1703/nextjs-aws-ec2-deployment architecture

> Architecture diagram of the GitHub repository sandeepkumar1703/nextjs-aws-ec2-deployment, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-28). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/sandeepkumar1703/nextjs-aws-ec2-deployment
- Repository: https://github.com/sandeepkumar1703/nextjs-aws-ec2-deployment

## Overview

This repository demonstrates a manual Docker-to-AWS deployment of a minimal Next.js web app: a developer builds and pushes an image to ECR, then an EC2 host pulls and runs it for browser access. The app source confirms a home page and global styling. Deployment steps and AWS components are documented in the README; Dockerfile behavior and runtime wiring were not sampled, so those links follow the documented workflow only.

Main entry points: [`app/pages/_app.tsx`](https://github.com/sandeepkumar1703/nextjs-aws-ec2-deployment/blob/main/app/pages/_app.tsx) (App wrapper), [`Dockerfile`](https://github.com/sandeepkumar1703/nextjs-aws-ec2-deployment/blob/main/Dockerfile) (Docker build config), [`app/pages/index.tsx`](https://github.com/sandeepkumar1703/nextjs-aws-ec2-deployment/blob/main/app/pages/index.tsx) (Home page), [`app/styles/globals.css`](https://github.com/sandeepkumar1703/nextjs-aws-ec2-deployment/blob/main/app/styles/globals.css) (Global styles)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_web["Web application"]
  node_home["Home page<br/>[index.tsx]"]
  node_appwrapper["App wrapper<br/>[_app.tsx]"]
  node_styles["Global styles<br/>[globals.css]"]
end

subgraph group_image["Image workflow"]
  node_dockerfile["Docker build config"]
  node_imageartifact["Docker image"]
end

subgraph group_hosting["AWS hosting"]
  node_ecr["ECR registry"]
  node_iam["AWS IAM"]
  node_ec2["EC2 host"]
  node_container["Next.js container"]
  node_port["Port 3000"]
end

node_developer(("Developer"))
node_browser(("Web browser"))

node_developer -->|"builds from"| node_dockerfile
node_dockerfile -->|"packages app"| node_imageartifact
node_developer -->|"pushes image"| node_ecr
node_imageartifact -->|"uploaded to"| node_ecr
node_ec2 -->|"pulls image"| node_ecr
node_ec2 -->|"runs image"| node_container
node_container -->|"serves on"| node_port
node_browser -->|"requests app"| node_port
node_port -->|"serves page"| node_home
node_appwrapper -->|"renders component"| node_home
node_appwrapper -->|"imports styles"| node_styles
node_iam -.->|"authenticates access"| node_ecr

click node_home "https://github.com/sandeepkumar1703/nextjs-aws-ec2-deployment/blob/main/app/pages/index.tsx"
click node_appwrapper "https://github.com/sandeepkumar1703/nextjs-aws-ec2-deployment/blob/main/app/pages/_app.tsx"
click node_styles "https://github.com/sandeepkumar1703/nextjs-aws-ec2-deployment/blob/main/app/styles/globals.css"
click node_dockerfile "https://github.com/sandeepkumar1703/nextjs-aws-ec2-deployment/blob/main/Dockerfile"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_home,node_appwrapper,node_styles,node_browser toneBlue
class node_dockerfile,node_imageartifact toneAmber
class node_ecr,node_iam,node_ec2,node_container,node_port toneMint
class node_developer toneIndigo
```

## Components

### Web application

- [Home page](https://github.com/sandeepkumar1703/nextjs-aws-ec2-deployment/blob/main/app/pages/index.tsx): `app/pages/index.tsx`
- [App wrapper](https://github.com/sandeepkumar1703/nextjs-aws-ec2-deployment/blob/main/app/pages/_app.tsx): `app/pages/_app.tsx`
- [Global styles](https://github.com/sandeepkumar1703/nextjs-aws-ec2-deployment/blob/main/app/styles/globals.css): `app/styles/globals.css`

### Image workflow

- [Docker build config](https://github.com/sandeepkumar1703/nextjs-aws-ec2-deployment/blob/main/Dockerfile): `Dockerfile`
- **Docker image**

### AWS hosting

- **ECR registry**
- **AWS IAM**
- **EC2 host**
- **Next.js container**
- **Port 3000**

### Other components

- **Developer**
- **Web browser**

## Connections

- Developer → Docker build config: builds from
- Docker build config → Docker image: packages app
- Developer → ECR registry: pushes image
- Docker image → ECR registry: uploaded to
- EC2 host → ECR registry: pulls image
- EC2 host → Next.js container: runs image
- Next.js container → Port 3000: serves on
- Web browser → Port 3000: requests app
- Port 3000 → Home page: serves page
- App wrapper → Home page: renders component
- App wrapper → Global styles: imports styles
- AWS IAM → ECR registry: authenticates access