Vue.js + Node.js on AWS - How to Deploy a MEVN Stack App to Amazon EC2

In this tutorial we're going to setup a production ready web server from scratch on AWS EC2 (Elastic Compute Cloud), then deploy a custom MEVN Stack application to it that supports user registration and authentication.

What is a MEVN Stack App?

A MEVN Stack application is made up of a front-end app built with Vue.js that connects to a back-end api built with Node.js + Express + MongoDB, hence the name MEVN Stack (Mongo, Express, Vue, Node). Other variations of the stack include the MEAN Stack that has an Angular front-end, and the MERN Stack that has a React front-end.

Scope of this deployment tutorial

This tutorial will be focused on setting up the server on AWS EC2, then deploying and configuring the front-end and back-end pieces of the MEVN stack app to work together. For more in-depth information about the Vue.js app or Node.js api used in this post, check out the following tutorials which cover them in detail:

• Vue.js + Vuex - User Registration and Login Tutorial & Example
• NodeJS + MongoDB - Simple API for Authentication, Registration and User Management

AWS Deployment Tutorial Contents

• Create a new Ubuntu server on AWS EC2
• Connect to Ubuntu EC2 instance via SSH
• Setup server with Node.js + MongoDB + NGINX
• Deploy Node.js + MongoDB back-end API
• Deploy Vue + Vuex Front-end app
• Configure NGINX to serve API and front-end
• Test the MEVN Stack app in a browser

Create a new Ubuntu Server on AWS EC2

 Watch this step on YouTube

Before doing anything we need a server that we can work on, follow these steps to spin up a new Ubuntu 18.04 server instance on AWS EC2.

1. Sign into the AWS Management Console at https://aws.amazon.com/console/. If you don't have an account yet click the "Create a Free Account" button and follow the prompts.
2. Go to the EC2 Service section.
3. Click the "Launch Instance" button.
4. Choose AMI - Check the "Free tier only" checkbox, enter "Ubuntu" in search box and press enter, then select the "Ubuntu Server 18.04" Amazon Machine Image (AMI).
5. Choose Instance Type - Select the "t2.micro" (Free tier eligible) instance type and click "Configure Security Group" in the top menu.
6. Configure Security Group - Add a new rule to allow HTTP traffic then click "Review and Launch".
7. Review - Click Launch
8. Select "Create a new key pair", enter a name for the key pair (e.g. "my-aws-key") and click "Download Key Pair" to download the private key, you will use this to connect to the server via SSH.
9. Click "Launch Instances", then scroll to the bottom of the page and click "View Instances" to see details of the new Ubuntu EC2 instance that is launching.

Connect to Ubuntu EC2 Instance via SSH

 Watch this step on YouTube

Once the EC2 instance reaches a running state you can connect to it via SSH using the private key downloaded in the previous step.

1. Open a terminal window and update the permissions of the private key file with the command chmod 400 <path-to-key-file> e.g. chmod 400 ~/Downloads/my-aws-key.pem, the key must not be publicly viewable for SSH to work.
2. Copy the "Public DNS (IPv4)" property from the instance description tab in the AWS Console, then connect to the instance from the terminal window with the command ssh -i <path-to-key-file> ubuntu@<domain name> e.g. ssh -i ~/Downloads/my-aws-key.pem [email protected]
3. Enter yes to the prompt "Are you sure you want to continue connecting (yes/no)?" to add the url to your list of known hosts.

NOTE: If you're using Windows you can connect to your instance via SSH using the PuTTY SSH client, for instructions see Connect Using PuTTY in the AWS docs.

Setup Web Server with Node.js + MongoDB + NGINX

 Watch this step on YouTube

The below command executes a script to automatically setup and configure a production ready MEVN Stack web server on Ubuntu that includes Node.js, MongoDB, PM2, NGINX and UFW.

For more details about how the script works see Setup Node.js + MongoDB Production Server on Ubuntu.

While connected to the new AWS EC2 instance in the terminal window, run the following command:
curl https://gist.githubusercontent.com/cornflourblue/f0abd30f47d96d6ff127fe8a9e5bbd9f/raw/e3047c9dc3ce8b796e7354c92d2c47ce61981d2f/setup-nodejs-mongodb-production-server-on-ubuntu-1804.sh | sudo bash

For instructions on how to securely connect to the remote MongoDB server from your local machine using Mongo Shell or MongoDB Compass see Connect to remote MongoDB on AWS EC2 simply and securely via SSH tunnel.

Deploy Node.js + MongoDB Back-end API

 Watch this step on YouTube

Follow these steps to setup the Node.js API on the server and configure NGINX to enable access to it.

