Aexus Answers

VPS & Next.js Deployment With Dokploy: A Beginner's Guide

Alex Johnson
-
VPS & Next.js Deployment With Dokploy: A Beginner's Guide

Hey guys! Ready to dive into the awesome world of Dokploy? The best way to really understand how it works is to get your hands dirty and actually use it! This guide will walk you through setting up a Virtual Private Server (VPS) using Google Cloud's free credits and then deploying a Next.js application using Dokploy. By the end of this, you'll have practical experience with hosting and deployment, from start to finish. Let's get started!

Part 1: Create a VPS on Google Cloud

Before we start, let's make sure you have everything you need.

Prerequisites

  • Google Account: You'll need a Google account to access Google Cloud.
  • Google Cloud free credits: New accounts usually get $300 in free credits, which is perfect for this project.

Steps

  1. Setup Google Cloud Console

    • Navigate to the Google Cloud Console.
    • Create or log in to your Google Account. If you don't have one, it's super easy to set up.
    • Set up a billing account. This is required even to use the free credits. Don't worry, you won't be charged unless you explicitly upgrade.

  2. Create Compute Engine Instance

    • Search for "Compute Engine" in the Google Cloud Console search bar and click Create Instance.
    • If prompted, enable the Compute Engine API. This might take a minute or so.

  3. Configure Instance Settings: Here's where we set up our VPS.

    Machine Configuration:

    • Instance Name: [YOUR-NAME]-codepath-dokploy-vps. Replace [YOUR-NAME] with something that identifies you.
    • Region: us-central1 (Iowa) or any region close to you. This can affect latency, so choose wisely!

    Machine Type:

    • Select e2-medium. This provides a good balance of resources for our needs.

    Boot Disk:

    • Operating System: Ubuntu
    • Version: Ubuntu 22.04 LTS x86/64 (jammy). This is a stable and widely used version.
    • Boot disk type: SSD persistent disk. SSDs are faster than standard hard drives, so this will improve performance.

    Firewall:

    • ✅ Allow HTTP traffic
    • ✅ Allow HTTPS traffic. This is important for security, even if we're just deploying a simple app.

  4. Launch Instance

    • Click Create to finalize your settings.
    • Wait for the instance to be running. This might take a few minutes.
    • Click the SSH button to open a terminal in your browser.
    • Authorize the SSH key when prompted. This allows you to securely connect to your VPS.

Part 2: Configure Firewall for Dokploy

Next, we need to open up a port in the firewall so Dokploy can be accessed.

Create Firewall Rule

  1. Navigate to VPC Networks

    • Search for "VPC Networks" in the Google Cloud Console.
    • Select Firewall > Create Firewall Rule.

  2. Configure Rule Settings

    • Name: allow-dokploy-tcp-3000. Make it descriptive so you know what it's for.
    • Targets: All instances in the network. This applies the rule to our VPS.
    • Source IPv4 ranges: 0.0.0.0/0. This allows traffic from any IP address (for now, for testing purposes). Be careful with this in production!
    • Specified protocols and ports: TCP, port 3000. Dokploy uses port 3000 by default.
    • Click Create.

Part 3: Install Dokploy on VPS

Now, let's get Dokploy installed on our VPS.

Installation

  1. Run Installation Command

    curl -sSL https://dokploy.com/install.sh | sudo sh
    • Paste this command into the SSH terminal you opened earlier.
    • Wait for the installation to complete. This could take a few minutes.
    • Note the IP link displayed in the console. This is how you'll access the Dokploy UI.

  2. Access Dokploy UI

    • Navigate to the provided IP link (format: http://[EXTERNAL-IP]:3000). Replace [EXTERNAL-IP] with the actual IP address of your VPS.
    • Create a new user account. Important: Use different credentials than your local setup. This is a remote server, so security is key!
    • Important: Save your login credentials! You'll need them later.

Note: If you lose the link, you can find it on the Compute Engine dashboard under the "External IP" column, then add :3000 to the end.

Part 4: Deploy Next.js Application

Alright, time to deploy our Next.js app!

Prepare Repository

  1. Fork Example Repository
    • Fork the Dokploy Examples Repository to your GitHub account.
    • Rename it to something descriptive (optional). This helps keep things organized.
    • Clone the forked repository to your local machine. You'll need Git installed for this.

Configure Dokploy Deployment

  1. Create Project

    • In the Dokploy UI (on your VPS instance), create a new project: [YOUR-NAME]-codepath-unit-1. Again, replace [YOUR-NAME] with something that identifies you.

  2. Create Application

    • Create a new service → Application.
    • Name: DokployNextJSApp (or a similar descriptive name).

  3. Setup GitHub Provider

    • Under the provider section, click GitHub settings.
    • Install and authorize the GitHub app. This allows Dokploy to access your GitHub repositories.
    • Address the "Action required" message by clicking the dropdown arrow and authorizing in the popup.

  4. Configure Source Repository

    • Select GitHub as the source.
    • GitHub Account: Your authorized account.
    • Repository: Your forked dokploy-examples repository.
    • Branch: main.
    • Build Path: /nextjs. This tells Dokploy where the Next.js application is located in the repository.
    • Click Save.

  5. Deploy Application

    • Click the Deploy button.
    • Wait for the deployment to complete. This might take a few minutes.
    • Monitor the logs to ensure a successful deployment. This is crucial for troubleshooting any issues.

Configure Domain Access

  1. Add Domain

    • Go to the Domains tab in Dokploy.
    • Add a new domain with the following settings:
      • Host: Your VPS external IP (e.g., 34.63.1xx.1xx).
      • Path: /.
      • Port: 3000.
      • HTTPS: No (for now, we're keeping it simple).

  2. Test Deployment

    • Navigate to your VPS IP address in your web browser.
    • Verify that the Next.js app is running successfully.

Note: You might see DNS warnings (queryA ENOTFOUND), but if the app loads, it's working correctly. This just means the DNS record hasn't fully propagated yet.

Bonus Challenge

  • Customize the App: Modify the Next.js homepage to display your name and a fun fact about yourself. This is a great way to personalize your deployment.

Submission Requirements

To complete this exercise, submit a screen recording demonstrating:

  • Your deployed Next.js application running in your 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, double-check that the firewall rule is properly configured.
  • If the deployment fails, check the logs in the Dokploy interface for error messages.
  • Ensure 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

  • 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.
  • 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.

That's it, guys! You've successfully deployed a Next.js application using Dokploy on a Google Cloud VPS! You now have some serious skills. If you are interested in finding out what else is possible with Google Cloud, you can check out their services overview here: Google Cloud Products

You may also like