Aexus Answers

Deploy Next.js On VPS With Dokploy: A Step-by-Step Guide

Alex Johnson
-
Deploy Next.js On VPS With Dokploy: A Step-by-Step Guide

Ready to dive into the world of web deployment? This guide walks you through creating a Virtual Private Server (VPS) and deploying a Next.js application using Dokploy. It's a hands-on way to learn about hosting and deployment from start to finish. Let's get started!

Part 1: Setting Up a VPS on Google Cloud

Creating a Virtual Private Server (VPS) on Google Cloud is the first step in deploying your Next.js application with Dokploy. Google Cloud offers free credits for new accounts, making it an accessible option for learning and experimentation. Before you begin, ensure you have a Google Account and have activated your Google Cloud free credits. These credits provide a risk-free environment to explore cloud services and deploy your applications without immediate costs.

Prerequisites

Before we dive in, make sure you have these ready:

  • Google Account
  • Google Cloud free credits (new accounts usually get $300 to play with!)

Steps to Create a VPS

  1. Accessing Google Cloud Console: Start by navigating to the Google Cloud Console. This is your control center for all things Google Cloud. If you don't have an account, you'll need to create one or log in with your existing Google Account. Setting up a billing account is also essential, even with free credits, as it's required to access most Google Cloud services. This step ensures you're ready to utilize your free credits and deploy your application.

  2. Creating a Compute Engine Instance: Once you're in the console, search for "Compute Engine" in the search bar. Compute Engine is the service that allows you to create and manage virtual machines in the cloud. Click on Create Instance to begin the process of setting up your VPS. If this is your first time using Compute Engine, you might be prompted to enable the Compute Engine API. This process usually takes about a minute and is a necessary step to proceed.

  3. Configuring Instance Settings: This is where you customize your VPS. Let's walk through the key settings:

    Machine Configuration:

    • Instance Name: Give your instance a descriptive name, like [YOUR-NAME]-codepath-dokploy-vps. This helps you easily identify it later.
    • Region: Choose us-central1 (Iowa) or any region that's geographically convenient for you. The closer the region is to your users, the lower the latency.

    Machine Type:

    • Select e2-medium. This machine type offers a good balance of performance and cost for our needs.

    Boot Disk:

    • Operating System: Choose Ubuntu as the operating system.
    • Version: Select Ubuntu 22.04 LTS x86/64 (jammy). LTS versions provide long-term support, ensuring stability and security.
    • Boot disk type: Opt for SSD persistent disk for faster performance compared to standard hard disks.

    Firewall:

    • ✅ Allow HTTP traffic: This allows traffic on port 80, which is the standard port for web traffic.
    • ✅ Allow HTTPS traffic: This enables traffic on port 443, the secure port for encrypted web traffic.

  4. Launching the Instance: With all your settings configured, click Create to finalize and launch your VPS instance. Google Cloud will now provision your virtual machine, which might take a few minutes. Once the instance is running, you'll see a green checkmark next to its name in the Compute Engine dashboard. To access your VPS, click the SSH button. This opens an in-browser terminal, allowing you to interact with your server via the command line. You might be prompted to authorize an SSH key; simply follow the instructions to proceed.

Part 2: Configuring the Firewall for Dokploy

Setting up the firewall is crucial for allowing Dokploy to function correctly on your VPS. Dokploy uses port 3000 by default, so we need to create a firewall rule that permits traffic on this port. This ensures that you can access the Dokploy UI and that your applications can be deployed and accessed.

