How to deploy the Vuejs(Quasar Framework) + Python-Flask app using AWS EC2 ubuntu server, PM2, and Nginx?

Introduction:

As we already know, web application development is growing day by day. In this blog, I will show you how we can easily deploy Vuejs Quasar Framework + Python Flask project on the AWS EC2 Ubuntu server using PM2 and Nginx.

Prerequisites:

Before we go into the deployment process, make sure you have the following prerequisites in place:

1. AWS EC2 ubuntu server up and running
2. Nodejs and npm installed on a server
3. Python/Flask installed on a server
4. Global PM2 installed on a server
5. Nginx installed on a server

Deployment Process:

Step 1: Build Vuejs — Quasar Framework Application

Connect to the ec2 server and go inside your project directory and build the Quasar application using the below command:

quasar build

The above command will create a spa folder inside dist like => /dist/spa

Now we need to serve this frontend build using nginx so, we have to copy this spa folder inside /var/www/html/ Use the below command to copy:

sudo cp spa /var/www/html/app-frontend

Step 2: Deploy Python Flask API using PM2

Make sure you have the Flask project ready on the server and virtual env ready with all dependencies installed inside venv.

First, install pm2 using the below command:

npm install pm2@latest -g

For PM2, create a config file on a server named ecosystem.config.js and put the below code inside it.

module.exports = {
  apps: [
    {
      name: 'app-name',
      script: '/home/ubuntu/app-folder/api/venv/bin/gunicorn',
      args: '-b 127.0.0.1:5001 app:app',
      log_type: 'json',
      cwd: '/home/ubuntu/app-folder/api/',
      interpreter: '/home/ubuntu/app-folder/api/venv/bin/python',
      out_file: '/home/ubuntu/logs/app_log_out.log',
      error_file: '/home/ubuntu/logs/app_log_err.log',
    }
  ]
} 

In the above code, we’re telling PM2 which script to run, the current working directory, the interpreter, and where to write output/error logs.

Now we need to reload and restart PM2 using the below commands.

pm2 reload ecosystem.config.js
pm2 restart ecosystem.config.js
pm2 status

Once you restart pm2 and run pm2 status, you should see a table showing the app name and status — online meaning our API is running on the server on port 5001.

Step 3: Configure Nginx

Navigate to the nginx sites-enabled directory:

cd /etc/nginx/sites-enabled/

Inside this, you may have a default file already existing which is the sample config file provided by nginx. Now we need to edit the server section inside this file using an editor like nano/vim and put the below script.

server {
    root /var/www/html;
    index index.html index.htm index.nginx-debian.html;
    server_name abc.com;
    location / {
        root /var/www/html/app-frontend;
        try_files $uri $uri/ /index.html;
    }
    location /api/ {
            proxy_set_header X-Forwarded-For 
            $proxy_add_x_forwarded_for;
            proxy_set_header Host $http_host;
            proxy_redirect off;
            proxy_pass http://127.0.0.1:5001;
    }
}

In the above server blow, I’ve used dummy server_name abc.com. You need to use your own domain and make sure DNS entry is updated with your ec2 server IP in the DNS of your domain.

Last step is to reload and restart nginx using below commands:

sudo service nginx reload
sudo service nginx restart

And your domain is live!

If you have any question feel free to comments on this blow.

Conclusion:

Deployment process looks difficult if you have no knowledge of deployment but using the steps above you can easily deploy the website without any issue. The combination of Vuejs and Quasar on the frontend, along with Python-Flask on the backend, provides a powerful and scalable solution. With PM2 for process management and Nginx as the reverse proxy, your app will be robust and performant, ready to serve users on the web.