Deploying your Angular app to AWS S3 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 to AWS S3 with just a few simple commands.
Prerequisites:
1. Create an AWS S3 bucket
Creating a new AWS 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 AWS 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:
{% 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 %}
