This post will explain how to automate the deployment of your Angular 2 application to an AWS S3 bucket using BitBucket Pipelines.
For the purpose of this post I’ve assumed you already have an AWS S3 bucket configured for hosting an Angular application.
To get things up and running you will need the following:
AWS Access Key Id
AWS Secret Key
AWS S3 Bucket name
Configuring BitBucket Repository
If you are not currently using Pipelines in BitBucket then you will need enable it. You can do this by going to your repository and then:
Settings > Pipelines > Settings > Enable Pipelines
Once enabled, you can go to the Environment Variables section and add the following keys:
Your AWS Access Key Id (Tick Secured)
Your AWS Secret Key (Tick Secured)
Your S3 bucket name e.g. my-angular-app
Note: The names of these AWS environment variables are important as the AWS CLI automatically looks for these names for authentication. See this AWS CLI help page for more details.
In the root of your repository you need to have a file called “bitbucket-pipelines.yml” The file should look like this:
Bitbucket Pipelines will load the Docker Image file codingbadger/aws-cli-angular-cli and the run the commands specified in the script section. The docker image can be found here
In order for the npm and ng build commands to run correctly you have to make sure you are in the right directory so if you’re SPA is not in the root of your repository you will have to change directory first.
The YAML file is also configured to only run on the master branch and to cache the node packages. You can change/remove these options if you want to.
Now when you commit to master BitBucket Pipeline will pick up your commit, check it out on a fresh Docker image, install any npm packages, build your Angular App in prod mode and deploy the dist folder to your AWS S3 bucket.