One of my front-end developer friends asked me to setup a thing that auto build Angular app from the Bitbucket git repo to show every updated version of the front-end to their customer. It’s easily possible nowadays and let’s see how I did accomplish their request using Bitbucket Pipelines, Deployments and AWS S3.

Bitbucket Pipelines accepts a .yml file to configure your CI/CD pipeline using wide range of integrations. A lot of config for angular and AWS S3 is possible. I’ll configure it as install and build the angular on a nodejs container; move it to deployment step and publish them to AWS S3 using built-in aws s3 sync pipe. Let’s start configuring it.

On a clean environment; I need nodejs and npm first.

image: node:8.16

Done! After that, I need to install angular itself and angular app’s dependencies. Then, build them silently since I don’t want everything to be printed to logs during the build. By the way, feel free to name these steps like I named as “Build app”.

pipelines:
  default:
    - step:
        name: Build app
        script:
        - npm install
        - npm install -g @angular/cli
        - ng build --prod --progress=false

It’ll produce prod files in dist/ folder. I need to move them to the deployment step. So I’ll export them to next step. Be careful that it can be another folder in the dist folder. You can set that at the pipelines step too.

artifacts:
	- dist/**

Now ready to go to the next step: deployment. I’ll publish them directly to S3 with built-in aws-s3-deploy:0.2.4 pipe in the bitbucket.

- step:
		name: Deploy app
		deployment: test
		script: # The script below will deploy the application to the webserver.
			- pipe: atlassian/aws-s3-deploy:0.2.4
				variables:
					AWS_ACCESS_KEY_ID: $AWS_ACCESS_KEY_ID
					AWS_SECRET_ACCESS_KEY: $AWS_SECRET_ACCESS_KEY
					AWS_DEFAULT_REGION: 'us-west-2'
					S3_BUCKET: 'YOUR-BUCKET'
					LOCAL_PATH: 'dist/folder'
					ACL: 'public-read'
					DELETE_FLAG: 'true'
					EXTRA_ARGS: '--quiet'

I need AWS credentials to write to a S3 bucket. For this purpose, I’ve created a user with only programmatic access in AWS IAM and attached a policy that only allows the S3 repo we’ll use. Use this template to create the role for the user you’ve created. Consider applying least privilege principle while creating IAM roles.

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Effect": "Allow",
            "Action": "s3:*",
            "Resource": [
                "arn:aws:s3:::YOUR-BUCKET",
                "arn:aws:s3:::YOUR-BUCKET/*"
            ]
        }
    ]
}

Now we have AWS access keys and I will put them to Settings > Pipelines > Repository Variables section in the bitbucket repo as AWS_ACCESS_KEY_ID and AWS_SECRET_ACCESS_KEY. This place is to store environment variables because pushing them in the .yml file is really bad idea since they’ll be in the git history forever. We don’t want this, obviously.

The final version of .yml file, which we’ll commit it to the bitbucket git repo as bitbucket-pipelines.yml

image: node:8.16
pipelines:
  default:
    - step:
        name: Build app
        script: # The script below will build the application.
        - npm install
        - npm install -g @angular/cli
        - ng build --prod --progress=false
              artifacts:
                - dist/**
    - step:
        name: Deploy app
        deployment: test
        script: # The script below will deploy the application to the webserver.
          - pipe: atlassian/aws-s3-deploy:0.2.4
            variables:
              AWS_ACCESS_KEY_ID: $AWS_ACCESS_KEY_ID
              AWS_SECRET_ACCESS_KEY: $AWS_SECRET_ACCESS_KEY
              AWS_DEFAULT_REGION: 'us-west-2'
              S3_BUCKET: 'YOUR-REPO'
              LOCAL_PATH: 'dist/folder'
              ACL: 'public-read'
              DELETE_FLAG: 'true'
              EXTRA_ARGS: '--quiet'

Well, when you run git push origin master, the pipeline will be triggered automatically and deployment will start.

Grab a beer and watch that how your scenario is playing on the Pipelines section of your bitbucket repo.

Maybe you thought that how is my first configuration worked well and turned to green. It’s not. Check that how I tried lots of things;

That’s it! Please share your ideas and thoughts about Bitbucket CI/CD pipelines and deployments with AWS.