Blog

How to Deploy Angular Web Deployment

ByPallavi Gupta
February 24th . 7 min read
Angular Web App Deployment

In this article, we will take a look at how to deploy an angular application to an Amazon S3 Bucket and access it via AWS Cloud Front.

This process consists of two CI/CD steps:

  • Building the project with AWS CodeBuild
  • Configuring Continuous Integration/Continuous Delivery (CI/CD) with AWS Code Pipeline.

Get Started with AWS

MicrosoftTeams-image.png

Pre-Requisites:

  • Access to AWS Account - Understanding of AWS S3, Code-Build & Code-Pipeline in order to create CI/CD pipeline.
  • Basic knowledge of CloudFront, Route 53, Certificate Manager.

Below are the steps to follow the process:

Create AWS S3 bucket enabling Static Web Hosting with Public Access:

Create an S3 bucket and in General Configuration section, give the Bucket Name, the name should be unique. Keep Object Ownership as default.

Enable public access to the Bucket by unchecking the ‘Block all public access’. This does allow access to the bucket publicly, but this doesn’t enable public access to the content/objects inside the bucket.

Keep the rest as default and click ‘Create bucket’.

Once the bucket is created, go inside it and we can see different configuration tabs for this bucket. Here it shows the Access level of the bucket as ‘publicly accessible’.

  • Next step is to enable this bucket, to host a website. Click on ‘Properties’ tab and find the section ‘Static website hosting’.
  • After finding the Static website hosting section, click on edit and edit the configurations there mentioned as:
    MicrosoftTeams-image (2).png

Next step is to create custom bucket policy because though we enabled public access for this bucket it doesn’t allow to access the object inside the bucket to be accessed publicly.

Click the ‘permissions’ tab and go inside. There you can find a section ‘Bucket policy’ and then, click on ‘Edit’ and add the following inside the ‘Policy’-

{  
 "Version": "2012-10-17",  
 "Statement": [  
 {  
 "Sid": "PublicReadGetObject",  
 "Effect": "Allow",  
 "Principal": "*",  
 "Action": "s3:GetObject",  
 "Resource": "arn:aws:s3:::<AddYourBucketName>/*"  
 }  
 ]  
}  

Now, save the changes and thus we have configured our S3 bucket to host a static website that is accessible publicly.

Create AWS CodeBuild:

  • To create CodeBuild click on ‘Create build project’.
  • In the ‘Project configuration’ section gives the build name. Always keep in mind to keep the naming convention is configurated correctly.
  • Then in the ‘Source’ section, select the ‘Github’ as the ‘Service Provider’. Connect to GitHub and then it will ask your consent to connect your GitHub with AWS.
  • Then add repository URL, and set the branch you wish to use.

In the ‘Environment’ section, update the configuration as per the requirement. Also do check the additional configuration section in order to mention Environment Variable and some other details eg : compute.

Now comes the most important section is ‘Buildspec’. Here we configure how our project should be built to generate artifacts.

In order to create buildspec, we have two options: Use a buildspec file or Insert build commands. We used a buildspec file. Below is the build file -

Next is to configure ‘Artifacts’. Select the type from the dropdown button and click on Update Artifact.

Once done click on ‘Create Build Project’ and run the CodeBuild and check whether the build is successful or not.

Create AWS CodePipeline:

AWS CodePipeline is used to automate build and deployment of our Angular Web Application to S3 bucket.
Click on ‘Create pipeline’. Then we have to follow below steps in order to create the Codepipeline.

  • Pipeline Settings — General configurations for the Codepipeline, such as Name, Role etc.
  • Source — As the first step we have to set up the Triggering Source of the Code Pipeline. We can select the source provider, as ‘GitHub (Version 1)’ or maybe something else as well.
  • Build — So here we add our Codebuild as the Build provider.
  • Deploy — The last step, which defines where to deploy the Build. So, in our case we select Amazon S3.

Save the changes and then click on ‘Release Change’.

Let the code pipeline to run and deploy the Angular Project. After the pipeline completed the execution, we can check the s3 bucket, there we can see angular build files.
MicrosoftTeams-image (3).png

Create a Hosted Zone:

In our case the hosted zone was already created.
We need to create a DNS zone that will contain a CNAME record that will forward traffic from admin.exmasbook.com to our website endpoint.

Since our static website is in AWS, we can use AWS Route 53 to serve as our domain’s DNS provider.

Request for Secure Socket Layer (SSL) Certificate:

  • Search for Amazon Certificate Manager (ACM) and click on get started Request a Certificate and select Request a public certificate.
  • Enter the domain name we registered earlier and keep rest other parameters as it is. Click on Request button.
  • In order to validate the domain, we need to add a CNAME record to the DNS configuration of our domain.

Setting up the record depends on the provider. But since we have created a hosted zone in Route 53 earlier, click on the Create record in Route 53 button. Doing so will automatically add the record to the hosted zone.

  • Click on the Create button in the pop-up window to finalize creating the record in Route 53 and click on Continue button.
  • Next, we can see the Pending validation status, which indicates the certificate manager is trying to validate the ownership of the domain.

Once validate, the license will be issued, and the status will change to Issued.

Use CloudFront to serve a static website hosted on Amazon S3:

  • To serve a secure version of the website, we can use Amazon CloudFront which are AWS Content Delivery Network (CDN) service to serve the content of your static website being hosted on Amazon S3.
  • Create a CloudFront distribution.
  • Set an origin domain by entering the S3 bucket endpoint in the Origin domain field. The origin domain indicates where our website content is stored.
  • In the Default cache behaviour section select the Redirect HTTP to HTTPS option under Viewer protocol policy.
  • In the Settings section click on Add item and set our domain name for secure access to your website rather than the domain name CloudFront assigns to the distribution.
  • Write domain name (admin.examsbook.com) in the input field below the Alternate domain (CNAME) section. Also, select the certificate that was issued to our domain earlier in the Custom SSL certificate field.
  • Next, in the default root object field and input the default home page name. We can see below that index.html is the default home page.
  • Leave the rest of the settings default when distributing a static website in CloudFront. Click the Create distribution button at the bottom to create the distribution.

Finally, copy the distribution’s domain name in the Domain name column, and paste it in a browser’s address bar to test if our website shows as secure. We should see our website’s home page displayed by default.

Setting up Our Domain with CloudFront:

CloudFront is still directing traffic to our S3 bucket endpoint; it’s not using our custom domain.

We want to use our own domain in order to distribute our website instead of the one provided by CloudFront. If so, we need to create an CNAME record for the domain name we previously registered.

  • Click on Hosted zone under DNS management in Route 53 dashboard to access our hosted zone(s) list.
  • On the Hosted zones page, click on your domain name in the table. Doing so will redirect us to a page where we’ll create a CNAME record type. CNAME record routes this domain’s incoming traffic to your CloudFront distribution.
  • Now, select your CloudFront distribution domain name in the Choose distribution field, and click on the Create records button.

Once the record is successfully created then we can navigate to our website via the custom domain you configured.

Conclusion

Throughout this article, we’ve learned how to use some AWS services to host our static website.

We’ve also experienced securing our website with an SSL certificate and optimizing our website’s distribution with CloudFront.

Share:
0
+0