Creating a Firewall Rule

  1. Navigating to VPC Networks: In the Google Cloud Console, search for "VPC Networks". VPC stands for Virtual Private Cloud, and it allows you to manage your network configurations in Google Cloud. Select Firewall from the left-hand menu, then click Create Firewall Rule to start defining a new rule.

  2. Configuring the Rule Settings: Now, let's configure the firewall rule to allow traffic on port 3000:

    • Name: Give your rule a descriptive name, like allow-dokploy-tcp-3000. This makes it easy to identify the purpose of the rule later.
    • Targets: Set this to All instances in the network. This means the rule will apply to all virtual machines within your VPC network.
    • Source IPv4 ranges: Enter 0.0.0.0/0. This allows traffic from any IP address, which is suitable for a development or learning environment. In a production environment, you might want to restrict this to specific IP ranges for security.
    • Specified protocols and ports: Choose TCP and enter 3000 as the port. TCP is the protocol Dokploy uses, and 3000 is the default port for the Dokploy UI.

  3. Click Create to save your firewall rule. Google Cloud will now apply this rule, allowing traffic on port 3000 to reach your VPS instance. This is a critical step for Dokploy to function correctly, as it ensures that the Dokploy UI is accessible from your web browser.

Part 3: Installing Dokploy on Your VPS

Installing Dokploy on your VPS is straightforward. Dokploy provides a convenient installation script that automates the process, making it easy to get up and running. This script handles all the necessary steps, from downloading the Dokploy binaries to setting up the required services. By using the installation script, you can quickly deploy applications without worrying about the underlying complexities.

Installation Process

  1. Running the Installation Command: Connect to your VPS via SSH, as you did in Part 1. Once you're in the terminal, run the following command:

    curl -sSL https://dokploy.com/install.sh | sudo sh

    This command downloads the Dokploy installation script and executes it with administrative privileges. The curl command fetches the script, -sSL flags ensure it works silently and follows redirects, and sudo sh executes the script with root privileges, which are necessary to install software system-wide.

  2. Wait for the installation to complete. The script will download and install Dokploy along with its dependencies. This process might take a few minutes, depending on your internet connection and the VPS's performance. Keep an eye on the console output for any messages or prompts. Once the installation is finished, the script will display an IP link in the console. This link is crucial for accessing the Dokploy UI.

  3. Accessing the Dokploy UI: Navigate to the provided IP link in your web browser. The link will be in the format http://[EXTERNAL-IP]:3000, where [EXTERNAL-IP] is the external IP address of your VPS. You can find this IP address in the Google Cloud Console, on the Compute Engine instances page. When you access the Dokploy UI for the first time, you'll be prompted to create a new user account. It's essential to use different credentials than your local setup for security reasons. After creating your account, make sure to save your login credentials in a safe place, as you'll need them to access Dokploy in the future.

Note: If you happen to lose the link to the Dokploy UI, you can always find it by going to the Compute Engine dashboard in the Google Cloud Console and looking for the External IP address of your VPS instance, then appending :3000 to it.

Part 4: Deploying Your Next.js Application

Deploying a Next.js application with Dokploy involves a series of steps, from preparing your repository to configuring Dokploy to build and deploy your app. Dokploy simplifies this process by providing a user-friendly interface and automating many of the underlying tasks. By following these steps, you can quickly deploy your Next.js application and make it accessible online.

Preparing the Repository

  1. Forking the Example Repository: Start by forking the Dokploy Examples Repository to your GitHub account. This repository contains a basic Next.js application that we'll use for this deployment. Forking the repository creates a copy of it in your GitHub account, allowing you to make changes without affecting the original repository. If you wish, you can rename the forked repository to something more descriptive, but this is optional.

  2. Clone the forked repository to your local machine. This allows you to work with the code locally and make any necessary configurations before deploying. Use the git clone command followed by the URL of your forked repository to clone it to your computer.

