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 with your own bucket name and with the region that you want to create the bucket in:
aws s3 mb s3://<bucket_name> --region=<region> 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:
aws s3 website s3://<bucket_name> --index-document index.html --error-document index.html 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:
{ "Version": "2012-10-17", "Statement": [ { "Sid": "PublicReadGetObject", "Effect": "Allow", "Principal": "*", "Action": [ "s3:GetObject" ], "Resource": [ "arn:aws:s3:::<bucket_name>/*" ] } ] } Then run this command to attach the policy to your S3 bucket:
aws s3api put-bucket-policy --bucket=<bucket_name> --policy file://policy.json 3. Deploy your Angular app to AWS S3
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:
ng build aws s3 sync dist/<app_name> s3://<bucket_name> 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 🎉