Category: Development

Let’s put it all together and create simple full-stack application using Angular, Spring Boot, and Kubernetes

First, let’s create the Angular frontend. You can use the Angular CLI to create a new project:

ng new my-app

Once the project is created, you can build the frontend and create a production build:

ng build --prod

This will generate the production build of the frontend in the dist folder.

Next, let’s create the Spring Boot backend. You can use the Spring Initializer to create a new project:

curl https://start.spring.io/starter.zip -o my-app.zip

Once the project is created, you can add the necessary dependencies and code to create a REST API.

Now, you can package the Spring Boot application into a JAR file:

./mvnw clean package

With both the frontend and backend ready, you can create a Docker image for each.

Create a Dockerfile for the frontend:

FROM nginx:alpine
COPY dist/my-app /usr/share/nginx/html

And a Dockerfile for the backend:

FROM openjdk:8-jdk-alpine
COPY target/*.jar app.jar
ENTRYPOINT ["java","-jar","/app.jar"]

You can then build the Docker images by running the command:

docker build -t my-app-frontend -f frontend.Dockerfile .
docker build -t my-app-backend -f backend.Dockerfile .

With the images built, you can now create a Kubernetes Deployment to manage the desired state of your application:

Deployment for frontend

my-app-frontend-deployment.yaml:

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

my-app-backend-deployment.yaml:

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

And you can create a Kubernetes Service to expose the application to the outside world:

my-app-service.yaml:

apiVersion: v1
kind: Service
metadata:
  name: my-app-frontend
spec:
  selector:
    app: my-app-backend
    ports:
      name: http
      port: 8080
      targetPort: 8080
      type: ClusterIP

This is just a high-level example, in a real-world scenario, you might want to use Kubernetes volumes to manage the data, add environment variables or configmaps to configure the application, or use Kubernetes autoscaling feature.

Additionally, you will also want to use a Kubernetes ingress to route the traffic to the correct service based on the URL path. This will allow your application to handle different routes and endpoints for the frontend and backend.

Finally, you can deploy the application to a Kubernetes cluster by applying the above configuration files using the kubectl command:

kubectl apply -f my-app-frontend-deployment.yaml
kubectl apply -f my-app-backend-deployment.yaml
kubectl apply -f my-app-service.yaml

That’s it! Your application is now running on a Kubernetes cluster and can be accessed through the external IP address of the frontend service.

Keep in mind that this is a simplified example and in a real-world scenario, there might be more complexity and additional steps required.