Deploy Next.js Application Using CloudRay

CloudRay offers a streamlined approach to automating and managing deployments across various environments. In this guide, we will walk through the process of deploying a Next.js application using CloudRay automation scripts.

By the end of this article, you will have a fully functional Next.js application running behind a Caddy reverse proxy with process management handled by PM2.

Contents

• Adding Servers to CloudRay
• Assumptions
• Create the Automation Script
  • Setup Nextjs Script
  • Deploy Nextjs Script
• Create a Variable Group
• Running the Script with CloudRay
  • Run the Setup Nextjs Script
  • Run the Deploy Nextjs Script
• Troubleshooting

Adding Servers to CloudRay

Before getting started, make sure your target servers are connected to CloudRay. If you haven’t done this yet, follow our servers docs to add and manage your server.

Assumptions

• This guide assumes you’re using Ubuntu 24.04 LTS as your server’s operating system. If you’re using a different version or a different distribution, adjust the commands accordingly

Create the Automation Script

To automate the setup and deployment, you’ll need two Bash scripts:

1. Setup Nextjs Script: This script will install the application dependencies and build the Next.js application
2. Deploy Nextjs Script: This script will automate the deployment processes by installing and configuring Caddy as a reverse proxy and secure the domain

Let’s begin with the Setup Nextjs Script

Setup Nextjs Script

To create the Setup Nextjs Script, you need to follow these steps:

1. Go to Scripts in your CloudRay project
2. Click New Script
3. Name: Setup Nextjs Script. You can give it any name of your choice
4. Copy this code:

#!/bin/bash

# Exit on error
set -e

# Install Node.js and npm
echo "Installing Node.js and npm..."
sudo apt update && sudo apt install -y nodejs npm

# Install PM2 globally
echo "Installing PM2..."
sudo npm install -g pm2

# Clone the Next.js application
echo "Cloning Next.js repository..."
sudo mkdir -p /var/www
cd /var/www
sudo git clone https://{{github_access_token}}@github.com/{{github_user}}/{{repo_name}}.git

# Install dependencies and build the application
cd {{repo_name}}
echo "Installing dependencies and building the application..."
npm install
npm run build

echo "Setup completed successfully!"

Here is what the Setup Nextjs Script does:

• Installs Node.js, npm, and PM2
• Clones the Next.js repository from GitHub
• Installs dependencies and builds the Next.js application

Deploy Nextjs Script

Next, to automate the deployment process, create the Deploy Nextjs Script by following these steps:

1. Go to Scripts > New Script
2. Name: Deploy Nextjs Script
3. Add code:

#!/bin/bash

# Exit on error
set -e

# Install dependencies and Caddy
echo "Installing Caddy and dependencies..."
sudo apt install -y debian-keyring debian-archive-keyring apt-transport-https curl
curl -1sLf 'https://dl.cloudsmith.io/public/caddy/stable/gpg.key' | sudo gpg --dearmor -o /usr/share/keyrings/caddy-stable-archive-keyring.gpg
curl -1sLf 'https://dl.cloudsmith.io/public/caddy/stable/debian.deb.txt' | sudo tee /etc/apt/sources.list.d/caddy-stable.list
sudo apt update && sudo apt install -y caddy

# Configure Caddy reverse proxy
echo "Configuring Caddy reverse proxy..."
sudo bash -c "cat > /etc/caddy/Caddyfile" <<EOF
{{domain}} {
    reverse_proxy localhost:3000
}
EOF

# Restart Caddy service
echo "Restarting Caddy..."
sudo systemctl restart caddy

# Navigate to the repository directory
cd /var/www/{{repo_name}}

# Fetch the latest changes from the remote repository
echo "Fetching latest changes from GitHub..."
git fetch --all

# Reset the local repository to match the remote main branch
echo "Resetting to the latest version of the main branch..."
git reset --hard origin/main

# Install dependencies and build the application
echo "Installing dependencies and building the application..."
npm install
npm run build

# Start the Next.js application using PM2
echo "Starting Next.js application..."
pm2 start npm --name "nextjs" -- start

# Configure PM2 to restart on boot
pm2 startup
pm2 save

echo "Deployment completed successfully!"

This is what the Deploy Nextjs Script does:

• Installs Caddy and sets up a reverse proxy to the Next.js application
• Fetches the latest changes from all branches in the remote repository and resets the local repository to match the latest commit on the main branch of the remote repository
• Starts the Next.js application using PM2
• Ensures the Next.js process restarts automatically on reboot

Create a Variable Group

Now, before running the scripts, you need to define values for the placeholders {{github_access_token}}, {{github_user}}, {{repo_name}}, and {{domain}} used in the scrips. CloudRay processes all scripts as Liquid templates. This allows you to use variables dynamically across different servers.

To ensure that these values are automatically substituted when the script runs, follow these steps to create a variable Group:

1. Navigate to Variable Groups: In your CloudRay project, go to “Scripts” in the top menu and click on “Variable Groups”.
2. Create a new Variable Group: Click on “Variable Group”.
3. Add the following variables:

• github_access_token: This is your GitHub personal access token for cloning the repository
• github_user: This is your GitHub Username
• repo_name: This is the name of the GitHub repository
• domain: Your application’s domain name, e.g., myapp.example.com

Since the variables is setup, proceed with running the scripts with CloudRay

Running the Script with CloudRay

You can choose to run the scripts individually or execute them all at once using CloudRay’s Script Playlists. If you prefer to run them individually, follow these steps:

Run the Setup Nextjs Script

CloudRay uses Runlogs to execute scripts on your servers while providing real-time logs of the execution process.

To run the Setup Nextjs Script, follow these steps:

1. Navigate to Runlogs: In your CloudRay project, go to the Runlogs section in the top menu.
2. Create a New Runlog: Click on New Runlog.
3. Configure the Runlog: Fill in the required details:

• Server: Select the server you added earlier.
• Script: Choose the “Setup Nextjs Script”
• Variable Group (optional): Select the variable group you created earlier.

4. Execute the Script: Click on Run Now to start the execution.

CloudRay will automatically connect to your server, run the Setup Nextjs Script, and provide live logs to track the process. If any errors occur, you can review the logs to troubleshoot the issue.

Run the Deploy Nextjs Script

After successfully running the Setup Nextjs Script, the next step is to execute the Deployment Script using CloudRay’s Runlogs. This script will configure and deploy your application on the server.

To run the Deployment Script, follow these steps:

1. Navigate to Runlogs: In your CloudRay project, go to the Runlogs section in the top menu.
2. Create a New Runlog: Click on New Runlog.
3. Configure the Runlog: Provide the necessary details:

• Server: Select the same server used earlier.
• Script: Choose the “Deploy Nextjs Script”.
• Variable Group: Select the variable group you created earlier.

4. Execute the Script: Click on Run Now to deploy your application.

Your Next.js application is now securely deployed and managed with CloudRay. That’s it! Happy deploying!

Troubleshooting

If you encounter issues during deployment, consider the following:

• Ensure your domain is properly registered and set the A record to point to your server’s IP address
• Verify that all necessary environment variables are correctly set on your Cloudray variable Group
• Check that your firewall allows traffic on the required ports (e.g., 80, 443)