Complete Guide: Deploying Angular Application on AWS S3 with CI/CD
Automate Angular deployment with CI/CD Pipeline
Prerequisites
Introduction
In today's fast-paced software development market, delivering web apps quickly and safely is crucial. The popular JavaScript framework Angular allows developers to create strong and dynamic web apps. AWS S3 (Simple Storage Service) provides a cost-effective and scalable alternative for hosting these applications. Furthermore, developers can automate the deployment process by incorporating Continuous Integration and Continuous Deployment (CI/CD) processes, resulting in faster and more reliable application releases.
I will lead you through the process of deploying your Angular application on AWS S3 using CI/CD in this comprehensive guide. Everything from building S3 buckets to configuring CI/CD pipelines will be covered, allowing you to streamline the deployment process and achieve seamless application delivery.
What is AWS S3
AWS S3 (Simple Storage Service) is a scalable and highly available cloud storage service. It offers a secure and dependable platform for data storage and retrieval, making it a great solution for a variety of use cases such as website hosting, data backup, content distribution, and application data storage.
S3 works with buckets, which are effectively containers for storing objects. Each item in S3 is made up of data (such as files) and metadata (such as the object's name, size, and date). S3 is built to last, which means it protects data integrity and prevents data loss. This is accomplished by automatically replicating objects across several data centers within a given AWS region. To find out more about S3, check out the official documentation.
Step 1: Create an S3 Bucket
Log in to the AWS console first, then search for S3 in the search box and click on it. The S3 bucket is where we store all the application files and scripts.
The AWS S3 Interface is shown below, where we can see a list of buckets and see each bucket's properties.
Click on the Create Bucket button to create a new bucket.
Give your bucket a name that is the URL of your application, for example, test-project.showcase.com.ng. Because we will shortly transform the S3 URL to a legal domain or subdomain, you must name the bucket exactly as the domain or subdomain of your website. "test-project.showcase.com.ng" is a subdomain of showcase.com.ng in our case.
Also, choose an AWS region; remember this region because we will be using it throughout this deployment. Select ACLs disabled in the Object Ownership.
Uncheck the block all public access checkboxes so that objects in the bucket can be accessed by the public. Also, make sure to check the acknowledgment that you understand that setting.
You can leave the rest of the setup as is and click on Create, as seen in the image below.
After creating the bucket, it will appear in the list of buckets; keep in mind that the object access is objects can be public. As a result, we must go to the newly created bucket and adjust the permissions such that the object access is public.
In the properties tab of the new bucket, scroll to the static web hosting section, click on the edit button, then enable static website hosting.
Before clicking on save changes, enter index.html in the index and error document input fields.
Click on the permissions tab and scroll to the part where we are to add a bucket policy and click on save changes.
Make sure you add the bucket ARN to the resource part of the bucket policy.
{
"Version": "2012-10-17",
"Statement": [
{
"Sid": "PublicReadGetObject",
"Effect": "Allow",
"Principal": "*",
"Action": [
"s3:GetObject"
],
"Resource": [
"arn:aws:s3:::example.com/*"
]
}
]
}
The test-project.showcase.com.ng bucket is now publicly accessible.
Step 2: Create a code pipeline
Search for codepipeline in the search bar.
The AWS Code pipeline interface is shown here, along with a list of all pipelines. Click the Create pipeline button to start a new pipeline.
There are five phases to creating a pipeline, starting with naming your pipeline. After naming the pipeline, select the new service role, then click on the next button.
The next step is the source phase, for the source provider, select Github version 2 and click on Connect to Github, so that you can connect to your github account.
Give the connection a name and click on connect to github.
Click on Install a new app, then login to your GitHub account before selecting a repository to use for the CI/CD pipeline.
After selecting a repository, click on save. Then subsequently, click on connect.
After a successful connection, select a repository and select a branch, here I selected the main branch and then click on next.
The next stage is the build stage, but before we move on to the build stage, let's talk about the buildspec.yml file which should be added at the root directory of the project.
Below is the content of the buildspec.yml file and we are going to analyze the content of the file.
version: 0.2
env:
variables:
CACHE_CONTROL: "86400"
S3_BUCKET: "{{s3_bucket_url}}"
BUILD_FOLDER: "dist"
phases:
install:
runtime-versions:
nodejs: 14
commands:
- echo Installing source NPM dependencies...
- npm install
- npm install -g @angular/cli
build:
commands:
- echo Build started
- ng build
artifacts:
files:
- '**/*'
base-directory: 'dist/password-manager'
discard-paths: no
Version:
- Specifies the version of the buildspec file format being used. In this case, it is version 0.2.
Environment (env):
Defines environment variables that can be used in the build process.
The variables defined here are:
CACHE_CONTROL: Specifies the cache control value for the deployed files.
S3_BUCKET: This represents the URL of the S3 bucket where the build artifacts will be deployed.
BUILD_FOLDER: Specifies the folder within the project where the build artifacts are generated.
Phases:
Contains the build phases, which are executed sequentially during the build process.
In this case, there are two phases:
"install" phase: Installs the necessary dependencies.
Defines the runtime version of Node.js as 14.
Executes commands to install NPM dependencies and the Angular CLI globally.
"build" phase: Triggers the build process for the Angular application.
- Executes commands to start the build process using the Angular CLI.
Artifacts:
Defines the build artifacts that should be saved or deployed after the build process.
In this case:
The "files" attribute uses a glob pattern ('**/*') to specify that all files and folders within the build output should be included as artifacts.
The "base-directory" attribute specifies the base directory within the project where the build artifacts are located.
The "discard-paths" attribute is set to "no," which means that the directory structure within the "base directory" will be preserved in the artifact output.
The base directory in my case is dist/password-manager you need to check the output path in your angular.json file.
Continuing with the build stage, click on create project.
Add a project name.
The environment image should be managed image, operating system should be ubuntu, runtime should be standard, maintain the remaining settings as seen in the image below and click on continue to pipeline.
After a successful build stage, you should get this success message. Then add the environment variable, then add the ARN of the S3 bucket to the value field before clicking on the next button.
In the deploy stage, select S3 as the deploy provider and click on the extract before the deploy checkbox.
Finally, review before clicking on create pipeline.
Step 3: Configure the domain using Route 53
Search for code pipeline in the search bar.
Below is the list of all the hosted zones that have been configured to your account. So we are going to select one of the hosted zones and configure a subdomain for the application that was deployed in our S3 bucket.
Click on the domain, in our case, it is showcase.com.ng, then click on create record.
click on Define the simple record, this would create the route successfully.
You can now see the newly created route record and clicking on test-project.showcase.com.ng would serve the project hosted in the bS3 bucket.
Conclusion
Deploying an Angular application on AWS S3 with CI/CD provides a strong and effective method for ensuring continuous application delivery. We've gone over the step-by-step process of deploying an Angular application on AWS S3, making use of S3's simplicity and scalability as a hosting solution. We automated the release process by introducing CI/CD principles into the deployment workflow using the AWS Code pipeline, allowing for faster and more reliable deployments. We also successfully transformed the S3 url to a registered subdomain.
Happy deploying!
Consider following me on social media.