Kubernetes, NestJS, and Angular: Building Scalable Web Applications with MicroK8s

Introduction

The modern web development landscape demands scalability, reliability, and rapid deployment. This trifecta is increasingly met by containerized applications and orchestration platforms like Kubernetes. Kubernetes, an open-source container orchestration platform, provides the tools to manage and automate the deployment, scaling, and operations of containerized applications.

This article dives into the world of Kubernetes, NestJS, and Angular, showcasing how to build and deploy robust web applications. We'll use MicroK8s, a lightweight and easy-to-install Kubernetes distribution, to set up our development environment. This setup allows us to leverage the power of Kubernetes without the complexities of managing a full-blown Kubernetes cluster.

Understanding the Key Players

Kubernetes:

At its core, Kubernetes is a powerful platform that automates the deployment, scaling, and management of containerized applications. It offers:

• Container Orchestration: Automatically handles deployment, scaling, and lifecycle management of containerized applications.
• Service Discovery and Load Balancing: Enables services to communicate with each other within the cluster and provides load balancing across multiple instances of an application.
• Self-Healing: Monitors application health and automatically restarts or replaces unhealthy containers.
• Automated Rollouts and Rollbacks: Allows for seamless updates and rollbacks, ensuring minimal downtime.

MicroK8s:

MicroK8s is a lightweight and easy-to-install Kubernetes distribution designed for single-node deployments. It's perfect for:

• Development: Provides a local Kubernetes environment for testing and development purposes.
• Personal Projects: Offers a quick and easy way to get started with Kubernetes for small projects.
• Educational Purposes: Serves as a great tool for learning Kubernetes concepts and practices.

NestJS:

NestJS is a progressive Node.js framework built on top of TypeScript. It offers a powerful, scalable, and testable architecture for building efficient back-end applications.

• TypeScript: Provides type safety and improved code organization.
• Modularity: Encourages well-structured code with clear separation of concerns.
• Dependency Injection: Simplifies code organization and promotes maintainability.

Angular:

Angular is a powerful framework for building client-side web applications. It offers:

• Component-Based Architecture: Structures applications into reusable components, promoting code reusability and maintainability.
• Data Binding: Simplifies data management and updates between components and the view.
• Routing: Enables navigation within the application with clear and organized URLs.

Setting Up Your Development Environment with MicroK8s

1. Install MicroK8s:

• Ubuntu/Debian:
  

  sudo snap install microk8s --classic
  

• macOS (using Homebrew):
  

  brew install microk8s
  

2. Start MicroK8s:

```bash
sudo microk8s start
```

3. Verify Installation:

```bash
kubectl version
```

This will show you the Kubernetes client version and server version.

4. Configure kubectl for local access:

```bash
export KUBECONFIG=/etc/rancher/k3s/k3s.yaml
```

5. Test your Kubernetes installation:

```bash
kubectl get nodes
```

This should list the nodes (in this case, your local machine) in your Kubernetes cluster.

Building a NestJS Application

1. Create a NestJS Project:

```bash
nest new nestjs-app
```

2. Develop your API endpoints:

NestJS provides a clear and well-structured framework for building REST APIs. Let's create a simple API endpoint to return "Hello World":

src/app.controller.ts:

import { Controller, Get } from '@nestjs/common';

@Controller()
export class AppController {
  @Get()
  getHello(): string {
    return 'Hello World!';
  }
}

3. Start your NestJS server:

```bash
npm run start:dev
```

Deploying the NestJS Application to Kubernetes

1. Create a Dockerfile:

```dockerfile
FROM node:16-alpine

WORKDIR /app

COPY package.json ./
COPY yarn.lock ./

RUN yarn install

COPY . .

EXPOSE 3000

CMD ["yarn", "start:dev"]
```

2. Build the Docker image:

```bash
docker build -t nestjs-app .
```

3. Create a Kubernetes deployment file (deployment.yaml):

apiVersion: apps/v1
kind: Deployment
metadata:
  name: nestjs-app
spec:
  replicas: 1
  selector:
    matchLabels:
      app: nestjs-app
  template:
    metadata:
      labels:
        app: nestjs-app
    spec:
      containers:
      - name: nestjs-app
        image: nestjs-app
        ports:
        - containerPort: 3000

4. Apply the deployment to your Kubernetes cluster:

```bash
kubectl apply -f deployment.yaml
```

5. Expose the NestJS API as a service:

Create a service file (service.yaml):

apiVersion: v1
kind: Service
metadata:
  name: nestjs-app-service
spec:
  selector:
    app: nestjs-app
  ports:
  - protocol: TCP
    port: 80
    targetPort: 3000
  type: LoadBalancer

6. Apply the service definition:

```bash
kubectl apply -f service.yaml
```

7. Access your NestJS API:

You can now access your deployed NestJS API through the IP address and port assigned by the LoadBalancer service. This will be displayed by kubectl get services.

Building an Angular Application

1. Create an Angular project:

```bash
ng new angular-app
```

2. Develop your Angular application:

Angular's component-based architecture makes it easy to build feature-rich applications. Let's create a simple component that displays a welcome message:

src/app/app.component.html:

<h1>
 Welcome to the Angular App
</h1>

3. Run your Angular application:

```bash
ng serve
```

Deploying the Angular Application to Kubernetes

1. Build the Angular application:

```bash
ng build --prod
```

2. Create a Dockerfile for the Angular application:

```dockerfile
FROM nginx:latest

COPY dist/angular-app /usr/share/nginx/html

EXPOSE 80

CMD ["nginx", "-g", "daemon off;"]
```

3. Build the Docker image:

```bash
docker build -t angular-app .
```

4. Create a Kubernetes deployment file (deployment.yaml):

apiVersion: apps/v1
kind: Deployment
metadata:
  name: angular-app
spec:
  replicas: 1
  selector:
    matchLabels:
      app: angular-app
  template:
    metadata:
      labels:
        app: angular-app
    spec:
      containers:
      - name: angular-app
        image: angular-app
        ports:
        - containerPort: 80

5. Apply the deployment to your Kubernetes cluster:

```bash
kubectl apply -f deployment.yaml
```

6. Expose the Angular application as a service:

Create a service file (service.yaml):

apiVersion: v1
kind: Service
metadata:
  name: angular-app-service
spec:
  selector:
    app: angular-app
  ports:
  - protocol: TCP
    port: 80
    targetPort: 80
  type: LoadBalancer

7. Apply the service definition:

```bash
kubectl apply -f service.yaml
```

8. Access your Angular application:

You can now access your deployed Angular application through the IP address and port assigned by the LoadBalancer service. This will be displayed by kubectl get services.

Conclusion

This article has provided a comprehensive guide to deploying NestJS and Angular applications using MicroK8s, a lightweight and user-friendly Kubernetes distribution. By leveraging the power of containerization and orchestration, we can build robust, scalable, and highly available web applications.

Key takeaways:

• MicroK8s provides an excellent environment for development, testing, and deploying applications using Kubernetes.
• NestJS offers a powerful framework for building scalable and maintainable Node.js back-end applications.
• Angular is a robust framework for building client-side web applications with a focus on component-based architecture and data binding.
• Kubernetes offers a range of features for automated deployment, scaling, and management of containerized applications.

By mastering these tools and concepts, you can build sophisticated and scalable web applications while embracing the benefits of containerization and Kubernetes orchestration.