Skip to main content

CI/CD (Continuous Integration / Continuous Deployment) on AWS

CI/CD (Continuous Integration / Continuous Deployment) on AWS is a powerful way to automate your development workflow—from code changes all the way to deployment.

Here’s a complete overview of how CI/CD works in AWS, step by step:

🚀 What is CI/CD?

Term

Meaning

CI (Continuous Integration)

Automatically build, test, and validate code on every commit

CD (Continuous Deployment/Delivery)

Automatically release code to production (or staging) once tested

🧱 Core AWS Services for CI/CD

Service

Role

AWS CodeCommit

Git-based code repository (like GitHub)

AWS CodePipeline

Orchestrates the CI/CD workflow

AWS CodeBuild

Compiles, runs tests, and builds your code

AWS CodeDeploy

Deploys code to EC2, Lambda, or ECS

S3, EC2, Lambda, Beanstalk, ECS

Deployment targets (your app lives here)

CloudWatch

Monitoring logs, performance, alarms

🔄 CI/CD Workflow on AWS (Example)

Let's say you're working on a Django app stored in GitHub.

👇 Here’s what the flow would look like:

1. Source Stage – Where the code lives

  • Connect AWS CodePipeline to GitHub or CodeCommit
  • Any new push to the main branch triggers the pipeline

2. Build Stage – Testing & Packaging

  • CodePipeline triggers CodeBuild
  • CodeBuild:
    • Installs requirements
    • Runs unit tests
    • Collects static files
    • Prepares deployable artifact (zip or Docker image)

💡 You define all this in a buildspec.yml file

3. Deploy Stage – Goes Live

  • CodePipeline passes the build to:
    • EC2 (via SSH or CodeDeploy)
    • Elastic Beanstalk
    • Lambda
    • ECS (Fargate/EC2)
  • App is now updated without manual intervention!

📝 Sample buildspec.yml (for Angular)

yaml

version: 0.2

phases:

  install:

    runtime-versions:

      nodejs: 18

    commands:

      - npm install -g @angular/cli

      - npm install

  pre_build:

    commands:

      - ng lint

      - ng test --watch=false --browsers=ChromeHeadless

  build:

    commands:

      - ng build --configuration production

  post_build:

    commands:

      - echo Build complete

artifacts:

  files:

    - app.zip (dist/**/*)

Explanation:

  • Node.js 18 is used as it supports the latest Angular versions.
  • ng lint checks for linting errors.
  • ng test runs unit tests in headless Chrome.
  • ng build --configuration production compiles your Angular project.
  • dist/**/* includes everything from the build output directory in your artifacts.

⚙️ Deployment Targets

Target

Notes

EC2

Full control; install manually or use CodeDeploy

Elastic Beanstalk

Easiest for Angular/React/Django apps; handles EC2, Load Balancer, DB

ECS (Dockerized)

Best for microservices or containerized apps

Lambda

For serverless backends or APIs

🔒 IAM Roles & Security

You’ll create:

  • IAM roles for CodeBuild and CodePipeline
  • Permissions to access S3, CodeDeploy, GitHub, etc.

 

How code test and validate automatically in CI pipeline process?

Great question! In Continuous Integration (CI), code is automatically tested and validated every time a developer pushes changes (a commit or pull request) to a shared repository. This is done using a CI pipeline, often configured through tools like GitHub Actions, GitLab CI/CD, Jenkins, AWS CodeBuild, Azure DevOps, etc.

Here’s how automatic testing and validation works in CI:

✅ 1. Triggering the Pipeline

When you push code (or open a pull request), the CI tool detects the change and starts running your pipeline (e.g., via buildspec.yml in AWS or .yml workflow in GitHub Actions).

✅ 2. Installing Dependencies

CI installs the required packages and tools. For example:

npm install               # for Angular/React

dotnet restore            # for C#

pip install -r requirements.txt  # for Python

✅ 3. Running Tests Automatically

You define test commands in your CI config file:

