Deploying a Next.js Application on Hostinger with Ubuntu 22.04 Using DeployHQ

Deploying a Next.js application can be streamlined using DeployHQ's powerful deployment tools. In this guide, we'll walk you through setting up a seamless deployment workflow from your repository to a Hostinger VPS running Ubuntu 22.04.

Prerequisites

Before we begin, ensure you have:

• A Hostinger VPS account
• A DeployHQ account
• A Next.js application in a Git repository
• SSH access to your Hostinger VPS

Step 1: Prepare Your Hostinger VPS

Connect to your VPS via SSH:

ssh root@your_server_ip

Update and install necessary dependencies:

sudo apt update && sudo apt upgrade -y
sudo apt install -y nodejs npm nginx git curl

# Install Node.js (if not already installed)
curl -fsSL https://deb.nodesource.com/setup_18.x | sudo -E bash -
sudo apt-get install -y nodejs

# Install PM2 process manager
sudo npm install -g pm2

Step 2: Set Up Deployment Directory

Create a directory for your Next.js application:

sudo mkdir -p /var/www/your-app-name
sudo chown -R your-username:your-username /var/www/your-app-name

Step 3: Configure DeployHQ

1. Log in to your DeployHQ account
2. Create a new project
3. Connect your Git repository

DeployHQ Server Configuration

• Server Type: SFTP
• Host: Your Hostinger VPS IP
• Port: 22
• Username: Your SSH username
• Authentication: SSH Key or Password

Deployment Path

Set the deployment path to /var/www/your-app-name

Step 4: DeployHQ Deployment Script

Create a deployment script in DeployHQ to handle Next.js specifics:

#!/bin/bash
set -e

# Navigate to deployment directory
cd /var/www/your-app-name

# Install dependencies
npm install

# Build the Next.js application
npm run build

# Restart the application with PM2
pm2 restart nextjs-app || pm2 start npm --name "nextjs-app" -- start

# Optional: Warm up the application cache
# npm run build

This is an example Deployment Script which you should change and adapt based on your own needs.

Step 5: Nginx Configuration

Create an Nginx reverse proxy configuration:

sudo nano /etc/nginx/sites-available/nextjs-app

Add the following configuration:

server {
    listen 80;
    server_name your-domain.com;

    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;
    }
}

Enable the configuration:

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

Step 6: SSL Configuration (Optional)

Install Certbot for HTTPS:

sudo apt install certbot python3-certbot-nginx
sudo certbot --nginx -d your-domain.com

Deployment Workflow

1. Push changes to your Git repository
2. DeployHQ automatically triggers deployment
3. Files are transferred via SFTP
4. Deployment script runs automatically
5. Application restarts seamlessly

Troubleshooting Tips

• Verify SSH keys are correctly configured
• Check DeployHQ deployment logs
• Monitor PM2 logs: pm2 logs
• Verify Nginx configuration: sudo nginx -t

Security Recommendations

• Use SSH key authentication
• Configure firewall rules
• Regularly update dependencies
• Use environment variables for sensitive information

Conclusion

DeployHQ simplifies the deployment process for Next.js applications on Hostinger, providing a robust and automated workflow. By leveraging SFTP and custom deployment scripts, you can ensure smooth, consistent deployments.

Additional Resources

• DeployHQ Documentation
• Next.js Deployment Guide
• Hostinger VPS Tutorials

Happy deploying!

Note: Replace placeholders like your-app-name, your-username, and your-domain.com with your actual details.