DEV Community

Nwoke Jideofor Justice
Nwoke Jideofor Justice

Posted on

How to Set Up a Subdomain with Nginx and SSL on DigitalOcean

A few weeks ago, while working on a Java Spring Boot application—let’s call it a simple "Hello World" application—I successfully deployed it to a DigitalOcean droplet. However, I ran into a problem when trying to connect it to a domain and secure the URL for the front end to consume. I couldn’t find a resource that explicitly guided me through the entire process, so I had to figure it out by researching and troubleshooting.

I've always been passionate about contributing to the tech community, and this article is my way of sharing what I've learned. Before diving in, it's beneficial to have a basic understanding of deploying to a DigitalOcean droplet, whether through a CI/CD pipeline or manually uploading your JAR files and running the app on the server. In this guide, I’ll walk you through setting up Nginx, and Certbot, and securing your domain with SSL using Godaddy as the domain provider

Prerequisites

Before getting into it, ensure you have the following prerequisites:

  • Basic knowledge of the command line
  • A DigitalOcean droplet with a public IP address.
  • A domain name registered with Godaddy (or any other registrar).
  • SSH access to your droplet.
  • A deployed Java Spring Boot application running on your droplet.

Configuring an A Record

Before proceeding, verify that your Java application is successfully deployed and running on your droplet. Since you're already familiar with the deployment process, ensure your application is accessible and operating as expected. Once you’ve confirmed everything is in place, you can proceed to the next step.

With your droplet set up, let's connect your domain to it by configuring an A Record to point your domain name directly to your Droplet's IP address. Here’s a step-by-step process:

  1. Start by logging into your GoDaddy account. Once you're in, locate the My Account tab in the top left corner. Click on it, and then select "Domains" to navigate to your domain management page, where you can adjust your settings as needed.
    Select “My Account”

  2. Once you’ve logged in and navigated to your list of domains, click on the domain you want to connect to your app. Next, head over to the "DNS" tab. For clarity, DNS (Domain Name System) is a key component of the internet that converts user-friendly domain names (like www.example.com) into numerical IP addresses (like 93.184.216.34), which computers use to communicate with each other. This is where you’ll manage the settings to link your domain to your droplet.

  3. Now that you're in the DNS settings for your domain, it's time to add an A Record to point your domain to your DigitalOcean Droplet's IPv4 address. An A Record (Address Record) maps a domain name to its corresponding IPv4 address. Follow these steps:

  4. Locate the Option to Add a New Record: Find and click the option to add a new DNS record, as shown below.

  5. Enter the Record Details: Fill in the fields with the following information:

    • Host, @: This symbol represents your root domain.
    • Value: Enter your DigitalOcean Droplet's public IP address.
    • TTL: Set it to Automatic (This allows the system to manage your time-to-live settings.)
  6. Save the Record: Once you've entered all the details, save your new A Record.
    Save the Record

If you'd like your site to be accessible via www.yourdomain.com, you can add A Record. This ensures that both the root domain and the www subdomain point to your DigitalOcean Droplet. To do this, set it up like this:

  • Host: www
  • Value: Your DigitalOcean Droplet's public IP address.
  • TTL: Automatic.

Once you add this record, visitors can access your site using either your root domain or the www subdomain. Also, DNS changes can take up to 24 hours to propagate. Use tools like DNS Checker to verify the changes.

Install Nginx on Your Droplet

Before we dive into installing Nginx, it's essential to understand why you're doing this. Nginx is a high-performance web server and reverse proxy server. In this setup, you'll use Nginx for several key reasons:

  • Reverse Proxy: Nginx will forward incoming HTTP/HTTPS requests to your Java application running on the droplet. This helps manage and balance the load, ensuring smooth and efficient handling of web traffic.
  • Static Content Serving: If your application includes static files (like images, CSS, or JavaScript), Nginx can serve these directly, often improving performance.
  • Security & SSL Termination: Nginx can handle SSL/TLS encryption, providing an additional layer of security for your site by managing HTTPS connections.
  • Performance & Scalability: Nginx efficiently handles concurrent connections, enhancing your application's ability to scale and perform under heavy traffic.

Now that you understand why Nginx is essential to your setup let's install it on your droplet.

How to Install Nginx

  1. Update Your Package List: Open your terminal and run the following command to ensure your package list is up to date: sudo apt update
  2. Install Nginx by running sudo apt install nginx
  3. After installation, ensure that Nginx is running and set to start on boot. Use these commands sudo systemctl start nginx and sudo systemctl enable nginx.
  4. Allow HTTP and HTTPS traffic through the firewall. To do that, run these commands - sudo ufw allow 'Nginx Full' and sudo ufw enable.
  5. Then, open a web browser and enter your droplet's public IP address. You should see the default Nginx welcome page, indicating the installation succeeded.

