Introduction

Deploying your Flask application alongside a Next.js program on a VPS can seem daunting, but with a step-by-step approach, it becomes manageable. In this tutorial, we’ll walk through the process of setting up your VPS to run both your Flask and Next.js applications.

Prerequisites

Before we begin, make sure you have the following:

• A VPS (Virtual Private Server) with SSH access.
• A Flask application with an HTML frontend.
• A Next.js application.
• Basic knowledge of SSH, Git, and command-line interface.

Step 1: Set Up Your VPS

Connect to Your VPS

First, connect to your VPS using SSH. Open your terminal and enter:

ssh your_username@your_vps_ip

Replace your_username and your_vps_ip with your actual VPS username and IP address.

Update and Install Dependencies

Update your package list and install necessary dependencies:

sudo apt update
sudo apt upgrade -y
sudo apt install python3-pip python3-venv nginx git -y

Step 2: Deploy Your Flask App

Clone Your Flask App Repository

Navigate to the directory where you want to store your application and clone your Flask app repository:

cd /var/www
git clone your_flask_app_repository.git
cd your_flask_app_repository

Replace your_flask_app_repository with the URL of your Flask app repository.

Set Up a Virtual Environment

Create and activate a Python virtual environment:

python3 -m venv venv
source venv/bin/activate

Install Flask and Other Dependencies

Install the required packages from your requirements.txt file:

pip install -r requirements.txt

Configure Gunicorn

Install Gunicorn, a Python WSGI HTTP server:

pip install gunicorn

Create a Gunicorn systemd service file:

sudo nano /etc/systemd/system/flaskapp.service

Add the following configuration to the file:

[Unit]
Description=Gunicorn instance to serve Flask app
After=network.target

[Service]
User=your_username
Group=www-data
WorkingDirectory=/var/www/your_flask_app_repository
Environment="PATH=/var/www/your_flask_app_repository/venv/bin"
ExecStart=/var/www/your_flask_app_repository/venv/bin/gunicorn --workers 3 --bind unix:flaskapp.sock -m 007 wsgi:app

[Install]
WantedBy=multi-user.target

Replace your_username and your_flask_app_repository with your actual username and Flask app directory.

Start and Enable the Service

Start and enable the Flask app service:

sudo systemctl start flaskapp
sudo systemctl enable flaskapp

Step 3: Deploy Your Next.js App

Clone Your Next.js App Repository

Navigate to the directory where you want to store your application and clone your Next.js app repository:

cd /var/www
git clone your_nextjs_app_repository.git
cd your_nextjs_app_repository

Replace your_nextjs_app_repository with the URL of your Next.js app repository.

Install Node.js and npm

If Node.js and npm are not already installed, install them:

curl -fsSL https://deb.nodesource.com/setup_lts.x | sudo -E bash -
sudo apt-get install -y nodejs

Install Dependencies and Build

Install your Next.js app dependencies and build the application:

npm install
npm run build
npm install -g pm2

Configure PM2

Use PM2 to manage your Next.js app:

pm2 start npm --name "nextjsapp" -- start
pm2 startup
pm2 save

Step 4: Configure Nginx

Create an Nginx Configuration File

Create an Nginx configuration file for your applications:

sudo nano /etc/nginx/sites-available/myapp

Add the following configuration to the file:

server {
    listen 80;
    server_name your_domain_or_ip;

    location /flask {
        include proxy_params;
        proxy_pass http://unix:/var/www/your_flask_app_repository/flaskapp.sock;
    }

    location / {
        proxy_pass http://localhost:3000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }
}

Replace your_domain_or_ip, your_flask_app_repository, and your_nextjs_app_repository with your actual domain or IP address and repository directories.

Enable the Configuration and Restart Nginx

Enable the Nginx configuration and restart the service:

sudo ln -s /etc/nginx/sites-available/myapp /etc/nginx/sites-enabled
sudo nginx -t
sudo systemctl restart nginx

Step 5: Access Your Applications

Your Flask application should now be accessible at http://your_domain_or_ip/flask, and your Next.js application should be accessible at http://your_domain_or_ip.

Troubleshooting

Common Issues

• 502 Bad Gateway: This can occur if Gunicorn or PM2 is not running correctly. Check the status of your services using systemctl status flaskapp and pm2 status.
• Permission Denied: Ensure that the Nginx configuration and application directories have the correct permissions.
• Domain Not Working: Double-check your DNS settings and ensure your domain points to your VPS IP address.

Useful Commands

• Check Gunicorn Logs: sudo journalctl -u flaskapp
• Check PM2 Logs: pm2 logs nextjsapp
• Check Nginx Configuration: sudo nginx -t
• Restart Services:

  sudo systemctl restart flaskapp
  pm2 restart nextjsapp
  sudo systemctl restart nginx

Conclusion

By following these steps, you should have successfully deployed your Flask app alongside a Next.js application on your VPS. This setup ensures both applications can run simultaneously, providing a robust and efficient deployment solution.