Deploying Web Apps Quickly on Amazon EC2 With Serve and PM2
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 the
12.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
npm commands as usual, if you feel more comfortable using
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 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
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”.
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.
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.