Configuring Dokploy for Deployment

  1. Creating a Project: In the Dokploy UI on your VPS instance, create a new project. A project in Dokploy is a container for your applications. Give your project a name that helps you identify it, such as [YOUR-NAME]-codepath-unit-1. This will help you organize your deployments and manage different applications.

  2. Creating an Application: Within your project, create a new application. Dokploy distinguishes between different types of services, so you'll want to create a service of type "Application". Give your application a descriptive name, such as DokployNextJSApp. This name will help you identify the application within Dokploy.

  3. Setting Up GitHub Provider: Dokploy integrates with GitHub to automatically build and deploy your application whenever you push changes to your repository. To set up this integration, click on GitHub settings under the provider section in the application configuration. This will redirect you to GitHub to install and authorize the Dokploy app. Follow the prompts to grant Dokploy access to your repositories. You might see an "Action required" message; address this by clicking the dropdown arrow and authorizing Dokploy in the popup window.

  4. Configuring the Source Repository: Now, configure Dokploy to use your forked repository as the source for your application. Select GitHub as the source provider and choose your authorized GitHub account. Then, select your forked dokploy-examples repository and the main branch. Specify the build path as /nextjs, as this is where the Next.js application is located within the repository. Click Save to store these settings. This configuration tells Dokploy where to find your application's code.

  5. Deploying the Application: With the source repository configured, you're ready to deploy your application. Click the Deploy button in the Dokploy UI. Dokploy will now fetch your code from GitHub, build the Next.js application, and deploy it to your VPS. This process might take a few minutes, depending on the size of your application and the VPS's performance. You can monitor the deployment progress by watching the logs in the Dokploy interface. Successful deployment will result in a message indicating that the application is running.

Configuring Domain Access

  1. Adding a Domain: To access your deployed application via a web browser, you need to configure domain routing in Dokploy. Go to the Domains tab in the application settings and add a new domain. Use the following settings:

    • Host: Your VPS external IP address (e.g., 34.63.1xx.1xx).
    • Path: /.
    • Port: 3000.
    • HTTPS: No (for this example, we're not setting up HTTPS, but you should in a production environment).

    These settings tell Dokploy to route traffic from your VPS's IP address on port 3000 to your application.

  2. Testing the Deployment: Navigate to your VPS IP address in your web browser. If everything is configured correctly, you should see your Next.js application running successfully. This confirms that your application is deployed and accessible via the web.

Note: You might see DNS warnings (queryA ENOTFOUND), but if the app loads, it's working correctly. These warnings are related to domain name resolution, which we're not configuring in this example.

Bonus Challenge

  • Customize the App: Try modifying the Next.js homepage to display your name and a fun fact about yourself. This is a great way to practice making changes to your application and deploying them with Dokploy.

Submission Requirements

To complete this guide, submit a screen recording demonstrating:

  • Your deployed Next.js application running in a browser.
  • Your VPS instance in the Google Cloud Console.

Include the URL of your deployed application in the recording or description.

Additional Submission Details

  • Deployed App URL: http://[YOUR-VPS-IP]:3000
  • Google Cloud Project Name:
  • VPS Instance Name:

Troubleshooting Tips

  • If the Dokploy UI is inaccessible, verify that the firewall rule is properly configured.
  • If deployment fails, check the logs in the Dokploy interface for error messages.
  • Ensure that your GitHub repository is accessible and the build path is correct.
  • Double-check that your VPS instance is running in the Google Cloud Console.

Acceptance Criteria

To successfully complete this guide, you should have:

  • Successfully created and configured a Google Cloud VPS instance.
  • Installed Dokploy on the remote server.
  • Set up GitHub integration with Dokploy.
  • Successfully deployed a Next.js application end-to-end.
  • Configured domain routing for web access.
  • The application is accessible via a browser at the VPS IP address.
  • Submitted a screen recording showing the deployed app and VPS instance.
  • Included the deployed application URL in the submission.

Congratulations! You've successfully deployed a Next.js application using Dokploy on a Google Cloud VPS. This hands-on experience has provided you with valuable insights into the deployment process, from setting up a server to configuring a CI/CD pipeline. Keep exploring and experimenting with Dokploy and other deployment tools to enhance your skills.

For further learning and exploration of cloud deployment strategies, check out this comprehensive resource on DigitalOcean Community. It offers a wealth of tutorials and guides on various aspects of cloud computing.

You may also like