adding in shadcn

.iac/scripts/deploy.sh

@@ -5,7 +5,6 @@ set -e
 
 # LocalStack endpoint
 ENDPOINT_URL="http://localhost:4566"
-pwd
 pnpm install
 
 # Create S3 bucket for frontend
@@ -24,21 +23,6 @@ pnpm --filter react build
 echo "Deploying frontend to S3..."
 awslocal s3 sync apps/react/dist/ s3://localstart-react
 
-# Create IAM role for Lambda
-echo "Creating IAM role for Lambda..."
-awslocal iam create-role --role-name lambda-role --assume-role-policy-document '{
-  "Version": "2012-10-17",
-  "Statement": [
-    {
-      "Effect": "Allow",
-      "Principal": {
-        "Service": "lambda.amazonaws.com"
-      },
-      "Action": "sts:AssumeRole"
-    }
-  ]
-}' > /dev/null 2>&1
-
 # # Create Lambda function
 echo "Creating Lambda function..."
 pnpm --filter server build
@@ -75,8 +59,17 @@ awslocal apigateway put-integration \
 # Deploy API
 awslocal apigateway create-deployment --rest-api-id $API_ID --stage-name local
 
-
-
+# cd ./apps/nextjs
+# docker build -t nextjs-docker .
+# REPO_URL=$(awslocal ecr create-repository \
+#   --repository-name nextjs-docker \
+#   --query 'repository.repositoryUri' \
+#   --output text)
+# sleep 3
+# echo $REPO_URL
+# docker tag nextjs-docker $REPO_URL
+# docker push $REPO_URL
+# cd ./../../
 # # Print out the URLs
 echo "Deployment complete!"
 echo "Frontend URL: http://localstart-react.s3-website.$REGION.localhost.localstack.cloud:4566"

.iac/scripts/push-to-ecr.sh

@@ -0,0 +1,94 @@
+#!/bin/bash
+
+# Exit on error
+set -e
+
+IMAGE_NAME="nextjs-docker"
+REGION="us-west-2"
+ACCOUNT_ID="000000000000"
+CLUSTER_NAME="nextjs-cluster"
+SERVICE_NAME="nextjs-service"
+TASK_FAMILY="nextjs-task"
+
+echo "Creating ECR repository..."
+REPO_URI=$(awslocal ecr create-repository \
+    --repository-name $IMAGE_NAME \
+    --region $REGION \
+    --query 'repository.repositoryUri' \
+    --output text)
+
+echo "Building Docker image..."
+docker build -t $IMAGE_NAME ./../../apps/nextjs
+
+echo "Tagging image..."
+docker tag $IMAGE_NAME:latest $REPO_URI:latest
+
+echo "Pushing image to ECR..."
+docker push $REPO_URI:latest
+
+# Create ECS Cluster
+echo "Creating ECS cluster..."
+awslocal ecs create-cluster \
+    --cluster-name $CLUSTER_NAME \
+    --region $REGION
+
+# Register Task Definition
+echo "Registering task definition..."
+awslocal ecs register-task-definition \
+    --family $TASK_FAMILY \
+    --container-definitions "[
+        {
+            \"name\": \"$IMAGE_NAME\",
+            \"image\": \"$REPO_URI:latest\",
+            \"cpu\": 256,
+            \"memory\": 512,
+            \"portMappings\": [
+                {
+                    \"containerPort\": 3000,
+                    \"hostPort\": 3000,
+                    \"protocol\": \"tcp\"
+                }
+            ],
+            \"essential\": true
+        }
+    ]" \
+    --requires-compatibilities "FARGATE" \
+    --network-mode "awsvpc" \
+    --cpu "256" \
+    --memory "512"
+
+# Create VPC
+echo "Creating VPC..."
+VPC_ID=$(awslocal ec2 create-vpc \
+    --cidr-block 10.0.0.0/16 \
+    --query 'Vpc.VpcId' \
+    --output text)
+
+# Create Subnet
+echo "Creating Subnet..."
+SUBNET_ID=$(awslocal ec2 create-subnet \
+    --vpc-id $VPC_ID \
+    --cidr-block 10.0.1.0/24 \
+    --query 'Subnet.SubnetId' \
+    --output text)
+
+# Create Security Group
+echo "Creating Security Group..."
+SG_ID=$(awslocal ec2 create-security-group \
+    --group-name ecs-sg \
+    --description "ECS Security Group" \
+    --vpc-id $VPC_ID \
+    --query 'GroupId' \
+    --output text)
+
+
+# Create ECS Service
+echo "Creating ECS service..."
+awslocal ecs create-service \
+    --cluster $CLUSTER_NAME \
+    --service-name $SERVICE_NAME \
+    --task-definition $TASK_FAMILY \
+    --desired-count 1 \
+    --launch-type FARGATE \
+    --network-configuration "awsvpcConfiguration={subnets=[$SUBNET_ID],securityGroups=[$SG_ID]}" \
+    --region $REGION

