A few months ago, I deployed an AngularJS app called SeafoodCheck on an Amazon EC2 instance. It wasn’t a trivial task and I had to go through various tutorial and stackoverflow pages to get it working. To help people in similar positions as I was, I created this “Deploying an AngularJS app to Amazon EC2” tutorial.
This serves as the Part II of this tutorial aiming to provide a step by step guide in running an Angular JS app on an Amazon EC2 instance. If you don’t know how to set up an Amazon EC instance, Part I of the tutorial published ealier described how to set up an Amazon EC2 instance.
- An AWS EC2 instance set up
- Basic Git knowledge and a working Github account. Hello World on Git and Github if you need.
- Basic command line knowledge
- Basic knowledge of Node.js
Fork AngularJS app code
SSH into EC2 and git clone code
Now SSH into your EC2 instance. Type
ls to see the directories. You should see something like the following:
Now do the following:
chown steps are very important since the default owner for these two directories, which will be used later to write files, are root. If you don’t change the ownership, you have to install everything under root and a lot of permission problems will pop up later.
Run the app
Before you run the app, edit the
package.json using your favorite editor. Replace
0.0.0.0. This step and the Security Access steps in the next section expose your app to the public internet.
Now you can run the app by the following:
You should see something in the terminal like:
Your Angular app is now running. However, you need to configure the security access on AWS before you can let the world to see your app for real.
Open up your AWS EC2 dashboard, click Security Groups on the left panel. Click on the row that has Group name MEAN powered by Bitnami. Then click the inbound tab beneath. We need to customize the rules to make port 8000 accessible. Click Add Rule, leave Protocol default as TCP, in Port Range enter 8000, and Source choose Anywhere. Click Save. Refresh and you should see the following:
Check out your running app on browser
After we give the security access. We can now access our app through a brower. Type in your Public DNS:8000. In my case it’s http://ec2-34-210-41-187.us-west-2.compute.amazonaws.com:8000. Hooray! You should now see the Google Phone Gallery up!
To keep the app running continuouly without being affected by logging out of EC2 instance. We use the node package
ctrl+c to stop the existing app running. Install the package:
And then start the app by:
To stop the app. Use
forever list then
forever stop with the id, e.g.
forever stop 12305.