With Nginx installed, you're ready to configure it to work as a reverse proxy for your Java application and further enhance your server's performance and security. In this step, you'll create a configuration file for prod.swidexpay.com to achieve the following:

  • HTTP to HTTPS Redirection: All HTTP requests (port 80) will be automatically redirected to HTTPS (port 443) for secure communication.
  • Secure HTTPS Handling: Nginx will listen on port 443 and use SSL certificates (from Let's Encrypt) to establish a secure connection.
  • Reverse Proxy Setup: Incoming HTTPS requests will be forwarded to your Java application running on your droplet at http://127.0.0.1:8080.

Next, we’ll need to configure Nginx. Follow these instructions to do so:

  • Create a New Configuration File: Open your terminal and create a new file for your subdomain:

    sudo nano /etc/nginx/sites-available/prod.swidexpay.com
    
  • Insert the configuration below into the file:

    server {
      listen 80;
        server_name prod.swidexpay.com;
        # Redirect HTTP to HTTPS
        return 301 https://$host$request_uri;
    }

    server {
        listen 443 ssl;
        server_name prod.swidexpay.com;
        ssl_certificate /etc/letsencrypt/live/prod.swidexpay.com/fullchain.pem;
        ssl_certificate_key /etc/letsencrypt/live/prod.swidexpay.com/privkey.pem;
        include /etc/letsencrypt/options-ssl-nginx.conf;
        location / {
            proxy_pass http://127.0.0.1:8080;
            proxy_http_version 1.1;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection 'upgrade';
            proxy_set_header Host $host;
            proxy_cache_bypass $http_upgrade;
    }
Enter fullscreen mode Exit fullscreen mode
- **HTTP Block (Port 80)**: This block listens for HTTP requests and redirects them to HTTPS.
- **HTTPS Block (Port 443)**: This block manages secure connections using SSL and configures a reverse proxy that forwards requests to your application on port 8080.
Enter fullscreen mode Exit fullscreen mode
  • Create a symbolic link to enable the configuration:
    sudo ln -s /etc/nginx/sites-available/prod.swidexpay.com /etc/nginx/sites-enabled/ 
Enter fullscreen mode Exit fullscreen mode
  • Test your configuration for any syntax errors:
    sudo nginx -t
Enter fullscreen mode Exit fullscreen mode

If the test passes, reload Nginx to apply your changes:

    sudo systemctl reload nginx
Enter fullscreen mode Exit fullscreen mode

After completing these steps, your subdomain prod.swidexpay.com is now configured to securely handle incoming traffic by redirecting HTTP requests to HTTPS and proxying them to your Java application.

Secure the server connections with SSL certificates

Great job configuring Nginx for your subdomain! Now that your server handles HTTP-to-HTTPS redirection and proxies requests to your Java application, the next step is to secure these connections using SSL certificates. We'll now move on to installing Certbot and configuring SSL certificates from Let's Encrypt.

  • First, install Certbot along with its Nginx plugin by running the following.
    sudo apt install certbot python3-certbot-nginx -y
Enter fullscreen mode Exit fullscreen mode
  • Use Certbot to obtain and configure an SSL certificate for your subdomain automatically.
    sudo certbot --nginx -d prod.swidexpay.com
Enter fullscreen mode Exit fullscreen mode
  • Finally, test the automatic renewal process to ensure your SSL certificate will be renewed without issues.
    sudo certbot renew --dry-run
Enter fullscreen mode Exit fullscreen mode

Completing these steps ensures that your subdomain prod.swidexpay.com is secured with a valid SSL certificate, providing encrypted connections for your users.

It is important to ensure that your DNS settings correctly direct traffic to your desired endpoints. In this next step, we'll update your DNS settings so that visitors using your development subdomain's "www" prefix are seamlessly directed to the correct domain.

  1. Log In to Your GoDaddy Account: Access your GoDaddy account and navigate to the DNS management tab.
  2. Configure a new CNAME record with the following details:
  3. Host: www.prod
  4. Value: prod.swidexpay.com
  5. TTL: Automatic

Conclusion

Congratulations! You’ve successfully set up a subdomain, configured Nginx, and secured it with SSL on your DigitalOcean droplet. Your subdomain is now ready to serve traffic securely over HTTPS. If you encounter any issues, refer to the official documentation for Nginx and Certbot.
This guide saves you the time and effort I spent figuring things out. Feel free to share it with others who might benefit from it if you find it helpful. Happy coding!

Top comments (0)