{"id":31696535,"url":"https://github.com/ariefshaik7/nextjs-k8s","last_synced_at":"2026-04-08T18:01:56.578Z","repository":{"id":318650125,"uuid":"1072169523","full_name":"ariefshaik7/nextjs-k8s","owner":"ariefshaik7","description":"Next.js app containerized with Docker and deployed via GitHub Actions \u0026 Helm to AKS, EKS, GKE, and Minikube using a GitOps workflow.","archived":false,"fork":false,"pushed_at":"2025-10-08T12:18:05.000Z","size":78,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-10-08T13:15:50.567Z","etag":null,"topics":["aks","argocd","ci-cd","devops","docker","github-actions","helm","kubernetes","nextjs"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ariefshaik7.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-10-08T10:59:50.000Z","updated_at":"2025-10-08T12:51:05.000Z","dependencies_parsed_at":"2025-10-08T13:16:10.529Z","dependency_job_id":"798d93ec-378c-48b1-9292-7cd9fb8d969c","html_url":"https://github.com/ariefshaik7/nextjs-k8s","commit_stats":null,"previous_names":["ariefshaik7/nextjs-k8s"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/ariefshaik7/nextjs-k8s","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ariefshaik7%2Fnextjs-k8s","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ariefshaik7%2Fnextjs-k8s/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ariefshaik7%2Fnextjs-k8s/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ariefshaik7%2Fnextjs-k8s/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ariefshaik7","download_url":"https://codeload.github.com/ariefshaik7/nextjs-k8s/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ariefshaik7%2Fnextjs-k8s/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31567227,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-08T14:31:17.711Z","status":"ssl_error","status_checked_at":"2026-04-08T14:31:17.202Z","response_time":54,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["aks","argocd","ci-cd","devops","docker","github-actions","helm","kubernetes","nextjs"],"created_at":"2025-10-08T17:05:00.921Z","updated_at":"2026-04-08T18:01:56.569Z","avatar_url":"https://github.com/ariefshaik7.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n# 📝 Markdown Live Editor - Next.js Application Deployment with GitHub Actions \u0026 Kubernetes\n\nThis repository demonstrates an end-to-end DevOps pipeline, featuring a static Next.js application containerized, automatically built, published to GHCR, and deployed to Kubernetes using Helm and ArgoCD (GitOps).\n\n## Application Overview\n\nThe core application is a **Markdown Live Editor**, built with Next.js, React, and TypeScript. It features:\n\n  * Real-time, split-screen conversion of GitHub Flavored Markdown (GFM).\n  * A fully static export build (`output: 'export'`) served by a minimal **Nginx** container for maximum efficiency.\n\n## 🚀 Technology Stack\n\n| Category | Technology | Detail |\n| :--- | :--- | :--- |\n| **Application** | Next.js, TypeScript, Tailwind CSS | Modern front-end stack built for static exporting. |\n| **Containerization**| **Docker (Multi-stage Build)** | Uses `node:18-alpine` for building and `nginx:alpine` for the final runtime for a small, secure image. |\n| **CI/CD Automation**| **GitHub Actions** | Automates build, test, and push on every commit to `master`. |\n| **Registry** | **GHCR (GitHub Container Registry)** | Image storage, integrated directly with GitHub credentials. |\n| **GitOps** | **ArgoCD** | Continuous deployment triggered by Git commits. |\n| **Orchestration**| **Kubernetes / Helm** | Deployment uses Helm for templating Deployment (with health checks), Service, and Ingress. |\n\n-----\n\n## 📁 Project Structure\n\n```\nnextjs-k8s/\n├── .github/\n│   └── workflows/\n│       └── ci-cd.yaml          # CI/CD pipeline\n├── argocd/\n│   └── argocd-app.yaml        # ArgoCD Application definition\n├── helm/\n│   └── markdown-chart/        # Helm Chart Root\n│       ├── templates/          # K8s manifests\n│       └── values.yaml          # Configuration values\n└── markdown-editor/          # Next.js Application Source Code\n    ├── Dockerfile            # Multi-stage build for Nginx\n    └── package.json\n```\n\n-----\n\n## 🛠️ Local Development and Run Commands\n\n### Prerequisites\n\n1.  Node.js (18+)\n2.  Docker Desktop (or Docker Engine)\n\n### 1\\. Local Application Run (Dev Server)\n\nTo verify the Next.js app locally before the build process:\n\n```bash\ncd markdown-editor\nnpm install\nnpm run dev\n```\n\nAccess at: `http://localhost:3000`\n\n### 2\\. Local Docker Build \u0026 Run\n\nTo verify the containerized application using Nginx:\n\n```bash\n# 1. Build the image (from the markdown-editor directory)\ncd markdown-editor\ndocker build -t markdown-editor-local .\n\n# 2. Run the container and map host port 8080 to container port 80 (Nginx)\ndocker run --rm -p 8080:80 markdown-editor-local\n```\n\nAccess at: `http://localhost:8080`\n\n-----\n\n## 🚀 Automated CI/CD Workflow Details\n\nThe pipeline is triggered on push to the `main` branch (based on assessment requirements) and performs the following sequence:\n\n1.  **Build \u0026 Push:** Uses the `markdown-editor` directory as the build context and pushes the image to **GHCR**.\n2.  **Tagging:** Tags the image with a unique, immutable ID (`ghcr.io/ariefshaik7/markdown-editor:${{ github.run_id }}`).\n3.  **GitOps Update:** Automatically updates the `tag` value in `helm/markdown-chart/values.yaml` using the unique ID, commits the change (using `GIT_PAT`), and pushes the commit.\n4.  **ArgoCD Sync:** ArgoCD detects this change and initiates deployment.\n\n### Required Secrets\n\n| Secret Name | Purpose | Scope |\n| :--- | :--- | :--- |\n| `GIT_PAT` | **Critical:** GitHub PAT with `repo` scope to enable the workflow to commit the updated `values.yaml` back to the repository (the GitOps trigger). | `repo` |\n\n-----\n\n## ☁️ End-to-End Deployment Guide (K8s)\n\nThis deployment uses the Helm chart and is designed to be fully compatible with major cloud providers (AKS, EKS, GKE) and Minikube.\n\n### Step 1: Kubernetes Cluster Setup\n\n| Environment | Setup Instructions |\n| :--- | :--- |\n| **Minikube** | `minikube start --addons ingress` (Starts cluster and enables Ingress controller). |\n| **Cloud (AKS/EKS/GKE)**| Ensure `kubectl` is authenticated and an **Nginx Ingress Controller** is installed (or the cloud provider's Ingress solution is active). |\n\n---\n\n### Step 2: Configure GHCR Image Pull Secret (Authentication)\n\n---\n\nSince your GHCR image is public, Kubernetes does not need to be authorized to pull it.\n\n### Step 3: Kubernetes \u0026 ArgoCD Setup\n| Orchestration    | Kubernetes (AKS, EKS, GKE, Minikube), StatefulSet |\n\n**a. Install NGINX Ingress Controller:**\nAn Ingress controller is required to expose your services. For most cloud providers:\n\n\n\n```\nkubectl apply -f https://raw.githubusercontent.com/kubernetes/ingress-nginx/controller-v1.10.1/deploy/static/provider/cloud/deploy.yaml\n```\n\n**b. Install ArgoCD:**\n\n\n\n```\nkubectl create namespace argocd\n\nkubectl create namespace argocd\nkubectl apply -n argocd -f https://raw.githubusercontent.com/argoproj/argo-cd/stable/manifests/install.yaml\n\n```\n\n**c. Access ArgoCD:**\n\n\nBy default, the Argo CD API server is not exposed with an external IP. To access the API server, choose one of the following techniques to expose the Argo CD API server:\nService Type Load Balancer¶\n\nChange the argocd-server service type to LoadBalancer:\n```\nkubectl patch svc argocd-server -n argocd -p '{\"spec\": {\"type\": \"LoadBalancer\"}}'\n```\nAfter a short wait, your cloud provider will assign an external IP address to the service. You can retrieve this IP with:\n### ArgoCD Application Overview\nBelow is a screenshot of the ArgoCD UI showing the health and sync status of all application components:\n\n---\n\n![ArgoCD Application Tree](./assets/images/argocd.png)\n\n---\n\n```\nkubectl get svc argocd-server -n argocd -o=jsonpath='{.status.loadBalancer.ingress[0].ip}'\n```\n#### Port Forwarding\n\nKubectl port-forwarding can also be used to connect to the API server without exposing the service.\n\n```\nkubectl port-forward svc/argocd-server -n argocd 8080:443\n\n```\nThe API server can then be accessed using https://localhost:8080\n\n#### Get initial password\n\n```\nkubectl -n argocd get secret argocd-initial-admin-secret -o jsonpath=\"{.data.password}\" | base64 -d; echo\n```\n\nNow, navigate to `https://localhost:8080` and log in with username `admin` and the retrieved password.\n\n\nIf you are using a managed Kubernetes cluster, follow your provider's documentation to install these components.\n\n---\n\n### Step 4: Deploy the Application with ArgoCD\n\nThe `argocd/argocd-application.yaml` file defines your entire application stack for ArgoCD.\n\n**Important:** Before applying, edit `argocd/argocd-application.yaml` and change the `repoURL` to point to **your forked repository's URL**.\n\n    ```bash\n    kubectl apply -f argocd/argocd-app.yaml\n    ```\n\n-----\n\n## Accessing the Deployed Application\n\n### 1\\. Get the External Access Point (Ingress IP)\n\nThe Ingress will expose your application via a LoadBalancer or NodePort, depending on your cluster.\n\n| Environment | Command to Get External IP | Notes |\n| :--- | :--- | :--- |\n| **Minikube** | `minikube ip` | This is the local IP you need. |\n| **Cloud (AKS/EKS/GKE)** | `kubectl get svc -n ingress-nginx` | Look for the **EXTERNAL-IP** of the `ingress-nginx-controller` service (or your specific controller service). |\n\n### 2\\. Configure Local Hostname\n\nThe Ingress expects the hostname `markdown-editor.local`. You must map the IP from step 1 to this hostname in your local `hosts` file (`/etc/hosts` on Linux/macOS, or Windows equivalent):\n\n```\n\u003cYOUR_INGRESS_IP\u003e   markdown-editor.local\n```\n\n### 3\\. Access the Application\n\nOpen your browser and navigate to:\n\n**`http://markdown-editor.local`**\n\n-----\n\n## 🧹 Cleanup\n\nTo delete all resources and stop Minikube:\n\n```bash\n# 1. Delete the ArgoCD Application (deletes all K8s resources)\nkubectl delete -f argocd/argocd-app.yaml\n\n# 2. Delete the created resources (Namespace and Secret)\nkubectl delete secret ghcr-pull-secret -n markdown\nkubectl delete namespace markdown\nkubectl delete namespace argocd\n\n# 3. Stop Minikube (if using local environment)\nminikube stop\n```\n\n---","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fariefshaik7%2Fnextjs-k8s","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fariefshaik7%2Fnextjs-k8s","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fariefshaik7%2Fnextjs-k8s/lists"}