Running an Angular site on AWS

Recently, I was inspired to learn Angular. My personal site was previously only running on static HTML, so re-building it in Angular was a good challenge which helped me learn the basics. After following the tutorials on Angular.io, I was able to get my site up and running locally using the Angular CLI. But, how could I actually host what I'd created?

I started with a very basic EC2 instance running the Amazon Linux image first, and just copied my code over to it manually. It "worked", but... it certainly wasn't the most efficient way to deploy or maintain my website. I spent some time researching and trying more tools, looking for better ways to host my site. This blog post details only some of the various tools available in AWS for web hosting, and has been written to help others get up and running as quickly as possible.

There are other hosting/cloud services out there (I tried Google Cloud and was able to get something running in less than an hour), but this post will focus on AWS. It's assumed that you already know how to build your Angular app, and that you have an AWS account.

Option 1. Hosting in S3

This is certainly the easiest (and cheapest) option. Amazon S3 is simple, flat file storage, which is perfect for running static websites with no back-end processing. For most personal websites, this will suit the need just fine, and may end up costing less than a dollar a month in ongoing hosting (your usage costs may vary, but this is a cheap option).

To do this through AWS CLI -

1. Download and set up the AWS CLI. You'll need to configure some user credentials, so that your CLI can access your Amazon account. It's recommended to create a new user (via IAM) and give the user access only to what's needed. In this case, the user will need access to S3. You'll also need to configure your default region, which is where your S3 bucket will be created.
2. In a terminal window, build your app (npm run build), and then navigate to the root dist folder which was generated.
3. Create a new S3 bucket to host your app with the following command - aws s3 mb s3://(bucketname), e.g. aws s3 mb s3://mybucket
• It's important to note that bucket names are unique, like a domain name. You might not get your first preference!
4. Upload your files and make them public facing with the following command - aws s3 sync . s3://(bucketname) --acl public-read
• The command sync syncronises files between two locations. The . selects the current directory, so this command is saying syncronise everything in this folder to my AWS bucket.
• The command --acl is modifying the Access Control List of the bucket, and allowing public-read access. This is what allows files in the bucket to be accessed by anyone via a link. Don't set this on a bucket where you want the contents to be private.
5. Finally, make the bucket act as a website with the following command - aws s3 website s3://(bucketname) --index-document ../.html --error-document ../.html
• The command --index-document sets the main landing page of the website. In this case, it will be ../.html
• The command --error-document sets the page which which should be used in the case of an error (e.g. 404). In this example, not setting this will mean you can't refresh on a page other than your root page. Setting it to ../.html will handle the refresh or links.

And done! You can now access your website with the following URL- http://(bucketname).s3-website-(region).amazonaws.com. (e.g. for S3 buckets hosted in the US East (N. Virginia) region, your URL would look like http://(bucketname).s3-website-us-east-1.amazonaws.com).

Option 2. Using Elastic Beanstalk to host on servers

S3 is a good option for static websites. If your app relies on server-side processing, then you'll need something which can do this processing. One option is to run EC2 instances via Elastic Beanstalk. This can get expensive if not properly managed, but is relatively easy to configure and maintain.

This part will detail how to use Elastic Beanstalk using the AWS Console, rather than the CLI.

1. Start by zipping your built code. You should zip the root folder (as if you were to unzip to the root folder of your web server).
2. In the AWS Console, click Elastic Beanstalk (under the "Compute" category).
3. At the top-right of the screen, click "Create New Application".
4. Give your application a name, and then click "Create".
5. The new page will show you all environments for your new application. Since you don't have any, click "Create one now". Leave "Web server environment" selected and click "Select".
6. The next page will allow you to set basic configuration for your new environment. From the "Platform" drop-down, choose Node.js. Under "Application Code", click "Upload" and upload your zipped source code.
• If you click "Configure more options", you'll see all the various pre-configured settings that are in place for your new environment. By default, the cheapest options are selected, but this will still cost more than S3 would.
• You can change any of these settings, but it's not necessary for a basic environment.
7. Click "Create Environment". Now wait patiently - your new environment will take a few minutes to start up!
8. When it's finished, you should have a healthy Green environment. Click your environment's URL (near the top of the screen) to see your app working.

Elastic Beanstalk is very straight-forward to get up and running, but can be configured to be very robust by using load balancers and auto-scaling, or immutable deployments.

If you no longer want to run your environment, you should terminate it (via the "Actions" menu at the top-right) to stop any new charges on your account.