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:
Below are the steps to follow the process:
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 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.
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.
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.
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.
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.
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.
Once validate, the license will be issued, and the status will change to Issued.
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.
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.
Once the record is successfully created then we can navigate to our website via the custom domain you configured.
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.