Easy Guide: Host NextJS Project on Apache VPS

What is PM2?

Before diving into the technical details, let’s briefly discuss PM2. PM2 is a robust process manager for Node.js applications. It ensures your Node.js processes are running smoothly, even after server reboots. With features like automatic restarts and startup scripts, PM2 simplifies the management of Node.js applications in production environments.

Pointing Your Domain

The first step is to point your domain to your VPS. Here’s a quick overview:

Login to Your Domain Provider Website: Access your domain provider’s website and navigate to the DNS management section.

Add DNS Records: Add the following DNS records to point your domain to your VPS IP address and IPv6 address.

A       @       Your_Remote_Server_IP
A       www     Your_Remote_Server_IP
AAAA    @       Your_Remote_Server_IPv6
AAAA    www     Your_Remote_Server_IPv6

Setting Up Your VPS

Now, let’s configure your VPS for hosting NextJS projects:

Install Apache: Install Apache web server on your VPS using the following command:
```
sudo apt install apache2
```

Install Node.js and npm: Install Node.js and npm for running your NextJS application:

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

Install PM2: Install PM2 globally to manage your Node.js processes:
```
sudo npm install -g pm2@latest
```
Install Git: Install Git to clone your NextJS project from GitHub:
```
sudo apt install git
```

Deploying Your NextJS Project

With your VPS configured, it’s time to deploy your NextJS project:

Clone Your Project: Clone your NextJS project from GitHub to your VPS:
```
git clone https_repo_path
```
Move Project to Web Server Directory: Move your project to the Apache web server’s public directory:
```
sudo mv project_folder_name /var/www
```
Install Dependencies and Build Project: Navigate to your project directory, install dependencies, and build your NextJS project:
```
cd /var/www/project_folder_name
npm install
npm run build
```

Configure Virtual Host: Create a virtual host configuration file for Apache:

sudo nano /etc/apache2/sites-available/your_domain.conf

Paste the following configuration, updating the ServerName and ProxyPass accordingly:

<VirtualHost *:80>
    ServerName www.example.com
    ServerAdmin contact@example.com
    ProxyPreserveHost On
    ProxyPass / http://127.0.0.1:3000/
    ProxyPassReverse / http://127.0.0.1:3000/
    <Directory "/var/www/project_folder_name">
        AllowOverride All
    </Directory>
</VirtualHost>

Enable Modules and Virtual Host: Enable the necessary Apache modules and the virtual host you just created:

sudo a2enmod proxy
sudo a2enmod proxy_http
sudo a2ensite your_domain.conf
sudo service apache2 restart

Managing Your NextJS Application with PM2

PM2 will ensure your NextJS application stays online and restarts automatically. Here’s how to set it up:

Start Your Application with PM2: Navigate to your project directory and start your NextJS application with PM2:
```
cd /var/www/project_folder_name
pm2 start npm --name your_app_name -- run start -- -p 3000
```
Save PM2 Process: Save the PM2 process to ensure it starts on server boot:
```
pm2 save
```
Check PM2 Status: Verify that your NextJS application is running with PM2:
```
pm2 status
```

Automating Deployment with GitHub Actions

Automating your deployment process with GitHub Actions streamlines your workflow. Here’s how to set it up:

Create Deployment Script: Create a deployment script within your project directory, along with a .sh file and a .yml file for GitHub Actions.
Generate SSH Key: Generate an SSH key pair on your VPS and add the public key to your GitHub repository.
Configure GitHub Actions: Define a workflow in the .yml file to trigger deployment on pushes to the master branch.
Set Repository Secrets: Add your VPS credentials (HOST, PORT, USERNAME, SSHKEY) as repository secrets in GitHub.
Test Deployment: Test the deployment by making changes to your project locally, committing them, and pushing to GitHub. GitHub Actions will automatically deploy the changes to your VPS.

Conclusion

By following these steps, you can successfully point your domain, host your NextJS project on Apache web server VPS hosting, and automate the deployment process using GitHub and PM2. This setup ensures your NextJS application runs smoothly in a production environment, allowing you to focus on building and improving your project. Happy coding!