📓Deploy a Next.js App on Clouddley
Learn how to deploy a Next.js app on Clouddley.
Clouddley is a backend infrastructure platform for your compute resources that auto-detects your runtime and deploys your application to your server (virtual machines and bare metal). In this guide, you’ll see Clouddley in action by deploying a Next.js web application (built with Next.js boilerplate) to a virtual machine.
Prerequisites
A Clouddley account.
A virtual machine on a Cloud platform or a bare metal server.
Deploy your Next.js Application
Accessing Apps
Open your web browser, log in to your Clouddley account
Navigate to Apps and click on Deploy App
Step 1: Configure Service
Choose your Git hosting service; either GitHub or Bitbucket. For this tutorial, we will be using GitHub.
Click on Continue with GitHub
Step 2: Configure Git
To connect your GitHub user or organization account, click the Select username/organization dropdown and Add GitHub account.
Select your repository and the branch from the dropdown list or quickly search.
Click on Next
Step 3: Configure your Virtual Machine
In the Choose or add server dropdown, select your virtual machine (VM) if it’s already listed. If not, select + Add Virtual Machine.
Enter the following details to configure your VM:
Hostname or IP address
Username
SSH port
After adding the details, use the Clouddley CLI (recommended) or connect via SSH to verify the connection.
The Clouddley CLI is a command-line tool that allows you to interact with the Clouddley Platform from your terminal.
Open the command line of the remote VM you want to configure to Clouddley and install Clouddley CLI by running the command:
To add the SSH public key, run the command:
Using the CLI, you can deploy resources, manage configurations, and automate tasks efficiently.
Download the public key to your local machine.
Run the provided command on your local machine, allowing Triggr to connect to your virtual machine.
Click on Verify. This verifies the connection.
Click on Next
Step 4: Configure app settings
Insert the name of the application and its port.
Click on Next
Step 5: Configure Environment Variables
To add environment variables, click on ➕ Add Variable
Choose an ENV mode: either a single variable or import variables. Learn more here.
Add the key-value pairs and click on Save
Click on Next
Step 6: Set up Notifications (optional)
To configure the notification settings of the application, click on ➕ Add Alert
Select the Alert type. For this tutorial, we will set up Email alerts.
Toggle on the buttons of the deployment event (failed, timed out, or success) you want to be notified of.
Enter the Email address where you want to receive alerts. (You can add multiple email addresses)
Click on Save
Click on Deploy
Step 7: Test and Verify the app
Click on Go to Dashboard. Your app will be visible on the apps dashboard.
After the app deployment is complete, the app status changes from
DeployingtoOnline
Click on 🌐 Website at the top right corner of the page, which opens the URL of the deployed application in your browser.
You can test the application functionalities.
You have successfully deployed a Next.js application on Clouddley. You can manage it directly from the app dashboard by clicking the three dots (...) at the top-right corner to access Edit, Instant Rollback, Scale, Pause, and Delete options.
Additionally, you can switch to different tabs on the application dashboard to perform the following actions: view your deployment history, view or download logs, add a custom domain, and view the environment variables.
Conclusion
Congratulations🎉 on successfully deploying a Next.js application on Clouddley. You can check out the source code for this application here. You can also check out how different frameworks can be deployed on Clouddley in our how-to guides.
Last updated