Deploying Angular App to S3 and CloudFront with GitHub Actions: Part 1

6 min readApr 10, 2023

Angular is a powerful and popular JavaScript framework for building web applications. One of the key benefits of Angular is its ability to easily deploy applications to a wide range of platforms, including Amazon Web Services (AWS).

In this blog post, I’ll walk through the building and deploying of an Angular app to AWS S3 and CloudFront using GitHub Actions and configuring a custom domain for your application.

By the end of this post, you’ll have a solid understanding of building and deploying your Angular applications to AWS with a custom domain, making it easy to share your app with the world.

Prerequisites

An AWS account
Domain (Not mandatory)

Step 1: Create an S3 bucket

Login to your AWS account and create an S3 bucket with the name of your choice and availability. Here I’m creating a bucket with the name angular-github-actions-demo.

Uncheck the Block all public access

Leave everything default and click on Create bucket.

Step 2: Generate SSL certificate

In this step, we will generate an SSL certificate with AWS Certificate Manager. In the search bar, look for Certificate Manager and click on Request a certificate.

We are creating this certificate for CloudFront, so ensure you are in N. Virginia (us-east-1) region

Select Request a public certificate and click on Next.

Now add the list of domains, or you can generate a wild card certificate for the domain and all the sub-domains. Leave everything else to default and click on Request.

To complete the verification, we have to add the CNAME records provided by AWS

My domain’s DNS is hosted on Cloudflare so I will update the record there.

If everything goes well, The certificate will be issued in 5 min.

Step 3: Create Cloudfront Distribution

In this step, we will create a CloudFront distribution for the S3 bucket we created in Step 1. Look for Cloudfront in the search bar and click on Create distribution.

In the Origin domain, select the bucket we created in Step 1

In the Origin access, select Origin access control settings (recommended). It will restrict the bucket access only to Cloudfront.

Click on Create control setting, leave everything default and Create the setting.

It will automatically select the configuration that we just created.

Now scroll down, and under Viewer protocol policy, select Redirect HTTP to HTTPS.

In the Alternate domain name (CNAME), enter the custom domain where you want to host the angular app and select the certificate we created in the previous step in the Custom SSL certificate.

In the Default root object, put the root object of your app. Here I’m putting index.html.

The Description is optional, but adding some identifiers is recommended. Leave everything else to default and click on Create.

You will see a pop-up asking The S3 bucket policy needs to be updated

Click on Copy Policy, go to the S3 bucket we created in Step 1 and Click the Permissions Tab.

Scroll down and Click on Edit under the Bucket Policy. Paste the policy and click on Save Changes.

Now go back to the CloudFront distribution and click the Error Pages tab.

Click on Create custom error response, and add an error page with the following configuration.

Custom error pages help you improve the customer experience by redirecting to the home page or another page when requesting a non-existing object.

Step 4: Creating an IAM user

In your AWS account, we will create an IAM user with permission to upload objects to the S3 bucket and invalidate the CloudFront cache. Make sure you are following the principle of limited permissions.

Go to IAM and click on the Policies

Select Create policies, put the following policy as JSON, and update the ACCOUNT_ID and DISTRIBUTION_ID.

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Effect": "Allow",
            "Action": [
                "s3:*"
            ],
            "Resource": [
                "arn:aws:s3:::angular-github-actions-demo",
                "arn:aws:s3:::angular-github-actions-demo/*"
            ]
        },
        {
            "Effect": "Allow",
            "Action": [
                "cloudfront:*"
            ],
            "Resource": [
              "arn:aws:cloudfront::ACCOUNT_IA:distribution/DESTRIBUTION_ID"
            ]
        }
    ]
}

In the next steps, add a tag and Name to the policy.

Now click on Users in the left Menu, and Add a new User.

On the next page, select Attach policies directly and search for the policy we just created.

Click on Next and Create the User.

Now in the list of users, select the User we just created and select the Security credentials tab.

Scroll down and click on Create access key under the Access keys option. Then select the Command Line Interface (CLI) option and click Next.