# React

npm test -- --watchAll=false

 

# Angular

npm run test -- --watch=false --browsers=ChromeHeadless

 

# Python

pytest

These commands run your unit tests, integration tests, or even end-to-end (E2E) tests.

✅ 4. Linting/Static Code Analysis

Many teams also add linters or static code analyzers to catch code style issues and potential bugs early:

npm run lint             # Angular, React, Node.js

dotnet format --verify-no-changes   # C#

eslint .                 # JavaScript/TypeScript

These tools enforce coding standards and best practices automatically.

✅ 5. Validation Steps

  • ✅ All tests must pass.
  • ✅ Code must build without errors.
  • ✅ Linting rules must be satisfied.

If any step fails, the CI pipeline stops and notifies the developer (via email, Slack, GitHub Checks, etc.).

✅ 6. Optional Extras

  • Code coverage checks (e.g., at least 80% of code must be tested).
  • Security checks (e.g., checking for vulnerable dependencies).
  • Style checks (e.g., Prettier, dotnet analyzers).

 

Prerequisites in your Angular project

Ensure your package.json has these scripts defined:

"scripts": {

  "lint": "ng lint",

  "test": "ng test",

  "build": "ng build",

  "start": "ng serve"

}

Also, make sure you have the dependencies for headless Chrome tests set up properly (karma, karma-chrome-launcher, etc.).

 

Example: buildspec.yml for Angular (AWS CodeBuild)

Here’s a full example of a buildspec.yml file specifically tailored for an Angular project in AWS CodeBuild, covering:

  • Installing Node.js and Angular CLI
  • Installing dependencies
  • Running lint and unit tests
  • Building the app
  • Archiving the production-ready files

 

buildspec.yml for Angular (AWS CodeBuild)

yml

version: 0.2

 

version: 0.2

 

phases:

  install:

    runtime-versions:

      nodejs: 18

    commands:

      - echo Installing Angular CLI...

      - npm install -g @angular/cli@latest

      - echo Installing dependencies...

      - npm ci

 

  pre_build:

    commands:

      - echo Linting project...

      - npm run lint

      - echo Running tests...

      - npm run test -- --watch=false --browsers=ChromeHeadless

 

  build:

    commands:

      - echo Building Angular project with production config...

      - npm run build -- --configuration production

 

  post_build:

    commands:

      - echo Preparing build artifacts...

      - mkdir -p dist-archive

      - cp -r dist/* dist-archive/

 

artifacts:

  base-directory: dist-archive

  files:

    - '**/*'

What this does:

  • Node.js 18: Modern and Angular 15+ compatible
  • Lint + Unit Tests: Ensures quality before building
  • Build: Uses the production configuration
  • Artifacts: Archives the final build output for deployment (e.g., to S3, ECS, etc.)

Key Notes for Angular 17/20:

  • npm ci is used instead of npm install for clean, reproducible builds.
  • Assumes that your angular.json and package.json are already updated to Angular 17 or 20 standards.
  • If you're using SSR (Angular Universal) or hybrid rendering, the build section would change a bit (let me know and I’ll update it accordingly).

 

Example: GitHub Actions workflow file (angular.yml)

Here's a complete example of a GitHub Actions workflow file (angular.yml) for an Angular project that does the following on every push or pull request:

  • Installs dependencies
  • Runs linting
  • Runs unit tests
  • Builds the app

 

.github/workflows/angular.yml:

name: Angular CI

on:

  push:

    branches: [ main ]

  pull_request:

    branches: [ main ]

 

jobs:

  build:

    runs-on: ubuntu-latest

 

    steps:

      - name: Checkout code

        uses: actions/checkout@v3

 

      - name: Set up Node.js

        uses: actions/setup-node@v3

        with:

          node-version: '18'

 

      - name: Install dependencies

        run: npm install

 

      - name: Lint the project

        run: npm run lint

 

      - name: Run unit tests

        run: npm run test -- --watch=false --browsers=ChromeHeadless

 

      - name: Build the project

        run: npm run build -- --configuration production

 

