April 5, 2020

AWS: Deploy an Angular App

Deploying your Angular app with AWS can be a great choice if you're looking for an inexpensive hosting option that just scales with your audience and/or you're already using AWS for other things anyways. In this post I'll show you how to use the AWS CLI to deploy your Angular app within minutes.

Prerequisites:

  • AWS account with permissions to create and configure S3 buckets
  • AWS CLI
  • Angular app that is ready to be deployed

1. Create an S3 bucket

Creating a new S3 bucket using the AWS CLI is as easy as it gets, just run the following command and make sure to replace <bucket_name> with your own bucket name and region with the region that you want to create the bucket in:

{% c-block language="bash" %}
aws s3 mb s3://<bucket_name> --region=<region>
{% c-block-end %}

2. Configure S3 bucket for static web hosting

Next, the bucket needs to be configured for static web hosting. Luckily, the AWS CLI has a single command that does most of the work for you already:

{% c-block language="bash" %}
aws s3 website s3://<bucket_name> --index-document index.html --error-document index.html
{% c-block-end %}

To make your Angular app available to the public, all objects in the S3 bucket need to be publicly accessible. To set that up, create a document policy.json with the following content and make sure to fill in your bucket name:

{% c-block language="json" %}
{
   "Version": "2012-10-17",
   "Statement": [
       {
           "Sid": "PublicReadGetObject",
           "Effect": "Allow",
           "Principal": "*",
           "Action": [
               "s3:GetObject"
           ],
           "Resource": [
               "arn:aws:s3:::<bucket_name>/*"
           ]
       }
   ]
}
{% c-block-end %}

Then run this command to attach the policy to your S3 bucket:

{% c-block language="bash" %}
aws s3api put-bucket-policy --bucket=<bucket_name> --policy file://policy.json
{% c-block-end %}

3. Deploy your Angular app

Now you're ready to deploy your Angular app to the S3 bucket. Navigate to the root directory of your Angular app and run the following commands to build and deploy your Angular app:

{% c-block language="bash" %}
ng build
aws s3 sync dist/<app_name> s3://<bucket_name>
{% c-block-end %}

That's it! Open http://<bucket_name>.s3-website.<region>.amazonaws.com in your browser and you'll see your Angular app deployed to AWS S3: 🎉

AWS: Deploy an Angular App

Latest Posts