1. Clone the Node.js + MongoDB API project into the /opt/back-end directory with the command sudo git clone https://github.com/cornflourblue/node-mongo-registration-login-api /opt/back-end
2. Navigate into the back-end directory and install all required npm packages with the command cd /opt/back-end && sudo npm install
3. Start the API using the PM2 process manager with command sudo pm2 start server.js

The API is now running on Node.js under the PM2 process manager and listening on port 4000. Only port 80 (HTTP) is publicly accessible on the server so we can't hit the API yet, this will be possible after we've configured NGINX as a reverse proxy to pass through HTTP traffic to the api (more on this shortly).

Deploy Vue.js + Vuex Front-end app

 Watch this step on YouTube

Follow these steps to setup the Vue.js application on the server.

1. Clone the Vue + Vuex project into the /opt/front-end directory with the command sudo git clone https://github.com/cornflourblue/vue-vuex-registration-login-example.git /opt/front-end
2. Navigate into the front-end directory and install all required npm packages with the command cd /opt/front-end && sudo npm install
3. Update the app to use real backend API:
   • Run the command sudo nano /opt/front-end/src/index.js to open the main vue entry file in the nano text editor.
   • Delete the following lines from the file to remove the fake backend that the vue app uses by default:

     // setup fake backend
     import { configureFakeBackend } from './_helpers';
     configureFakeBackend();

   • Save the file by pressing ctrl + x and selecting Yes to save.
4. Configure the path to API:
   • Run the command sudo nano /opt/front-end/webpack.config.js to open the webpack config file in the nano text editor.
   • Change the apiUrl config property to '/api' like below, this is the public path we will configure in NGINX in the next section:

     // global app config object
     config: JSON.stringify({
         apiUrl: '/api'
     })

   • Save the file by pressing ctrl + x and selecting Yes to save.
5. Build the front end app with the command sudo npm run build

The Vue.js app is now built and ready to be served from the /opt/front-end/dist directory, in the next step we'll configure our NGINX web server to enable access to it.

Configure NGINX to serve the Node.js API and Vue.js front-end

 Watch this step on YouTube

Since our MEVN Stack application is made up of two separate projects that both need to be accessed via the same port (HTTP on port 80), we're going to use NGINX as our public facing web server to receive requests for both the front-end and back-end, and decide where to send each request based on its path. Requests beginning with the path /api/* will be proxied through to the Node.js api running on port 4000, while other requests will serve the Vue.js front-end app and associated files (js/css/images).

Follow these steps to configure NGINX for the MEVN stack app.

1. Delete the default NGINX site config file with the command sudo rm /etc/nginx/sites-available/default
2. Launch the nano text editor to create an new default site config file with sudo nano /etc/nginx/sites-available/default
3. Paste in the following config:

   server {
     listen 80 default_server;
     server_name _;
   
     # vue app & front-end files
     location / {
       root /opt/front-end/dist;
       try_files $uri /index.html;
     }
   
     # node api reverse proxy
     location /api/ {
       proxy_pass http://localhost:4000/;
     }
   }

4. Save the file by pressing ctrl + x and selecting Yes to save.
5. Restart NGINX with the command sudo systemctl restart nginx

NGINX Config Reference

server { ... } defines a server block which contains the configuration for a virtual server within NGINX.

listen 80 default_server; uses the listen directive to configure the virtual server to accept requests on port 80 and sets it as the default virtual server on this NGINX server.

server_name _; uses the server_name directive to set the server name to an underscore (_) to make this server block a catch-all block that matches any domain name that doesn't match another more specific server block. Since this example has only one server block it will match all domain names.

location / { ... } defines a location block which contains the configuration for requests that have a URI beginning with a forward slash (/), unless the request URI matches another more specific location block.

root /opt/front-end/dist; uses the root directive to set the root directory to the front end dist folder (/opt/front-end/dist) for requests matching this location block.

try_files $uri /index.html; uses the try_files directive to first check for the existence of a file matching the request URI ($uri) and returning it if there is one. If no file matches the request URI then it defaults to returning /index.html.

location /api/ { ... } defines a location block which contains the configuration for requests that have a URI beginning with /api/.

proxy_pass http://localhost:4000/; uses the proxy_pass directive to proxy requests beginning with /api/ through to the Node.js API running at http://localhost:4000/.

Test your new MEVN Stack application running on AWS

 Watch this step on YouTube

Enter the hostname of your AWS EC2 instance in a browser to access and test your new MEVN stack application.

The hostname is the "Public DNS (IPv4)" property located on the instance description tab in the AWS Console.