Example: GitHub Actions for a C# Project

name: .NET CI

on: [push, pull_request]

jobs:

  build:

    runs-on: ubuntu-latest

    steps:

      - uses: actions/checkout@v3

      - name: Setup .NET

        uses: actions/setup-dotnet@v3

        with:

          dotnet-version: '8.0.x'

      - name: Restore dependencies

        run: dotnet restore

      - name: Build

        run: dotnet build --configuration Release --no-restore

      - name: Run tests

        run: dotnet test --no-build --verbosity normal

 

A CD (Continuous Deployment or Continuous Delivery) pipeline automates the process of deploying your code after it has been tested and built (from the CI stage).

Let’s break down how a CD pipeline works, step by step:

🚀 What is a CD Pipeline?

A CD pipeline takes your tested and built code from the CI process and automatically delivers or deploys it to a staging or production environment.

🛠️ How a CD Pipeline Works (Step by Step)

1. Trigger from CI

Once your CI pipeline completes (build & test passed), it triggers the CD pipeline. This can happen:

  • Automatically (for continuous deployment),
  • Or manually approved (for continuous delivery).

2. Fetch Build Artifacts

The CD pipeline fetches the compiled output (e.g., dist/ for Angular) from:

  • CI artifacts
  • S3 bucket
  • CodeBuild output

3. Optional Approval Step (for Continuous Delivery)

In enterprise setups, a manual approval may be required before pushing to production.

4. Deployment Steps

Depending on your setup, the pipeline:

  • Uploads the app to a server or cloud service (S3, EC2, Lambda, Firebase, Vercel, etc.)
  • Runs infrastructure scripts (e.g., CloudFormation, Terraform)
  • Updates load balancers or DNS (if needed)
  • Clears caches/CDN (like CloudFront invalidation)

5. Health Checks & Monitoring

After deployment:

  • Health checks or smoke tests are run
  • Alerts are sent if the deployment fails

✅ Example: Angular App Deployment via AWS CodePipeline (CD)

Let’s say:

  • You build your Angular app with CodeBuild
  • You deploy the app to an S3 bucket + CloudFront

Here’s how the CD part works:

🧩 Pipeline Stages

yaml

[Source (GitHub)] --> [Build (CodeBuild)] --> [Deploy (S3 + CloudFront)]

🪣 Deployment Commands in buildspec.yml (post_build)

yaml

CopyEdit

post_build:

  commands:

    - echo Syncing to S3...

    - aws s3 sync dist/my-app/ s3://my-angular-bucket --delete

    - echo Invalidating CloudFront cache...

    - aws cloudfront create-invalidation --distribution-id ABC123XYZ --paths "/*"

🔁 Summary Flow:

Developer Pushes Code →

CI: Build + Test →

CD: Deploy to Server/Cloud →

(Optionally) Manual Approval →

Production Live 🎉

If you tell me where you want to deploy your app (e.g., S3, Firebase, Vercel, EC2, Docker, etc.), I can give you a full working example!

 

 

AWS Elastic Beanstalk is a powerful and easy-to-manage service for deploying applications—including Angular apps, especially when paired with a Node.js backend (or as static files served via a reverse proxy like NGINX).

✅ Overview: Deploy Angular to Elastic Beanstalk (CD Pipeline)

Here’s how your CI/CD pipeline would look using:

  • CodeCommit/GitHub (Source)
  • CodeBuild (CI: Build Angular)
  • Elastic Beanstalk (CD: Deploy ZIP)

📦 Step-by-Step for CD Pipeline with Angular + Elastic Beanstalk

📁 1. Project Structure (simplified)

angular-app/

│

├── dist/my-angular-app/          # Final built files

├── .elasticbeanstalk/            # Elastic Beanstalk config files (optional)

├── buildspec.yml                 # AWS CodeBuild config

