CI/CD with AWS and Github

Syed Saad Qamar
Software Engineer

/SyedSaadQamar96

/in/syed-saad-qamar

/saadqamar01

/saadqamar96

commit

code pipeline

code build

code deploy

AWS S3

cloud watch

buildspec.yml

Design Flow:

Steps that we will be following:

1. Create AWS CodePipeline

2. Select GitHub as Source Provider

3. Add Build Provider

4. Add Deploy Stage S3

3a: Create AWS CodeBuild Project

3c: Setup buildspec

5. Review

3b: Setup environment

Step 1: Create AWS CodePipeline

Step 2: Select GitHub as Source Provider

Step 3: Add Build Provider

Step 3a: Create AWS CodeBuild Project

Step 3b: Setup environment

Step 3c: Setup buildspec

Step 4: Add Deploy Stage S3

Step 5: Review

#0.1 runs each build command in a separate instance
#0.2 runs all build command in a same instance (recommanded)
version: 0.2

phases:
  install:
    runtime-versions:
      nodejs: 10
    commands:
      - echo Installing source NPM dependencies...
      - npm install -g @angular/cli
      - npm install
  build:
    commands:
      - echo Build started 
      - ng build
artifacts:
  files:
    - '**/*'
  base-directory: 'dist*'
  discard-paths: yes

Final step:

Add buildspec.yaml file in your root project

Commit and push the code

Finished!

Enable S3 Static Website Hosting

Make S3 bucket to public

- Go to Permissions tab -> Block all public access -> uncheck Block all public access and save it

- Go to Permissions tab -> Bucket Policy -> Edit and Save

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicRead",
            "Effect": "Allow",
            "Principal": "*",
            "Action": [
                "s3:GetObject",
                "s3:GetObjectVersion"
            ],
            "Resource": "arn:aws:s3:::ng-ci-cd-aws-demo/*"
        }
    ]
}

- Go to Overview -> index.html -> open link

Any Question???