Deploying Web Apps Quickly on Amazon EC2 With Serve and PM2

Julian Alexander Murillo
May 2 · 7 min read

One thing I have always wanted to be able to do was to deploy web applications quickly, whether they are proofs of concept or simply pet projects, I wanted to be able to deploy them fast and update them quick. Well thanks to Amazon EC2 and NodeJS this is not only possible, it is actually very easy to do. In the following tutorial I will be showing you how to deploy your own front-end application in no time with some simple tips and a couple of very useful tools that surely you will continue using on everyday basis.

First to be able to do this you need at least an Amazon Web Services account with EC2 service included but even if you don’t have one this tutorial also applies for any other Linux server.

1. Push your code into a repository

First of all to be able to have your code on your Amazon EC2 instance is very recommended that you push it somewhere, GitHub is one alternative but if you have GitLab or Bitbucket you can still do exactly the same thing, the idea here is to have a place where you can download your code from your Amazon EC2 instance. To push your code into a repository we are going to follow the same steps GitHub gives us as soon as we create a new repository:

$ git init -b main
$ git add .
$ git commit -m "First commit"
$ git remote add origin [your repo url goes here]
$ git push -u origin main

With this we will have our repository pushed into the main branch waiting to be used somewhere else.

2. Connect to your Amazon EC2 instance

There are several ways to connect to your Amazon EC2 instance, however in this article we are going to be practical, we are going to go to “Instances”, select our EC2 instance and then click on the “Connect” button, once you are in the next screen select the next orange “Connect” button and this will take you to another screen with a SSH console. If you have not created your amazon EC2 instance yet you can follow this guide.

Once you are logged into this SSH console is time to pull your code.

3. Clone your GitHub repository inside the EC2 instance

Inside the Amazon EC2 SSH console we can go and add our code in, to do that we can use the following command:

$ git clone [your repo url goes here]

Once you are gather all the repo information you can go in and compile it, depending of what you are using (ReactJS, VueJS, AngularJS, etc.) you should have a command to compile all the assets, in my case the command that does that is yarn build however we have a problem here, NodeJS is not installed by default on EC2 servers, to install it we are going to use NVM (Node Version Manager).

4. Install NVM

To install NVM we can use the following command:

$ curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.38.0/install.sh | bash

After installing it make sure the nvm command is available to use with nvm --version , if nothing pops up or the console says that the command is not recognizable try closing the session and connecting to the SSH server again.

Once NVM is installed the first thing you should do is to install the NodeJS version your code runs in, in my case it is the12.9.1 , so to get this version the only thing that we should do is to use the following command:

$ nvm install 14.15.1
$ nvm use 14.15.1

After that we can use our node and npm commands as usual, if you feel more comfortable using yarn than npm you can install it with the following command:

$ npm i -g yarn

5. Install the ‘serve’ package globally

The serve package will help us ‘deploy’ the compiled version of our code as it were deployed on a static server, this has many advantages in your local environment as in your server. To install this library the only thing that you need to do is to install it using the following command:

$ npm i -g serve

Serve allows you to deploy your application under the 5000 port, however you can specify another one if you need to with the following command:

$ serve -l 1234

Also you can pick the folder you want to serve if you don’t want to serve the directory you are currently in:

$ serve aFolder

6. Install the ‘PM2’ package globally

The PM2 package is a tool that will allow us to create processes that run in the background of the server, this is because if we run our application with the serve command and then we close the SSH console, the application will stop running because it was active only on the session we were in, to avoid this problem and make the instance run indefinitely a process that runs in background needs to be created.

To install PM2 the only thing that we need to do is to run the following command:

$ npm i -g pm2

Once installed we have all the tools we need to deploy our application on an Amazon EC2 instance.

7. Compile your web application

To be able to serve our application as we see on the point number 3 we need to compile it, as I said in my case the compilation command is the following:

$ yarn build

Once I run this command the resulting code of my app will be created under the dist folder so if I need to serve it I can run the following serve command:

$ serve dist

The message that will appear on the console should be similar to the following:

   ┌───────────────────────────────────────────────────┐
│ │
│ Serving! │
│ │
│ - Local: http://localhost:5000
│ - On Your Network: http://192.168.20.27:5000
│ │
│ Copied local address to clipboard! │
│ │
└───────────────────────────────────────────────────┘

Meaning that your server is currently running under the 5000 port however if we go to the URL that Amazon give us (under the Public IPv4 DNS section on instance details) and we go to the 5000 port we won’t see anything, this is because of Amazon security restrictions all our ports are closed, so the only thing we need to do now is open just the 5000 port.

8. Open Amazon EC2 ports

To open the 5000 port on Amazon EC2 we go to the main EC2 page and scroll down until see the “Network and Security” section, on it we select the “Security Groups” link.

Once in there we select the security group our instance is using (we can check what is the name of it on the “Security” tab on instance information), once we are there we select the “Add rule” button and on “Type” we select “Custom TCP”, on “Port range” we type 5000 and then on “Source” we select “Anywere”, once we are done we select “Save rules”.

Security group configuration

Now after doing this if we run the serve dist command again and go the instance url we will be able to see our site running, however we need the site to be running permanently, that’s why we are going to create a process based on our serve command with PM2.

9. Create a PM2 process based on your serve command

To create a PM2 process based on our serve command we need to use the following command:

$ pm2 start serve dist --name running_app

The first part of the command specifies that we are starting a PM2 process, the serve dist part is the command we use to run our server and the --name running_app is the name of the process we are creating. Once we do this, a new process will be created running our app, if you go to your app url it should keep running even if you close your SSH terminal.

You can list, stop or start your process with the following commands respectively:

$ pm2 list
$ pm2 stop running_app
$ pm2 start running_app

One advantage of using PM2 is that you can have more than one process running, you can create another process to run several applications at the same time and if you want to automate your deploy process a little bit more you can add a cron job to schedule your updates and code compilation automatically.

Conclusions

Right now there are many services that can help you mount and deploy static websites, however sometimes due to company restrictions, lack of trust or control we can’t use them and the only thing we are left with is a pure simple Linux/Unix server, this tutorial was made to show you that there is still a way to get your application up and running using the latest technologies and that using Amazon EC2 is just a minor detail, if you need to deploy your application in another Linux server you can do it following these same steps.

I really hope this tutorial have helped you to learn something that you didn’t know before and that it has provide you with tools that you will use and recommend in the future.

Until next time.

Geek Culture

Proud to geek out.

Sign up for Geek Culture Hits

By Geek Culture

Subscribe to receive top 10 most read stories of Geek Culture — delivered straight into your inbox, once a week. Take a look.

By signing up, you will create a Medium account if you don’t already have one. Review our Privacy Policy for more information about our privacy practices.

Check your inbox
Medium sent you an email at to complete your subscription.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store