Thank you for reading my blog posts, I am no longer publishing new content on this platform. You can find my latest content on either mainawycliffe.dev or All Things Typescript Newsletter (✉️)
Building and deploying Angular app is very time consuming, especially with large application. You also must keep track of which branch you are deploying to which environment and a little mix-up could be catastrophic. You can smoothen the building and deployment of your application using AWS CodeBuild. “AWS CodeBuild is a fully managed build service that compiles source code, runs tests, and produces software packages that are ready to deploy.”
NB: AWS charges for using the above resources, please cleanup after you are done using them.
You will need to create a new bucket and then give AWS CodeBuild permission to access and put the build files inside the S3 Bucket. If you don’t know how to create an S3 bucket, please follow this official guide. For permissions, we will cover this at the end of this post.
First, head over to AWS CodeCommit on AWS using the following link. Your window will probably look like the one below:
Click on Getting Started or Create Pipeline to get started. You will be presented with the following window, where there are six steps to follow for you to create your new pipeline. Let’s go through them step by step. If you are already familiar with AWS CodePipeline you can skip this guide up to Step 3.
Please enter an Appropriate Name for your pipeline.
This is the location of your Angular Source Code. It could be either AWS CodeCommit Repo, S3 Bucket Files or Github Rep. Select the source in the drop down, in our case we will use either Github or AWS CodeCommit. If you select Github, then click on the “Connect Github” button and follow the steps to authorize AWS Access. Then select the repository and the branch you would like to automatically detect changes and build.
If you select AWS CodeCommit, please select the appropriate repository and branch to automatically build. You can leave the rest of the settings as they are.
Please Note: For AWS CodeCommit, the repo you wish to connect to AWS CodePipeline must be in the same region as the one you are creating the pipeline for. You can change the region you are in by clicking on the drop-down button between Your account and Support at the top right corner of your browser. The default region is North Virginia.
This is what this whole article is about. Here we are going to setup CodeBuild to automatically build our application and deploy to an S3 Bucket.
Under Build Provider, select CodeBuild, then under configure your project, select Create a New Build Project under AWS CodeBuild.
Environment Image
, select ubuntu.Operating System
, Select Ubuntu 14
Runtime
, Select Base (Not NodeJS) and then Select the Appropriate Version (As at the time of writing, this was Ubuntu 14) below that.Build Specification
, we are going to be using yaml
file at the root of our project that will provide all commands to build our Angular Project. I will provide a sample for angular later in the post. You can learn more about Build Spec File here.Once the Build Project has been created successfully, let’s go ahead and get the Service Role name
. We are going to need this to configure AWS CodeBuild permission to put the built project on AWS S3.
Service Role
and take note of the Service Role Name
.We already took care of deployment under the last step, so select No Deployment option. This is because CodePipeline doesn’t have the option to deploy to an S3 bucket. We will automatically deploy to an S3 bucket after building the project using aws-cli – it is installed automatically in the build server.
Create a new Aws Service Role for CodePipeline and click on next.
Review the details of the Pipeline and click on create at the bottom.
To build your project, we need to add the commands to install all npm packages (Dependencies).
Then it will run ng build
and copy all the files inside /dist
directory (or wherever the location of your build artefacts are placed) to the s3 bucket. To do this add a new file to the root of the project known as buildspec.yaml
. Then add the following content: (Read the moment for what each line of command does)
version: 0.2
env:
variables:
S3_BUCKET: "<S3_BUCKET_HERE>"
APP_NAME: "<APP_NAME_HERE>"
BUILD_ENV : "prod"
phases:
install:
commands:
# Download and Install NodeJS 8.0
- curl -sL https://deb.nodesource.com/setup_8.x | sudo -E bash -
- sudo apt-get install -y nodejs
- echo Installing source NPM dependencies...
# Install http drivers for node
- sudo apt-get update -y
- sudo apt-get install -y apt-transport-https
# Install Yarn Package Manager (Replace the commands below if you using NPM).
- curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -
- echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list
- sudo apt-get update -y
- sudo apt-get install -y yarn
# Install Angular CLI, If you are not using Angular 6, install angular/[email protected] or lower, confirm by running ng -v inside your project folder
- yarn global add @angular/cli@6.0.8
# Install node dependancies.
- yarn install
build:
commands:
# Builds Angular application. You can also build using custom environment here like mock or staging
- echo Build started on `date`
- ng build --${BUILD_ENV}
post_build:
commands:
# Clear S3 bucket.
- aws s3 rm s3://${S3_BUCKET} --recursive
- echo S3 bucket is cleared.
# Copy dist folder to S3 bucket, As of Angular 6, builds are stored inside an app folder in distribution and not at the root of the dist folder
- aws s3 cp dist s3://${S3_BUCKET}/${APP_NAME} --recursive
- echo Build completed on `date`
artifacts:
files:
- '/'
discard-paths: yes
base-directory: 'dist*'
As you can see, am using Yarn Package Manager for my project, but you can replace the Yarn commands with NPM commands. And finally, we need to allow our CodeBuild permission to write and delete in to our S3 Bucket, otherwise this won’t work.
Head over to AWS S3 Bucket management interface and open your bucket. Then under Permissions, you open Bucket Policy. We need to modify the policy to include the role you copied when you create the CodeBuild Project up there. Under statement, add a new object (JSON Object) and Add the following content:
{
"Sid": "CodeBuildPermision",
"Effect": "Allow",
"Principal": {
"AWS": "< ROLE ARN HERE>"
},
"Action": "s3:*",
"Resource": "arn:aws:s3:::your-bucket-name "
}
Replace your-bucket-name
with your own bucket name and ROLE ARN
from Step 3 Above. Finally, you need to be able to access your web app over the internet, to do this configure your S3 Bucket for Web Hosting and add a domain name if need be.
This guide here will help you configure your bucket for web hosting.
Angular Flex Layout is a powerful layout tool available for Angular. It provides an API than can be easily used in both component templates …
Read MoreA few weeks ago, I demonstrated how to implement Sign in with Facebook with a REST API. Today, I will show you how to Sign-in with Google in …
Read MoreToday, I am going to show you how to create an Angular App with a REST API that uses Facebook Login to sign in/up users. For this …
Read MoreToday, I will show you how to optimize your Angular 5 and above for search engine and other crawlers. It is important to note that, pages …
Read MoreIntroduction Over the weekend, I was working on a PHP REST API that is using Mongo DB as it’s database. I haven’t worked with MongoDB …
Read MoreIntroduction You probably have heard about Responsive Layout design but let me remind you anyway. Responsive layout is where components and …
Read More