The purpose of this series is to familiarize myself with hosting a website inside Amazon Web Services (AWS). But not just any website… This website will have it’s foundation built on React and node.js… The best part is the content of this site and I’m not talking “Hello World!” (well maybe at first)… This site will be a JavaScript WebGL game using the Phaser game engine!

The majority of this post will be based on getting setup with AWS. Once we get the stage set, we can begin work on the meat of this project.

Let’s get started…

Create Your Account

1. Creating a new account is relatively painless, though the free tier still requires a credit card on file (in case you go over the alotted usage).
2. AWS has several project guides to start with, it looks like “Deploying a Node.js Web App” is a good starting point!

Also according to this guide, the estimated cost (assuming you are within the free tier) is $0.04. We are taking a few shortcuts though and not include a database (yet) for this exercise.

Create the Environment via Elastic Beanstalk

This is literally as easy as clicking a button. From the AWS console:

1. Select ‘Build a web app’
2. Choose an application name
3. Choose a platform (node.js in this case but others such as .NET (Windows/IIS), Java and PHP are available)
4. Choose a source bundle (ZIP file with the source code, we are going to use the code sample)
5. Select ‘Create application’

VOILA!!! After a few minutes the environment is setup and ready to go.

Now, it’s not entirely as easy as clicking a button, at least not on the AWS side. What it’s actually doing is creating an AWS Elastic Beanstalk environment. Let’s break down what is actually being created inside the beanstalk:

• Elastic Load Balancer - Distributes application traffic accross multiple (EC2 instances in this case) healthy targets.
• Autoscaling Group - Web service used for automatically scaling out EC2 instances based on user defined settings.
• EC2 Instance(s) - Think of these as tiny servers hosting the code.
• EC2 security group - Allows traffic to the load balancer via port 80 (the only port configured by default)
• Amazon S3 Bucket - File storage
• Amazon Cloudwatch - Alerts for load on the instances
• AWS CloudFormation - Manages AWS resources for the application.
• Domain Name - AWS domain/url for you to access the application.

In a nutshell, it’s stitching together a server (a la Frankenstein’s Monster) for the application.

Environment Management

From the application console there are a nice suite of tools for managing the app.

Some of the key management resources:

• Configuration - If you need to scale up or out, you can simply update the number of instances in your group and/or increase the computing power of each instance.
• Logs - Informational logging for the environment.
• Health - Monitor the server status, requests/sec, app latency and average load.
• Monitoring - Statistics for the environment such as network and CPU usage over time.

Alternative Environment Settings

For those power users wanting more granular control, there are many configuration available when setting up a new environment. Our default “free tier” app only uses a single EC2 instance with t1.micro processing power (very puny), this can be scaled up from the start to several instances running more processing power. Other ports my be configured as well, such as 443 for HTTPS. If the app were to require a database for storage, that can be configured as well (such as Amazon DynamoDB - Amazon’s NoSQL database service).

---

In hindsight, it doesn’t look like we’ve done a whole lot… aside from playing around in the AWS app console to create a highly scaleable web application. In the next post we’ll actually get into some coding with node.js and react so keep an eye out for Set Your Phasers to…the Cloud!!! (Part 2 - The Framework)!