├── package.json

└── ...

🧱 2. buildspec.yml (build + package for Beanstalk)

yaml

version: 0.2

 

phases:

  install:

    runtime-versions:

      nodejs: 18

    commands:

      - npm install -g @angular/cli@latest

      - npm ci

 

  pre_build:

    commands:

      - npm run lint

      - npm run test -- --watch=false --browsers=ChromeHeadless

 

  build:

    commands:

      - npm run build -- --configuration production

      - mkdir -p build-output

      - cp -r dist/* build-output/

      - cd build-output

      - zip -r ../app.zip .

 

artifacts:

  files:

    - app.zip

 

This creates a app.zip file that includes your production-ready Angular app—ready for Elastic Beanstalk.

🚀 3. Create an Elastic Beanstalk App (once)

Create a new environment (Web Server Environment):

  • Platform: Node.js or NGINX (Angular is static HTML/JS, so NGINX is ideal)
  • Environment type: Web Server

Optional: Use .ebextensions to customize NGINX for routing (e.g., fallback to index.html for Angular routing).

📦 4. Deploy the ZIP to Elastic Beanstalk

Option A: Manual Upload

After CodeBuild finishes, you can upload app.zip to Elastic Beanstalk via:

  • AWS Console → Elastic Beanstalk → App → Upload & Deploy

Option B: Use CodePipeline (Recommended)

Use AWS CodePipeline to fully automate:

  • Source (GitHub/CodeCommit)
  • Build (CodeBuild)
  • Deploy (Elastic Beanstalk)

💡 You just need to specify:

  • Source stage: GitHub or CodeCommit
  • Build stage: Use the above CodeBuild project
  • Deploy stage: Elastic Beanstalk environment name

🔧 Optional: NGINX config for Angular routing (.ebextensions/nginx/conf.d/00-angular-rewrites.config)

yaml

files:

  "/etc/nginx/conf.d/angular-rewrites.conf":

    mode: "000644"

    owner: root

    group: root

    content: |

      location / {

        try_files $uri $uri/ /index.html;

      }

🧠 Summary Flow

[GitHub Push]

   ↓

[CodeBuild] → Builds Angular → Creates ZIP

   ↓

[CodePipeline] → Deploys ZIP to Elastic Beanstalk

   ↓

🎉 Production Angular App Live!

 

 

🚀 What is AWS CodeBuild?

AWS CodeBuild is a fully managed build service that compiles source code, runs tests, and produces deployable packages.

It’s a key part of AWS’s CI/CD pipeline, and works well with services like:

  • CodeCommit or GitHub (source)
  • CodePipeline (for orchestration)
  • Elastic Beanstalk, S3, ECS, etc. (deployment)

🛠️ What CodeBuild Does

When a developer pushes code to GitHub (or another repo), CodeBuild can:

  1. Clone the source
  2. Install dependencies
  3. Run tests (unit, lint, etc.)
  4. Build the code (e.g., ng build)
  5. Package it (e.g., create ZIP)
  6. Push artifacts to S3 or deploy using CodePipeline

All of this is driven by a file called buildspec.yml.

📄 What’s Inside a buildspec.yml

This YAML file tells CodeBuild what to do in each step:

version: 0.2

phases:

  install:

    runtime-versions:

      nodejs: 18

    commands:

      - npm install

  build:

    commands:

      - npm run build

 

It has phases like:

  • install: Set up environment
  • pre_build: Run lint/tests
  • build: Run build commands
  • post_build: Upload artifacts or do post-processing

📦 Artifacts (The Output)

CodeBuild can package your output and pass it to:

  • S3 bucket
  • Elastic Beanstalk
  • Another pipeline stage (in CodePipeline)

Example:

artifacts:

  files:

    - dist/**/* or app.zip

✅ Benefits of CodeBuild

Feature

Description

Fully managed

No servers to manage

Scales automatically

Parallel builds as needed

Integrated with AWS

