Deployment Series Part 1: How to Deploy an Angular 2 or React Application With AWS with EC2

If you have been searching on how to deploy an Angular2 app on AWS, you’ll find out that there are numerous articles out there and you’ll soon be overwhelmed with too much information. Now it’s my turn to also overwhelm the majority of you struggling out there. I’m going to go through the steps to deploy your Angular2 app step by step, and hopefully you’ll leave less confused than before. React peeps should be able to follow along as well, it’s even easier with React.

STEP ONE — Installing Ubuntu

If you’re using Windows 10, you will want to install Bash on Ubuntu:http://www.howtogeek.com/249966/how-to-install-and-use-the-linux-bash-shell-on-windows-10/. If you’re not then you’re life is easy, too easy I say.

Step 1- Configure your key-pair for your EC2.

So here’s the deal. You have a computer. Amazon has a computer. Your computer can use terminal. Amazon’s computer can use terminal. You can use git on your computer, Amazon can use git on their computer. You can host your application at localhost:8000, Amazon can host your application at someIpAddress:8000. You can login to your computer to do the above with your password, and you can login to Amazon’s computer to do the above with a password. The question, then, is how do you login to Amazon’s remote computer from your local computer? Essentially, you need a password to login to their computer. This is done by creating a key pair for your EC2(Amazon’s remote computer). Go to EC2 and click on the key pair tab. Create a new key pair with the name: your_angular2_application_name. You will automatically be downloading a pem file. The pem file is the password you use to login to Amazon’s remote computer, which we will get to later. *Note you might need to chmod 0400 for the pem file, google that if you run into permissions error.

Step 2-Configure your Security Group for your EC2 on AWS

Click on EC2. Go to your security groups and create a new security group. What’s a security group? Let’s say you have a server and you only want to receive incoming HTTP requests from your client angular2 app, and not from other people out in the world who wants to break into your server. Security groups allow you to specify what kind of requests (HTTP, SSL, etc) are inbounded (and outbounded)to your EC2 instance(which host your server or your client). In our case, we want to let our client listen to all HTTP requests from the public(so that everyone can see our client application). Let’s name your security group something along the lines of: angular2_application_name_client. Add a description like: “allow http requests from everywhere”. Leave the default VPS. For inbound, add a rule: type: All Traffic destionation: Everywhere.

Step 3-Configure your EC2 Instance

Create a new EC2 instance by clicking on instances in the side bar. Choose the first option for your AMI (which basically allows you to create multiple instances of your server, just in case one of your servers break down). Choose the free tier for now (scale up once you have millions of people coming to your awesome website and give me royalties for helping you). Stick to defaults for your instance details. Don’t add extra storage for now. Now on step 5, you have an option to tag your instance, which is basically meta data so you can track your instances. “name” is given by default, give it a value of something like angular2_application_name_client. Also other common tags to give are “role”, which can have a value of “client application”, and “env” which can be “dev” or “production” environment. On step 6, choose your security group you just created in step 2. Finally you can choose your existing key pair in step 1. Now, go your instance details, and look for your IPV4 address. Copy that for step 4.

Step 4-SSH into your EC2

A.You have a computer.

B.You can login to your computer.

C. Then you can use git to clone your repo.

D.Then you can use npm to start your application. If you can do all of that, then we can continue to our next step.

a.You now have a remote computer.

b.You can login to your remote computer. To do so, open terminal and run “$ssh -i absolute_path_to_pem_file_you_created_on_step_1 copied_IPV4_address_from_step_3 -l -ec2-user”. It’ll ask you to verify something, just say yes. Now you’re logged in!

c. Can you use git to clone your repo into your remote computer? No! You have to install git and node first. Follow this guide and skip to the last step: http://iconof.com/blog/how-to-install-setup-node-js-on-amazon-aws-ec2-complete-guide/. But wait! Don’t use vim, use nano, it’ll be easier to edit. Use nano /etc/sudoers. Use control x to exit after you made the changes they described. Make sure to have the lastest version of node. Now you have git and node installed on your computer! Now you can git clone your repo into your root folder! Don’t do this yet, I’ll list all the steps in step 5.

d. Can you use npm to start your application? Not for angular2. You usually run ng serve and go to port localhost:4200. Let’s go to the final step!

Step 5 — Starting your Angular2 Application.

  1. “$sudo su” to login as root user
  2. “$cd ~” to cd into your root folder.
  3. “$git clone __your_github_repo_url”
  4. “$cd _new_directory_created_by_git_clone”
  5. “$npm install”
  6. “$npm install -g @angular/cli”
  7. i might be forgetting to include other things you install globally… good luck
  8. “$sudo node — max_old_space_size=2048 ./node_modules/.bin/ng build — prod — aot” to build your dist folder. React People should try just running “$npm build” assuming that build runs webpack.

Let’s stop here. Now that you built your dist folder, we need something to serve up your entire dist folder…. Hmm……….. we usually use our api server to host our static content using something like: express.use(express.static(path to client folder)). If we have our api server hosted separately from our client server (as in on another ec2 instance), then we can’t use it to serve our static files because they’re not in the same directory (unless you have it set up that way). Enter PM2: https://www.digitalocean.com/community/tutorials/how-to-use-pm2-to-setup-a-node-js-production-environment-on-an-ubuntu-vps. PM2 will serve up your entire dist folder using http-server. You first need to install PM2 and http-server: npm install -g pm2 && npm install -g http-server. Finally run

9. “ pm2 start http-server ~/usr/local/bin/http-server — name app — ~/your_cloned_repo_name/dist/ -p 80”. (i.e. whatever folder you cd into on step 4);

Those two long hyphens should have spaces between the words and should be “hyphenhypen”, i.e, “ pm2 start http-server ~/usr/local/bin/http-server 11 name app 11 ~/your_cloned_repo_name/dist/ -p 80”, where the “1” ‘s should be replaced by “-”.Now enter your IPV4 address into your browser to see if it works! When you want to deploy a new repo, just pull and rebase into your cloned repo. Remove your dist folder using “rm -rf dist” and then rebuild it using step 8 above. Then, use command “pm2 list” to see the list of processes, you might want to use “pm2 delete all” to clear it, and then run step 9 again.

Like what you read? Give John Huynh a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.