Aasifa Shaik

Complete CICD of Angular App | Gitlab | AWS | ECR | EKS | Sonarqube | Trivy | Black Duck

Aasifa Shaik's photo
Aasifa Shaik
·

4 min read

Table of contents

Local Deployment

Gitlab Repo :

https://gitlab.com/aasifa_pro/Angular-hotel-app.git

This app was developed by NITISH KUMAR VERMA . I would like to express my sincere gratitude to NITISH KUMAR VERMA , a highly skilled and talented developer at Verto. His expertise and invaluable support were instrumental in the success of both the project and its deployment. For any development-related assistance, I highly recommend reaching out to NITISH KUMAR VERMA —his dedication and knowledge truly set him apart in the field

Note ( Github to Gitlab )

( If you have any other app which is in github and if you want to use gitlab then you can import using repository url from github to gitlab. )

Local Deployment of Angular Hotel App on EC2

I will walk through the steps for deploying the Angular Hotel App on an EC2 instance. I encountered an issue where the app was only accessible via localhost, and I’ll also explain how I solved that problem by configuring the IP binding correctly.

Setting up EC2 for Angular App Deployment

sudo apt update
node -v  # To check the Node.js version
nvm install v20.17.0  # Install a specific Node.js version using NVM
npm install -g @angular/cli
ng version  # To confirm installation
npm install
npm outdated  # Optional: Check for outdated packages
npm update  # Optional: Update outdated packages
npm install
ng build
ng serve --host 0.0.0.0

Issues Faced:

  • Initial Issue: The application was only accessible locally via http://localhost:4200, even when running on an EC2 instance.

  • Solution: The issue was resolved by running ng serve --host 0.0.0.0, which exposed the app on the EC2 public IP.

Open your public ip with 4200 to access app.

Building Dockerfile

#e Node.js as base image
FROM node:20 AS build

# Set the working directory
WORKDIR /app

# Copy package.json and install dependencies
COPY package*.json ./
RUN npm install

# Copy the application code and build the Angular app
COPY . .
RUN npm run build --prod

# Expose port 4200
EXPOSE 4200

# Start the Angular development server
CMD ["npm", "start", "--", "--host", "0.0.0.0", "--port", "4200"]

Note ( 4200 port already exists issue )

The error message indicates that port 4200 is already in use by another process on your EC2 instance. Here’s how to troubleshoot and resolve this:

  • Check Running Containers: Run the following command to see if any Docker containers are already using port 4200:

      bashCopy codedocker ps

    If you see any containers using this port, you can stop them with:

      bashCopy codedocker stop <container_id>

  • Check Other Processes: If no Docker containers are using it, check if another process is occupying port 4200:

      bashCopy codesudo lsof -i :4200

    This will show you the process using the port. If it’s not needed, you can kill it using:

      bashCopy codesudo kill <PID>

    Steps to Run and Test

  •   docker build -t angular-hotel-app .
  docker run -p 4200:4200 angular-hotel-app

    App is running

Setting up Gitlab in EC2 so that we can push our docker file in gitlab

Please refer https://mysoftwarediary.hashnode.dev/setting-up-gitlab-in-ec2 for the process.

Integrating GitLab CI/CD Pipeline to Push Docker Images to Amazon ECR

Install aws-cli

Refer https://mysoftwarediary.hashnode.dev/aws-cli-installation-and-configuration

for installing and configuring aws cli

Create ECR Repository

aws ecr create-repository --repository-name angular-hotel-app --region <your-region>

This will create a repository in ECR to store your Docker images.

Update .gitlab-ci.yml to Push to ECR

This is to push ro dockerhub ( ignore it )

stages:
  - build
  - test
  - deploy

variables:
  DOCKER_IMAGE: "aasifa/angular-hotel-app:latest"

before_script:
  - echo "Starting GitLab CI/CD Pipeline"

build:
  stage: build
  image: docker:latest
  services:
    - docker:dind
  script:
    - echo "Building the Docker image..."
    - docker build -t $DOCKER_IMAGE .
    - echo "Pushing the Docker image to Docker Hub..."
    - docker login -u $DOCKER_USERNAME -p $DOCKER_PASSWORD
    - docker push $DOCKER_IMAGE

# test:
#   stage: test
#   image: node:latest
#   script:
#     - echo "Running tests..."
#     - npm install
#     - npm test

deploy:
  stage: deploy
  image: google/cloud-sdk:latest  # Use the appropriate image for your deployment needs
  script:
    - echo "Deploying to EKS..."
    # Add your EKS deployment commands here, for example:
    #- kubectl apply -f k8s/deployment.yaml

Lets work on including ECR and EKS in upcoming blog.

frontend-deploymentEKS