Works with CodePipeline, CodeCommit, IAM, etc.

Customizable

Use your own Docker image, environment variables

Supports any language

Node.js, Python, Java, .NET, etc.

🧠 Real-world Example (Angular)

You commit Angular code to GitHub → CodeBuild is triggered → It:

  1. Installs Angular CLI
  2. Runs npm ci, ng lint, ng test
  3. Builds with ng build --prod
  4. Zips up the /dist folder
  5. Deploys the zip to Elastic Beanstalk or S3

🔐 Permissions (IAM)

Your CodeBuild project needs an IAM role with permission to:

  • Access GitHub (if using GitHub source)
  • Write to S3
  • Deploy to Elastic Beanstalk
  • (Optional) Assume CodePipeline role

Let's dive into AWS CodePipeline — one of the most powerful tools for automating your CI/CD (Continuous Integration and Continuous Delivery/Deployment) workflows in AWS.

🚀 What is AWS CodePipeline?

AWS CodePipeline is a fully managed CI/CD orchestration service that automates the steps required to release your software—from pulling source code to building, testing, and deploying it.

It connects all the pieces: source control, build tools, testing, approval steps, and deployment.

🧩 CodePipeline Stages (Typical Flow)

Here’s a simplified version of what a pipeline might look like for an Angular project:

[Source] → [Build] → [Deploy]

   ↓         ↓         ↓

GitHub   CodeBuild   Elastic Beanstalk

Each stage contains actions, which can be things like:

  • Clone repo
  • Run tests
  • Deploy code
  • Manual approval

🔁 How CodePipeline Works (Step-by-Step)

1. Source Stage

  • Where your code lives (e.g., GitHub, CodeCommit, S3)
  • Triggers pipeline when new code is pushed

