DEV Community: Jay Watson

Let's Build a Full-Stack App Using the MERN Stack! Part 3: React NextJS UI

Jay Watson — Tue, 25 Mar 2025 23:43:55 +0000

Now that we have the database and backend set up, let's create the UI. We're using the MERN stack, where "R" stands for React. We'll be using Next.js, a React framework that extends React's capabilities.

Setting Up Next.js

To create a Next.js application, run the following command:
npx create-next-app@latest
You'll be prompted with several configuration choices:

Ok to proceed? → y
What is your project named? → ui
Would you like to use TypeScript? → Yes
Would you like to use ESLint? → Yes
Would you like to use Tailwind CSS? → Yes
Would you like your code inside a src/ directory? → No
Would you like to use App Router? → Yes
Would you like to use Turbopack for next dev? → No
Would you like to customize the import alias (@/* by default)? → No

Start the Development Server

Navigate into the ui folder and run the app:

cd ui  
npm run dev

Install Axios

Next, install Axios to handle API requests:
npm install axios

Clean Up `page.tsx`

Delete everything inside page.tsx, so it looks like this:

export default function Home() {
  return (
    <div>
      <h1>Things</h1>
    </div>
  );
}

Now, let's set next.js to 'use client', add imports, and create our interfaces. In Next.js 13, components are server components by default. Server components are rendered on the server and sent as static HTML to the client. They are great for performance and SEO but cannot use client-side features such as react hooks.

'use client'

import { useEffect, useState } from 'react';
import axios from 'axios';

interface Thing {
  _id: string;
  title: string;
  description: string;
}

Now, add the following methods to the default Home function.

const [things, setThings] = useState<Thing[]>([]);
const [selectedThing, setSelectedThing] = useState<Thing | null>(null);

// Base API endpoint
const API_BASE_URL = 'http://localhost:5000/things';

useEffect(() => {
  getTasks();
}, []);

// Handles radio button click and populates the form with the selected thing's data
const handleRadioClick = (thing: Thing) => {
  setSelectedThing(thing);
  populateForm(thing);
};

// Populates the form fields with the data of the selected thing
const populateForm = (thing: Thing) => {
  const form = document.querySelector('form');
  if (form) {
    (form.querySelector('input[name="title"]') as HTMLInputElement).value = thing.title;
    (form.querySelector('input[name="description"]') as HTMLInputElement).value = thing.description;
  }
};

// Clears the selected thing and resets the form and radio button selection
const clearSelectedThing = () => {
  setSelectedThing(null);
  clearForm();
  clearRadioSelection();
};

// Clears the form fields
const clearForm = () => {
  const form = document.querySelector('form');
  if (form) {
    (form.querySelector('input[name="title"]') as HTMLInputElement).value = '';
    (form.querySelector('input[name="description"]') as HTMLInputElement).value = '';
  }
};

// Clears the radio button selection
const clearRadioSelection = () => {
  const radios = document.querySelectorAll('input[type="radio"]');
  radios.forEach(radio => (radio as HTMLInputElement).checked = false);
};

// Fetches the list of tasks from the server
const getTasks = async () => {
  try {
    const res = await axios.get(API_BASE_URL);
    setThings(res.data);
  } catch (error) {
    console.error('Error fetching tasks:', error);
  }
};

// Adds or edits a task based on the form data
const addEditTask = async (event: React.FormEvent) => {
  event.preventDefault();
  const form = event.target as HTMLFormElement;
  const formData = new FormData(form);
  const title = formData.get('title') as string;
  const description = formData.get('description') as string;

  try {
    if (selectedThing) {
      const res = await axios.put(`${API_BASE_URL}/${selectedThing._id}`, { title, description });
      setThings(things.map(thing => (thing._id === selectedThing._id ? res.data : thing)));
    } else {
      const res = await axios.post(API_BASE_URL, { title, description });
      setThings([...things, res.data]);
    }
    clearSelectedThing();
  } catch (error) {
    console.error('Error adding/editing task:', error);
  }
};

// Deletes the selected task
const deleteSelectedThing = async () => {
  if (selectedThing) {
    try {
      await axios.delete(`${API_BASE_URL}/${selectedThing._id}`);
      setThings(things.filter(thing => thing._id !== selectedThing._id));
      clearSelectedThing();
    } catch (error) {
      console.error('Error deleting task:', error);
    }
  }
};

Finally, replace all the html being returned with the following code.

<div>
  <h1>Things</h1>

  <h2>All Tasks</h2>
  <ul>
    {things.map((thing) => (
      <li key={thing._id}>
        <input
          type="radio"
          id={thing._id}
          name="thing"
          onClick={() => handleRadioClick(thing)}
        />
        <label htmlFor={thing._id}>
          {thing.title} - {thing.description}
        </label>
      </li>
    ))}
  </ul>

  <h2>{selectedThing === null ? 'Add' : 'Edit'} Task</h2>
  <form onSubmit={addEditTask}>
    Name: <input type="text" name="title" /><br />
    Description: <input type="text" name="description" /><br />
    <button type="submit">{selectedThing === null ? 'Add Task' : 'Edit Task'}</button>
  </form>

  <button onClick={clearSelectedThing}>Clear Selected Thing</button>
  <button onClick={deleteSelectedThing}>Delete Selected Thing</button>
</div>

Bam! There you go! You now have full CRUD applications.

Let's Build a Full-Stack App Using the MERN Stack! Part 2: Node Backend

Jay Watson — Mon, 10 Mar 2025 10:50:50 +0000

Now that we have a database (see Let's Build a Full-Stack App Using the MERN Stack! Part 1: Mongo DB), it's time to build the backend! In this tutorial, we’ll set up a simple backend using Node.js, Express, and MongoDB. By the end, you’ll have a working API that you can interact with.

Step 1: Setting Up the Backend

1. Create the Backend Folder

First, create a new folder for your backend and open it in your code editor:

mkdir backend
cd backend
code .

2. Initialize a Node.js Project

Run the following command to initialize a new Node.js project: npm init -y

3. Install Dependencies

We need to install some essential packages for our backend: npm install express mongoose cors dotenv

express – Handles routing and HTTP requests.
mongoose – Connects and interacts with MongoDB.
cors – Allows cross-origin requests (important for frontend-backend communication).
dotenv – Manages environment variables like database connection strings.

Step 2: Creating the Server

1. Create an index.js File

Inside the backend folder, create a new file named index.js and add the following code:

const express = require("express");
const mongoose = require("mongoose");
const cors = require("cors");
const Thing = require('./models/Thing');
require("dotenv").config();

const app = express();
const PORT = process.env.PORT || 5000;

// Middleware
app.use(cors());
app.use(express.json());

// MongoDB Connection
mongoose
  .connect(process.env.MONGO_URI, {
    useNewUrlParser: true,
    useUnifiedTopology: true,
  })
  .then(() => console.log("MongoDB Connected!"))
  .catch((err) => console.log(err));

// Routes
app.get("/", (req, res) => {
  res.send("API running!");
});

// Create a thing
app.post('/things', async (req, res) => {
  const thing = new Thing(req.body);
  await thing.save();
  res.status(201).send(thing);
});

// Get all things
app.get('/things', async (req, res) => {
  const things = await Thing.find();
  res.send(things);
});

// Update a thing
app.put('/things/:id', async (req, res) => {
  const thing = await Thing.findByIdAndUpdate(req.params.id, req.body, { new: true });
  res.send(thing);
});

// Delete a thing
app.delete('/things/:id', async (req, res) => {
  await Thing.findByIdAndDelete(req.params.id);
  res.status(204).send();
});

app.listen(PORT, () => console.log(`Server running on port ${PORT}`));

2. Set Up Environment Variables

Create a .env file in the backend folder and add your MongoDB connection string: MONGO_URI=mongodb://watson:watson@localhost:27000/

Step 3: Creating a Model

Inside the backend folder, create a new folder called models.

Then, inside the models folder, create a new file called Thing.js and add the following code:

const mongoose = require("mongoose");

const ThingSchema = new mongoose.Schema(
  {
    title: { type: String, required: true },
    description: { type: String, required: false },
  },
  { timestamps: true }
);

module.exports = mongoose.model("Thing", ThingSchema);

This defines a simple Thing model with a title and description.

Step 4: Running the Backend

Now, let’s start the backend server: node index.js
If everything is set up correctly, you should see:

MongoDB Connected!
Server running on port 5000

Step 5: Testing the API

1. Install Postman (if you haven't already)

Download Postman and install it to test your API.

2. Create Some Things

Open Postman.
Set the request type to POST.
Enter http://localhost:5000/things.
Go to the Body tab, select raw, and choose JSON.
Add the following JSON data:

{
  "title": "First Thing",
  "description": "This is a test thing"
}

Click Send to create a new Thing.

3. Get Some Things!

Change the request type to GET.
Enter http://localhost:5000/things.
Click Send to retrieve all Things.

Conclusion

🎉 Whoohoo! You now have a working backend service with Node.js, Express, MongoDB, and Mongoose. This is a great foundation for building a full-stack application. In the next steps, you can extend this API with more endpoints, authentication, and validation.

Let me know if you have any questions! 🚀

Let's Build a Full-Stack App Using the MERN Stack! Part 1: Mongo DB

Jay Watson — Sun, 09 Mar 2025 01:22:07 +0000

Where Are We Storing Stuff?

Before we code our full-stack MERN (MongoDB, Express, React, and Node.js) application, we need a place to store our data. The best way to do this is to set up a MongoDB instance. We’ll run MongoDB inside a Docker container to keep things simple and easily manageable.

Setting Up MongoDB with Docker

We'll use the official MongoDB image from Docker Hub. To pull and run the MongoDB container, execute the following command in your terminal:

`docker run -d --name mongodb -p 27000:27017 \
  -e MONGO_INITDB_ROOT_USERNAME=watson \
  -e MONGO_INITDB_ROOT_PASSWORD=watson mongo`

Let's break this down:

docker run -d runs the container in detached mode (in the background).
--name mongodb names the container "mongodb" for easy reference.
-p 27000:27017 maps port 27000 on your local machine to MongoDB's default port 27017.
-e MONGO_INITDB_ROOT_USERNAME=watson sets the MongoDB root username to "watson".
-e MONGO_INITDB_ROOT_PASSWORD=watson sets the password to "watson".
mongo specifies the image to use (Docker will pull it if it’s not already available locally).
Once this command runs successfully, you’ll have a MongoDB instance up and running in a Docker container!

Connecting to MongoDB

Now that we have our MongoDB instance running, we need a way to interact with it. One of the best tools for this is Studio 3T for MongoDB. It provides an intuitive UI to visualize and manage your database.

To connect Studio 3T to your MongoDB instance:

Download and install Studio 3T (there’s a free tier that works great).
Open the application and create a New Connection.
Create a new connection
Past the connection string into the connection as follows: mongodb://watson:watson@localhost:27000/
Click Test Connection to ensure everything works.

Save and connect!

What's Next?

With our database set up, we’re ready to start building the backend of our application using Express.js. In the next part of this series, we’ll:

Set up a Node.js server

Connect it to our MongoDB database

Create our first API endpoints

Check out Let's Build a Full-Stack App Using the MERN Stack! Part 2: Node Backend!

Standup Serverless Jenkins on Fargate with Terraform - Part 2: ECS Deployment

Jay Watson — Wed, 20 Nov 2024 11:29:48 +0000

This tutorial assumes that you've completed Standup Serverless Jenkins on Fargate with Terraform - Part 1: Networking . If not, you need to do that first.

To start, create variables.tf and add the following variables.

variable "application_name" {
  description = "Name of the application"
  type        = string
}

variable "aws_vpc_id" {
  description = "VPC ID"
  type        = string
}

variable "jenkins_controller_identifier" {
  description = "Name of the jenkins controller"
  type        = string
}

variable "jenkins_agent_port" {
  description = "Port Jenkins agent uses to connect to controller"
  type        = number
}

variable "jenkins_controller_port" {
  description = "Port used to connect to Jenkins controller"
  type        = number
}

Next, create terraform.tfvars to give your variables values. Remember the network we created in lesson one. Assuming you made that, grab the VPC ID and set the value for aws_vpc_id.

application_name = "serverless-jenkins-on-ecs"
jenkins_controller_identifier = "jenkins-controller"
jenkins_agent_port            = 50000
jenkins_controller_port       = 8080
aws_vpc_id = "vpc-ID_Get-This-From-AWS"

Create data.tf, so you can get the necessary information to create your ECS resources. Note that we're grabbing the subnets that we want by filtering on VPC ID and tag names.

data "aws_region" "current" {}

# Current AWS account
data "aws_caller_identity" "this" {}

data "aws_subnets" "public" {
  filter {
    name   = "vpc-id"
    values = [var.aws_vpc_id]
  }
  filter {
    name   = "tag:Name"
    values = ["public-*"]
  }
}

data "aws_subnets" "private" {
  filter {
    name   = "vpc-id"
    values = [var.aws_vpc_id]
  }
  filter {
    name   = "tag:Name"
    values = ["private-*"]
  }
}

Create main.tf to bring in the AWS providers from the HashiCorp registry. Terraform providers are simply plugins that allow you to interact with APIs. In this case, we need to work with AWS APIs.

terraform {
  required_providers {
    aws = {
      source  = "hashicorp/aws"
    }
  }
}

We need storage for our Jenkins. Create efs.tf as we plan to use AWS Elastic File System (EFS). Note the comments above each snippet to understand what the code is doing.

# Elastic File System (EFS) 
resource "aws_efs_file_system" "this" {
  creation_token   = var.application_name
  encrypted        = true
  performance_mode = "generalPurpose"
  throughput_mode  = "bursting"
}

# EFS Mount Targets
resource "aws_efs_mount_target" "this" {
  for_each = toset(data.aws_subnets.private.ids)

  file_system_id  = aws_efs_file_system.this.id
  subnet_id       = each.value
  security_groups = [aws_security_group.efs.id]
}

# EFS security group
resource "aws_security_group" "efs" {
  name   = "efs"
  vpc_id = var.aws_vpc_id
}

resource "aws_security_group_rule" "ecs_ingress" {
  security_group_id = aws_security_group.efs.id
  type                     = "ingress"
  from_port                = 2049
  to_port                  = 2049
  protocol                 = "tcp"
  source_security_group_id = aws_security_group.ecs_service.id
}

# EFS Access Point
resource "aws_efs_access_point" "this" {
  file_system_id = aws_efs_file_system.this.id
  posix_user {
    gid = 1000
    uid = 1000
  }
  root_directory {
    path = "/home"
    creation_info {
      owner_gid   = 1000
      owner_uid   = 1000
      permissions = 755
    }
  }
}

# EFS Policy
data "aws_iam_policy_document" "this" {
  statement {
    actions = [
      "elasticfilesystem:ClientMount",
      "elasticfilesystem:ClientWrite"
    ]
    effect = "Allow"
    resources = [
      aws_efs_file_system.this.arn,
    ]

    principals {
      type        = "Service"
      identifiers = ["ecs-tasks.amazonaws.com"]
    }
    condition {
      test     = "Bool"
      variable = "aws:SecureTransport"
      values   = ["true"]
    }
  }
}

# EFS Policy Attachment
resource "aws_efs_file_system_policy" "this" {
  file_system_id = aws_efs_file_system.this.id
  policy         = data.aws_iam_policy_document.this.json
}

Here we go. This is why you're here and this is our largest Terraform file. Create ecs.tf to create our ECS cluster, service, etc. Like before, each section of code is annotated.

# ECS Cluster
resource "aws_ecs_cluster" "this" {
  name = var.application_name
}

# ECS Task Definition
resource "aws_ecs_task_definition" "this" {
  family = var.application_name
  container_definitions = templatefile("${path.module}/container_definition.tftpl", {
    container_name          = var.jenkins_controller_identifier,
    container_image         = "jenkins/jenkins:2.479.1", # latest version as of Oct. 11, 24
    jenkins_controller_port = var.jenkins_controller_port
    jenkins_agent_port      = var.jenkins_agent_port
    source_volume           = "home",
    awslogs_group           = aws_cloudwatch_log_group.this.name,
    awslogs_region          = data.aws_region.current.name,
    }
  )
  network_mode             = "awsvpc"
  cpu                      = 1024
  memory                   = 2048
  execution_role_arn       = aws_iam_role.execution.arn
  task_role_arn            = aws_iam_role.task.arn
  requires_compatibilities = ["FARGATE"]
  volume {
    name = "home"
    efs_volume_configuration {
      file_system_id     = aws_efs_file_system.this.id
      transit_encryption = "ENABLED"
      authorization_config {
        access_point_id = aws_efs_access_point.this.id
        iam             = "ENABLED"
      }
    }
  }
}

# Roles and Polices 
resource "aws_iam_role" "execution" {
  name = "ecs-execution"
  assume_role_policy = jsonencode({
    Version = "2012-10-17"
    Statement = [
      {
        Action = "sts:AssumeRole"
        Effect = "Allow"
        Principal = {
          Service = "ecs-tasks.amazonaws.com"
        }
      },
    ]
  })
}

resource "aws_iam_role_policy_attachment" "basic_execution_role" {
  role       = aws_iam_role.execution.name
  policy_arn = "arn:aws:iam::aws:policy/service-role/AmazonECSTaskExecutionRolePolicy"
}

resource "aws_iam_role" "task" {
  name = "ecs-task"

  assume_role_policy = jsonencode({
    Version = "2012-10-17"
    Statement = [
      {
        Action = "sts:AssumeRole"
        Effect = "Allow"
        Principal = {
          Service = "ecs-tasks.amazonaws.com"
        }
      },
    ]
  })
}

data "aws_iam_policy_document" "efs_access" {
  statement {
    actions = [
      "elasticfilesystem:ClientMount",
      "elasticfilesystem:ClientWrite"
    ]

    resources = [
      aws_efs_file_system.this.arn
    ]
  }
}

resource "aws_iam_policy" "efs_access" {
  name   = "efs-access"
  policy = data.aws_iam_policy_document.efs_access.json
}

resource "aws_iam_role_policy_attachment" "efs_access" {
  role       = aws_iam_role.task.name
  policy_arn = aws_iam_policy.efs_access.arn
}

data "aws_iam_policy_document" "ecs_access" {
  statement {
    actions = [
      "ecs:RegisterTaskDefinition",
      "ecs:DeregisterTaskDefinition",
      "ecs:ListClusters",
      "ecs:ListTaskDefinitions",
      "ecs:DescribeContainerInstances",
      "ecs:DescribeTaskDefinition",
      "ecs:DescribeClusters",
      "ecs:ListTagsForResource"
    ]
    resources = [
      "*"
    ]
  }

  statement {
    actions = [
      "ecs:ListContainerInstances"
    ]
    resources = [
      aws_ecs_cluster.this.arn
    ]
  }

  statement {
    actions = [
      "ecs:RunTask",
      "ecs:StopTask",
      "ecs:DescribeTasks"
    ]
    resources = [
      "*"
    ]
    condition {
      test     = "ArnEquals"
      variable = "ecs:cluster"

      values = [
        aws_ecs_cluster.this.arn
      ]
    }
  }
}

resource "aws_iam_policy" "ecs_access" {
  name   = "ecs-access"
  policy = data.aws_iam_policy_document.ecs_access.json
}

resource "aws_iam_role_policy_attachment" "ecs_access" {
  role       = aws_iam_role.task.name
  policy_arn = aws_iam_policy.ecs_access.arn
}

data "aws_iam_policy_document" "iam_access" {
  statement {
    actions = [
      "iam:GetRole",
      "iam:PassRole"
    ]

    resources = [
      aws_iam_role.execution.arn,
      aws_iam_role.agent.arn
    ]
  }
}

resource "aws_iam_policy" "iam_access" {
  name   = "iam-access"
  policy = data.aws_iam_policy_document.iam_access.json
}

resource "aws_iam_role_policy_attachment" "iam_access" {
  role       = aws_iam_role.task.name
  policy_arn = aws_iam_policy.iam_access.arn
}

resource "aws_iam_role" "agent" {
  name = "ecs-agent"

  assume_role_policy = jsonencode({
    Version = "2012-10-17"
    Statement = [
      {
        Action = "sts:AssumeRole"
        Effect = "Allow"
        Principal = {
          Service = "ecs-tasks.amazonaws.com"
        }
      },
    ]
  })
}

resource "aws_iam_role_policy_attachment" "admin_access" {
  role       = aws_iam_role.agent.name
  policy_arn = "arn:aws:iam::aws:policy/AdministratorAccess"
}


# ECS Service 
resource "aws_ecs_service" "this" {
  name            = var.application_name
  launch_type     = "FARGATE"
  cluster         = aws_ecs_cluster.this.arn
  task_definition = aws_ecs_task_definition.this.arn
  desired_count   = 1

  network_configuration {
    subnets          = data.aws_subnets.private.ids
    security_groups  = [aws_security_group.ecs_service.id]
    assign_public_ip = false
  }

  load_balancer {
    target_group_arn = aws_lb_target_group.this.arn
    container_name   = var.jenkins_controller_identifier
    container_port   = var.jenkins_controller_port
  }

  service_registries {
    registry_arn = aws_service_discovery_service.this.arn
    port         = var.jenkins_agent_port
  }
}

# Security Group and Rules
resource "aws_security_group" "ecs_service" {
  name   = "ecs-jenkins-controller"
  vpc_id = var.aws_vpc_id
}

resource "aws_security_group_rule" "alb_ingress" {
  security_group_id = aws_security_group.ecs_service.id

  type                     = "ingress"
  from_port                = var.jenkins_controller_port
  to_port                  = var.jenkins_controller_port
  protocol                 = "tcp"
  source_security_group_id = aws_security_group.alb.id
}

resource "aws_security_group_rule" "service_all_egress" {
  security_group_id = aws_security_group.ecs_service.id

  type        = "egress"
  from_port   = 0
  to_port     = 65535
  protocol    = "tcp"
  cidr_blocks = ["0.0.0.0/0"]
}

resource "aws_security_group_rule" "jenkins_agent_ingress" {
  security_group_id = aws_security_group.ecs_service.id

  type                     = "ingress"
  from_port                = var.jenkins_agent_port
  to_port                  = var.jenkins_agent_port
  protocol                 = "tcp"
  source_security_group_id = aws_security_group.ecs_jenkins_agent.id
}

resource "aws_security_group" "ecs_jenkins_agent" {
  name   = "ecs-jenkins-agents"
  vpc_id = var.aws_vpc_id
}

resource "aws_security_group_rule" "agent_all_egress" {
  security_group_id = aws_security_group.ecs_jenkins_agent.id
  type              = "egress"
  from_port         = 0
  to_port           = 65535
  protocol          = "tcp"
  cidr_blocks       = ["0.0.0.0/0"]
}

# CloudWatch Log Group
resource "aws_cloudwatch_log_group" "this" {
  name              = var.application_name
  retention_in_days = 30
}

Create service-discovery.tf next. What if we want to add a Jenkins agent? Service Discovery will provide a good way to manage everything. When we launch a new task, it will register itself with discovery. When other resources, want to reference that task, they can query Service Discovery.

# Description: This file contains the terraform code to create a private DNS namespace and a service discovery service.

# Service Discovery namespace
resource "aws_service_discovery_private_dns_namespace" "this" {
  name = var.application_name
  vpc  = var.aws_vpc_id
}

# Service Discovery service
resource "aws_service_discovery_service" "this" {
  name = var.jenkins_controller_identifier

  dns_config {
    namespace_id   = aws_service_discovery_private_dns_namespace.this.id
    routing_policy = "MULTIVALUE"

    dns_records {
      ttl  = 60
      type = "A"
    }
    dns_records {
      ttl  = 60
      type = "SRV"
    }
  }
}

But how are we going to access our cluster? Aren't our tasks in private subnets? Good question and yes, they are. We need an Application Load Balancer (ALB). Create alb.tf for ALB configuration.

# ALB
resource "aws_lb" "this" {
  name = var.application_name

  internal           = false
  load_balancer_type = "application"
  security_groups    = [aws_security_group.alb.id]
  subnets            = data.aws_subnets.public.ids
}

# ALB Security Group
resource "aws_security_group" "alb" {
  name   = "alb"
  vpc_id = var.aws_vpc_id
}

# Open HTTP port 80 to the world
resource "aws_security_group_rule" "http_ingress" {
  security_group_id = aws_security_group.alb.id

  type        = "ingress"
  from_port   = 80
  to_port     = 80
  protocol    = "tcp"
  cidr_blocks = ["0.0.0.0/0"]
}

# Open HTTP port 8080 to allow ALB to communicate with ECS service
resource "aws_security_group_rule" "ecs_egress" {
  security_group_id        = aws_security_group.alb.id
  type                     = "egress"
  from_port                = 8080
  to_port                  = 8080
  protocol                 = "tcp"
  source_security_group_id = aws_security_group.ecs_service.id
}


# ALB Listener
resource "aws_lb_listener" "this" {
  load_balancer_arn = aws_lb.this.arn
  port              = "80"
  protocol          = "HTTP"

  default_action {
    type             = "forward"
    target_group_arn = aws_lb_target_group.this.arn
  }
}

# ALB Target Group
resource "aws_lb_target_group" "this" {
  name        = var.application_name
  port        = 8080
  protocol    = "HTTP"
  target_type = "ip"
  vpc_id      = var.aws_vpc_id

  health_check {
    path = "/login"
  }
}

Finally, create outputs.tf and grab the CloudWatch Log Group and Jenkins URL (ALB DNS).

output "ecs_cloudwatch_log_group_name" {
  description = "Name of the ECS CloudWatch Log group"
  value       = aws_cloudwatch_log_group.this.name
}

output "jenkins_url" {
  description = "URL of the Jenkins server"
  value       = "http://${aws_lb.this.dns_name}"
}

When you see this, you're done! Grab the jenkins_url output value and paste it into a browser.

Ah...you need a password. Let's go get that.

Navigate to Amazon Elastic Container Service -> Clusters -> serverless-jenkins-on-ecs -> Tasks -> your-task -> Logs and get the password from the logs.

Now, you're in! At this point, go ahead and install your plugins, create an admin user, etc. You're set. Jenkins is ready to use. Before we conclude, let's look at what we've done.

EFS

ECS Cluster

ECS Service

ECS Tasks

Service Discovery

Fin.

GitHub Repo: https://github.com/jWatsonDev/jenkins-ecs-fargate

Why Are People Using Laravel?

Jay Watson — Mon, 18 Nov 2024 11:49:25 +0000

PHP is dead. Or is it?

For whatever reason, I've heard many people talk about Laravel here lately, the most popular PHP framework. I figured I'd play around with it and see the buzz. I enjoyed it!

First, we need a database. We'll use docker to run a MySQL database.

# Create a docker network
docker network create localnetwork
# Run a MySQL database
docker run -d --name mysql-container  --network=localnetwork -e MYSQL_ROOT_PASSWORD=password -p 3306:3306 mysql:latest
# Run phpMyAdmin
docker run -d --name phpmyadmin-container --network=localnetwork -e PMA_HOST=mysql-container -e PMA_PORT=3306 -p 8080:80 phpmyadmin/phpmyadmin:latest

Next, install Composer. If you have a Mac, use homebrew.

install composer

Use Composer to generate a fresh laravel project.

composer create-project --prefer-dist laravel/laravel laravel-api

Update your database credentials in the .env file.

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=crud_app
DB_USERNAME=root
DB_PASSWORD=password

Serve it up.

php artisan serve

Create routes/api.php.

<?php
use App\Http\Controllers\ThingController;

Route::get('/things', [ThingController::class, 'index']);
Route::get('/things/{id}', [ThingController::class, 'show']);
Route::post('/things', [ThingController::class, 'store']);
Route::put('/things/{id}', [ThingController::class, 'update']);
Route::delete('/things/{id}', [ThingController::class, 'destroy']);

Update app.php so that your routes are defined.

Next, have Laravel generate your controller: php artisan make:controller ThingController

Generate your model: php artisan make:model Thing

Update your model with protected $guarded = []; This tells the database to accept everything except what you specify in the array.

Define your CRUD operations in your ThingController.

<?php
namespace App\Http\Controllers;

use App\Models\Thing;
use Illuminate\Http\Request;

class ThingController extends Controller
{
    public function index()
    {
        $things = Thing::all();
        return response()->json($things);
    }

    public function show($id)
    {
        $thing = Thing::find($id);
        return response()->json($thing);
    }

    public function store(Request $request)
    {
        $thing = Thing::create($request->all());
        return response()->json($thing, 201);
    }

    public function update(Request $request, $id)
    {
        $thing = Thing::find($id);
        $thing->update($request->all());
        return response()->json($thing, 200);
    }

    public function destroy($id)
    {
        Thing::destroy($id);
        return response()->json(null, 204);
    }
}

Run php artisan migrate to setup the database. Say 'Yes'.

Next login to phpMyAdmin and create the things table.

Note that we set the id to auto-increment.

Now use postman to create some 'things'.

Now, let's get the 'things'.

GitHub repo: https://github.com/jWatsonDev/sample-laravel-crud

Fin.

Standup Serverless Jenkins on Fargate with Terraform - Part 1: Networking

Jay Watson — Mon, 04 Nov 2024 11:52:59 +0000

We need to set up our network before we get into ECS and Jenkins. We'll stamp out a VPC, public subnets, private subnets, an Internet Gateway, NAT Gateways, and route tables. Let's get started!

First, create variables.tf. This file allows us to define the variables we need—a VPC CIDR block, private subnets, and public subnets.

variable "vpc_cidr_block" {
  description = "CIDR of vpc"
  type        = string
}

variable "public_subnets" {
  description = "Map of public subnets that should be created"
  type = map(object({
    cidr_block        = string
    availability_zone = string
  }))
}

variable "private_subnets" {
  description = "Map of private subnets that should be created"
  type = map(object({
    cidr_block        = string
    availability_zone = string
  }))
}

variable "application_name" {
  description = "Name of the application"
  type        = string
}

Next, we'll provide the variable definitions in terraform.tfvars.

vpc_cidr_block = "10.0.0.0/24"

public_subnets = {
  subnet_1 = {
    cidr_block        = "10.0.0.0/26"
    availability_zone = "us-east-1a"
  }
  subnet_2 = {
    cidr_block        = "10.0.0.64/26"
    availability_zone = "us-east-1b"
  }
}

private_subnets = {
  subnet_1 = {
    cidr_block        = "10.0.0.128/26"
    availability_zone = "us-east-1a"
  }
  subnet_2 = {
    cidr_block        = "10.0.0.192/26"
    availability_zone = "us-east-1b"
  }
}

application_name = "serverless-jenkins-on-ecs"

Now, create vpc.tf and create the VPC first. An AWS VPC (Virtual Private Cloud) is a virtual network logically isolated from other virtual networks in the AWS Cloud, providing you with control over IP addresses, subnets, route tables, and network gateways.

# VPC
resource "aws_vpc" "this" {
  cidr_block           = var.vpc_cidr_block
  enable_dns_hostnames = true
  tags = {
    Name = var.application_name
  }
}

Create the public subnets. What makes these subnets public is that they will have a route to an Internet Gateway (IGW), which allows resources within the subnet to communicate directly with the Internet.

# Public Subnets
resource "aws_subnet" "public" {
  for_each = var.public_subnets
  vpc_id = aws_vpc.this.id
  cidr_block              = each.value.cidr_block
  availability_zone       = each.value.availability_zone
  map_public_ip_on_launch = true
  tags = {
    Name = format("public-%s-%s", var.application_name, each.value.availability_zone)
  }
}

Create the IGW and associate it with the VPC. We'll reference it later in our route table that we'll connect to our public subnets.

# IGW 
resource "aws_internet_gateway" "this" {
  vpc_id = aws_vpc.this.id
}

Create a route table for your public subnet and add a route to funnel traffic through the IGW. After which, create the route table association to wire up the IGW with the public subnets.

# Public Route Table
resource "aws_route_table" "public" {
  vpc_id = aws_vpc.this.id
  tags = {
    Name = "public"
  }
}
# Add IGW Route 
resource "aws_route" "public" {
  route_table_id         = aws_route_table.public.id
  destination_cidr_block = "0.0.0.0/0"
  gateway_id             = aws_internet_gateway.this.id
}
# Associate Route Table with Subnet 
resource "aws_route_table_association" "public" {
  for_each = aws_subnet.public

  subnet_id      = each.value.id
  route_table_id = aws_route_table.public.id
}

Next, create the private subnets. As the name implies, these subnets are inaccessible from the outside world.

# Private Subnets
resource "aws_subnet" "private" {
  for_each = var.private_subnets

  vpc_id = aws_vpc.this.id

  cidr_block        = each.value.cidr_block
  availability_zone = each.value.availability_zone

  tags = {
    Name = format("private-%s-%s", var.application_name, each.value.availability_zone)
  }
}

Now, let's create an Elastic IP (EIP) and a NAT Gateway. We need the EIP, as AWS requires one as part of the NAT Gateway creation. The NAT Gateway is necessary as that's how the private subnets can communicate with the Internet (egress only). Imagine that you have RHEL EC2s that need to receive yum updates. You'll need a NAT Gateway.

# EIP for NAT Gateway
resource "aws_eip" "this" {
  for_each = aws_subnet.private
}

# NAT Gateway 
resource "aws_nat_gateway" "this" {
  for_each = aws_subnet.private

  subnet_id     = aws_subnet.public[each.key].id
  allocation_id = aws_eip.this[each.key].id

  tags = {
    Name = format("private-%s-%s", var.application_name, each.value.availability_zone)
  }
}

Next, we'll create the route table, the route to associate the NAT Gateway to the private subnets, and the route table association.

# Private Route Table 
resource "aws_route_table" "private" {
  for_each = aws_subnet.private

  vpc_id = aws_vpc.this.id

  tags = {
    Name = format("private-%s-%s", var.application_name, each.value.availability_zone)
  }
}
# Add Route - Private Subnets to NAT Gateway
resource "aws_route" "private" {
  for_each = aws_subnet.private

  route_table_id         = aws_route_table.private[each.key].id
  destination_cidr_block = "0.0.0.0/0"
  nat_gateway_id         = aws_nat_gateway.this[each.key].id
}
# Associate Private RT with Private Subnets
resource "aws_route_table_association" "private" {
  for_each = aws_subnet.private

  subnet_id      = each.value.id
  route_table_id = aws_route_table.private[each.key].id
}

You are ready. Run the following commands.

# Initialize Terraform
terraform init
# Check and see what will be created
terraform plan
# Let's do this!
terraform apply

Now, navigate to the AWS console and search for VPC.

Scroll down to the VPC resource map.

Click on subnets next.

Also, check out your Route Tables, Internet Gateways, NAT Gateways, and Elastic IPs.

Fin 👏

If you need it, here's the GitHub repo.

Serverless Jenkins: ECS on Fargate - Simple Setup

Jay Watson — Wed, 16 Oct 2024 09:59:10 +0000

Are you ready to deploy serverless Jenkins to ECS on Fargate?

Before we get started, let's define some terms.

Serverless - You aren't managing the infrastructure. AWS is.
ECS - AWS container orchestration platform allowing you to deploy and manage containerized applications.
Fargate - Serverless compute engine (see above). You can run ECS on EC2s (AWS VMs) or Fargate. Choose serverless.
ECS Cluster - A logical group of tasks/services. You'll create this first when hosting an app in ECS.
ECS Task Definition - A blueprint for your application telling ECS how to run your container.
ECS Task - The instantiation of a task definition, meaning that you're running the container now.
ECS Service - Runs/maintains a specified number of task definitions simultaneously.
Container - A unit of software that packages needed code/dependencies for an app to run.
Image - Standalone file used to create the container.
Docker - The most popular container service provider.

Now, we're ready to get started. Let's do this thing!

First, create the ECS cluster. Use default settings. Don't overcomplicate things. Make sure AWS Fargate (serverless) is selected.

Second, let's find our container image and test it locally (you'll need docker installed!). Go to dockerhub.com and search for Jenkins. Then, click on Jenkins/Jenkins and copy the command.

Use docker pull jenkins/jenkins to pull the image to your local machine.

To test it locally, create a directory for the Jenkins volume and then run the image.

mkdir jenkins_volume

docker run -p 8080:8080 -p 50000:50000 -v jenkins_volume:/var/jenkins_home jenkins/Jenkins

Grab the password from the terminal, open your browser, and visit localhost:8080. Put in the password and sweeeeeet! It works...hopefully. Now, go ahead and close it down (ctrl + c). That was to test things out.

Third, we need to create a task definition. Specify jenkins/jenkins as the image URL. ECS will know to pull it from DockerHub. Use 8080 for the container port.

Click Create and you're gtg.

Fourth, go to your cluster and create a service. Use mostly default settings.

Do specify that you want an Application Load Balancer (ALB). We'll just listen on port 80 for now. Of course, that should be 443.

Click Create. Now, we wait. You can follow the progress by clicking View in CloudFormation, but who's that patient?

Get the password from the ECS logs, then go to EC2 -> Load Balancers -> your jenkins fargate load balancer to grab the URL. You'll put the password in just like you did when you ran docker locally.

Finished...whoops...not yet. We need to edit the ALB Target Group health check.

From the ALB, click on your ECS Fargate Target Group.

Edit your Target Group health check configuration to use port 8080 and path /login?from=%2F

Now, you're finished!! 🎉🎉🎉