.iac/terraform/main.tf

@@ -128,6 +128,104 @@ resource "aws_lambda_permission" "apigw_lambda" {
   source_arn = "${aws_api_gateway_rest_api.api.execution_arn}/*/*"
 }
 
+
+# ECR Repository
+resource "aws_ecr_repository" "nextjs" {
+  name = "nextjs-docker"
+}
+
+# VPC Resources
+resource "aws_vpc" "main" {
+  cidr_block = "10.0.0.0/16"
+
+  tags = {
+    Name = "nextjs-vpc"
+  }
+}
+
+resource "aws_subnet" "main" {
+  vpc_id     = aws_vpc.main.id
+  cidr_block = "10.0.1.0/24"
+
+  tags = {
+    Name = "nextjs-subnet"
+  }
+}
+
+resource "aws_security_group" "ecs" {
+  name        = "ecs-sg"
+  description = "ECS Security Group"
+  vpc_id      = aws_vpc.main.id
+
+  ingress {
+    from_port   = 3000
+    to_port     = 3000
+    protocol    = "tcp"
+    cidr_blocks = ["0.0.0.0/0"]
+  }
+
+  egress {
+    from_port   = 0
+    to_port     = 0
+    protocol    = "-1"
+    cidr_blocks = ["0.0.0.0/0"]
+  }
+}
+
+# ECS Cluster
+resource "aws_ecs_cluster" "main" {
+  name = "nextjs-cluster"
+}
+
+# ECS Task Definition
+resource "aws_ecs_task_definition" "nextjs" {
+  family                   = "nextjs-task"
+  requires_compatibilities = ["FARGATE"]
+  network_mode             = "awsvpc"
+  cpu                      = 256
+  memory                   = 512
+
+  container_definitions = jsonencode([
+    {
+      name      = "nextjs-docker"
+      image     = "${aws_ecr_repository.nextjs.repository_url}:latest"
+      cpu       = 256
+      memory    = 512
+      essential = true
+      portMappings = [
+        {
+          containerPort = 3000
+          hostPort      = 3000
+          protocol      = "tcp"
+        }
+      ]
+    }
+  ])
+}
+
+# ECS Service
+resource "aws_ecs_service" "nextjs" {
+  name            = "nextjs-service"
+  cluster         = aws_ecs_cluster.main.id
+  task_definition = aws_ecs_task_definition.nextjs.arn
+  desired_count   = 1
+  launch_type     = "FARGATE"
+
+  network_configuration {
+    subnets         = [aws_subnet.main.id]
+    security_groups = [aws_security_group.ecs.id]
+  }
+}
+
+# outputs.tf
+output "ecr_repository_url" {
+  value = aws_ecr_repository.nextjs.repository_url
+}
+
+output "ecs_cluster_name" {
+  value = aws_ecs_cluster.main.name
+}
+
 # Output
 output "frontend_url" {
   value = "http://${aws_s3_bucket.frontend.id}.s3-website.${var.region}.localhost.localstack.cloud:4566"

Makefile

@@ -5,12 +5,12 @@ LOCALSTACK_VERSION := latest
 NITRO_VERSION := latest
 
 # Targets
-.PHONY: start start-localstack start-app stop stop-localstack stop-app
+.PHONY: start start-localstack start-app stop stop-localstack stop-app push-nextjs-image
 
 start: start-localstack start-app
 stop: stop-localstack stop-app
 deploy-preview: deploy-preview-terraform
-deploy-preview-terraform: build-app localstack-deploy-terraform
+deploy-preview-terraform: build-app localstack-deploy-terraform push-nextjs-image
 deploy-preview-cdk: build-app localstack-deploy-cdk
 
 localstack-start:
@@ -28,6 +28,21 @@ deploy-aws:
 	@terraform -chdir=./.iac/terraform init
 	@terraform -chdir=./.iac/terraform apply --auto-approve
 
+.PHONY: push-image
+
+push-nextjs-image:
+	$(eval REPO_URL := $(shell tflocal -chdir=./.iac/terraform output -raw ecr_repository_url))
+	@if [ -z "$(REPO_URL)" ]; then \
+		echo "Error: Could not get ECR repository URL from Terraform output"; \
+		exit 1; \
+	fi
+	@echo "Building Docker image..."
+	@docker build -t nextjs-docker ./apps/nextjs
+	@echo "Tagging image..."
+	@docker tag nextjs-docker:latest $(REPO_URL):latest
+	@echo "Pushing image to ECR..."
+	@docker push $(REPO_URL):latest
+
 localstack-deploy-terraform:
 	@echo "Locally deploying apps with Terraform..."
 	@localstack wait

apps/nextjs/.dockerignore

@@ -0,0 +1,7 @@
+Dockerfile
+.dockerignore
+node_modules
+npm-debug.log
+README.md
+.next
+.git

apps/nextjs/Dockerfile

@@ -0,0 +1,57 @@
+FROM node:18-alpine AS base
+
+# Install dependencies only when needed
+FROM base AS deps
+# Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine to understand why libc6-compat might be needed.
+RUN apk add --no-cache libc6-compat
+WORKDIR /app
+
+# Install dependencies based on the preferred package manager
+COPY package.json ./
+RUN corepack enable pnpm && pnpm i
+
+# Rebuild the source code only when needed
+FROM base AS builder
+WORKDIR /app
+COPY --from=deps /app/node_modules ./node_modules
+COPY . .
+
+# Next.js collects completely anonymous telemetry data about general usage.
+# Learn more here: https://nextjs.org/telemetry
+# Uncomment the following line in case you want to disable telemetry during the build.
+# ENV NEXT_TELEMETRY_DISABLED=1
+
+RUN corepack enable pnpm && pnpm run build
+
+# Production image, copy all the files and run next
+FROM base AS runner
+WORKDIR /app
+
+ENV NODE_ENV=production
+# Uncomment the following line in case you want to disable telemetry during runtime.
+# ENV NEXT_TELEMETRY_DISABLED=1
+
+RUN addgroup --system --gid 1001 nodejs
+RUN adduser --system --uid 1001 nextjs
+
+COPY --from=builder /app/public ./public
+
+# Set the correct permission for prerender cache
+RUN mkdir .next
+RUN chown nextjs:nodejs .next
+
+# Automatically leverage output traces to reduce image size
+# https://nextjs.org/docs/advanced-features/output-file-tracing
+COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
+COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
+
+USER nextjs
+
+EXPOSE 3000
+
+ENV PORT=3000
+
+# server.js is created by next build from the standalone output
+# https://nextjs.org/docs/pages/api-reference/next-config-js/output
+ENV HOSTNAME="0.0.0.0"
+CMD ["node", "server.js"]

apps/nextjs/components.json

@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.ts",
+    "css": "src/styles/tailwind.css",
+    "baseColor": "zinc",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  }
+}

apps/nextjs/next.config.mjs

@@ -1,4 +1,6 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {}
+const nextConfig = {
+  output: 'standalone',
+}
 
 export default nextConfig