2. Build Stage

  • Compiles and tests code using CodeBuild
  • Reads the buildspec.yml file
  • Produces output (e.g., a ZIP file of Angular's dist/ folder)

3. (Optional) Approval Stage

  • For environments like production
  • Can require manual approval before proceeding

4. Deploy Stage

  • Pushes the built app to:
    • Elastic Beanstalk
    • Amazon S3
    • ECS / EKS / Lambda
    • or any custom deployment target

🎯 Why Use CodePipeline?

Feature

Benefit

Fully managed

No servers or infrastructure to manage

Fast & automated

Reacts instantly to code changes

Customizable

Add approvals, testing, or parallel stages

Integrates easily

Works with GitHub, CodeBuild, Elastic Beanstalk, etc.

Visual UI

Drag-n-drop stages in the AWS Console

Versioned

Keeps track of pipeline executions and artifacts

🧠 Example: Angular to Elastic Beanstalk

Imagine you have:

  • Angular frontend on GitHub
  • Elastic Beanstalk environment ready

Your CodePipeline could look like this:

Stage

Action

Source

Connect to GitHub → Fetch Angular code

Build

Use CodeBuild → Run ng build → Create app.zip

Deploy

Push app.zip to Elastic Beanstalk using deploy action

🔐 IAM Roles

Each stage (especially Build and Deploy) requires IAM permissions to:

  • Read source
  • Execute builds (CodeBuild)
  • Deploy (Elastic Beanstalk, S3, etc.)

🧰 Tools CodePipeline Works With

  • Source Providers: GitHub, CodeCommit, S3
  • Build Tools: CodeBuild, Jenkins, custom scripts
  • Deploy Targets: Elastic Beanstalk, ECS, S3, Lambda, CloudFormation
  • Testing: Integrate Selenium, Postman, etc.

📦 Summary

AWS CodePipeline = CI/CD orchestrator

It brings together:

  • Source code
  • Automated builds/tests
  • Deployment
  • Approvals & automation

All in a visual, event-driven, and declarative way.

 

 

 

Labels

Labels:
By Anil Singh | Rating of this article (*****)

Popular posts from this blog

nullinjectorerror no provider for httpclient angular 17

In Angular 17 where the standalone true option is set by default, the app.config.ts file is generated in src/app/ and provideHttpClient(). We can be added to the list of providers in app.config.ts Step 1:   To provide HttpClient in a standalone app we could do this in the app.config.ts file, app.config.ts: import { ApplicationConfig } from '@angular/core'; import { provideRouter } from '@angular/router'; import { routes } from './app.routes'; import { provideClientHydration } from '@angular/platform-browser'; //This (provideHttpClient) will help us to resolve the issue  import {provideHttpClient} from '@angular/common/http'; export const appConfig: ApplicationConfig = {   providers: [ provideRouter(routes),  provideClientHydration(), provideHttpClient ()      ] }; The appConfig const is used in the main.ts file, see the code, main.ts : import { bootstrapApplication } from '@angular/platform-browser'; import { appConfig } from ...
Read more

Top 15+ Angular 17 Interview Questions Answers | For Experienced Professionals as well

G Google team released the latest version of Angular – Angular 17 on November 6, 2023, creating a significant milestone for the super fast front-end development. What Are the New Features in Angular 17? 1.       Angular 17 is the highly anticipated release for the community, bringing many new exciting features, updates, and improvements. 2.       New Syntax for Control Flow in Templates - new @if, @switch, @for, @case, @empty @end control flow syntax 3.       Deferred Loading - @defer partial template 4.       The Angular signals API 5.       Angular SSR and client hydration 6.       Automatic Migration to Build-in Control Flow 7.       Build Performance with ESBuild 8.       By default, set this newly generated component as a standalone, and now we don't have an app module file. To use (ng...
Read more

List of Countries, Nationalities and their Code In Excel File

Download JSON file for this List - Click on JSON file    Countries List, Nationalities and Code Excel ID Country Country Code Nationality Person 1 UNITED KINGDOM GB British a Briton 2 ARGENTINA AR Argentinian an Argentinian 3 AUSTRALIA AU Australian an Australian 4 BAHAMAS BS Bahamian a Bahamian 5 BELGIUM BE Belgian a Belgian 6 BRAZIL BR Brazilian a Brazilian 7 CANADA CA Canadian a Canadian 8 CHINA CN Chinese a Chinese 9 COLOMBIA CO Colombian a Colombian 10 CUBA CU Cuban a Cuban 11 DOMINICAN REPUBLIC DO Dominican a Dominican 12 ECUADOR EC Ecuadorean an Ecuadorean 13 EL SALVA...
Read more

39 Best Object Oriented JavaScript Interview Questions and Answers

Most Popular 37 Key Questions for JavaScript Interviews. What is Object in JavaScript? What is the Prototype object in JavaScript and how it is used? What is "this"? What is its value? Explain why "self" is needed instead of "this". What is a Closure and why are they so useful to us? Explain how to write class methods vs. instance methods. Can you explain the difference between == and ===? Can you explain the difference between call and apply? Explain why Asynchronous code is important in JavaScript? Can you please tell me a story about JavaScript performance problems? Tell me your JavaScript Naming Convention? How do you define a class and its constructor? What is Hoisted in JavaScript? What is function overloadin...
Read more

SOLID-Liskov Substitution Principle (LSP) Real-Time Example in C#

The SOLID Principles are the design principles that enable us to manage several software design problems. These principles provide us with ways to move from tightly coupled code to loosely coupled and encapsulated real business needs properly. Also readable, adaptable, and scalable code. The SOLID Principles  guide developers as they write readable, adaptable, and scalable code or design an application. The SOLID Principles can be applied to any OOP program. The SOLID Principles were developed by computer science instructor and author Robert C. Martin. Now, SOLID principles have also been adopted in both agile development and adaptive software development. The 5 principles of SOLID are: 1.       Single Responsibility Principle (SRP) 2.       Open-Closed Principle (OCP) 3.       Liskov Substitution Principle (LSP) 4.       Interface Segregation Principle (ISP) 5. ...
Read more