❌

Reading view

There are new articles available, click to refresh the page.

ACESS YOUR LOCAL APPLICATION VIA INTERNET

✇Parotta Salna
Mr.ParottaSalna

In this blog post, we’ll explore how to set up a simple web server using Caddy to serve an HTML page over HTTPS.

Additionally, we’ll configure port forwarding on your router to make the server accessible from the internet using your WAN IP address.

Caddy is an excellent choice for this task because of its ease of use, automatic HTTPS, and modern web technologies support.

What You’ll Need

  • Your WAN IP address (You can get this from your router)
  • A computer or server running Linux, macOS, or Windows
  • Caddy or any related web server (nginx, etc…) installed on your machine
  • An HTML file to serve.
  • Access to your router’s administration interface

Step 1: Install Caddy

Linux

To install Caddy on Linux, you can use the following commands:

# Download Caddy
wget https://github.com/caddyserver/caddy/releases/download/v2.6.4/caddy_2.6.4_linux_amd64.tar.gz

# Extract the downloaded file
tar -xzf caddy_2.6.4_linux_amd64.tar.gz

# Move Caddy to a directory in your PATH
sudo mv caddy /usr/local/bin/

# Give execute permissions
sudo chmod +x /usr/local/bin/caddy

macOS

On macOS, you can install Caddy using Homebrew,

brew install caddy

Windows

For Windows, download the Caddy binary from the official website and add it to your system PATH.

Step 2: Create an HTML Page

Create a simple HTML page that you want to serve with Caddy. For example, create a file named index.html with the following content:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ParottaSalna</title>
</head>
<body>
    <h1>Hello Soldiers !</h1>
    <p>Vanakkam</p>
</body>
</html>

Step 3: Configure Caddy

Create a Caddyfile in the same directory as your index.html file. This file will tell Caddy how to serve your HTML page.

Here’s a simple Caddyfile configuration:

:8080 {
    root * .
    file_server
}

Replace . (current directory) with the path to the directory containing your index.html file.

Explanation

  • :8080: This tells Caddy to listen on port 8080 on your local machine.
  • root * /path/to/your/html: This specifies the directory containing your HTML files.
  • file_server: This directive enables the file server to serve static files.

Step 4: Run Caddy

Navigate to the directory where your Caddyfile is located and start Caddy with the following command:

caddy run

Caddy will read the Caddyfile and start serving your HTML page on the specified port (8080 in this example).

Step 5: Access Your Server Locally

Open a web browser and go to the following URL to view your HTML page:

https://localhost:8080

Step 6: Configure Port Forwarding

To make your server accessible from the internet, you’ll need to set up port forwarding on your router.

Find Your Local IP Address

First, find your local IP address. You can do this by running:

  • Linux/macOS: ifconfig or ip addr
  • Windows: ipconfig

Access Your Router’s Admin Interface

  1. Open a web browser and enter your router’s IP address (commonly 192.168.0.1 or 192.168.1.1). I am using D-Link Router (http://192.168.0.1)
  2. Log in with your router’s admin credentials.

Set Up Port Forwarding (Usual steps)

  1. Locate the port forwarding section in your router’s interface.
  2. Create a new port forwarding rule:
    • Service Name: Caddy (or any name you prefer)
    • External Port: 80 and 443 (for HTTP and HTTPS)
    • Internal Port: 80 and 443
    • Internal IP Address: Your computer’s local IP address
    • Protocol: TCP
  3. Save the changes.

The above steps are subjected to change based on the router. I am using D-Link 615 router and i followed this https://www.cfos.de/en/cfos-personal-net/port-forwarding/d-link-dir-615.htm to enable port forwarding.

Step 7: Access Your Server

Now, you can access your server from anywhere using WAN IP address (you can find the WAN IP from in your router). Enter the address in your browser to see your HTML page served over HTTPS!

Step 8: NO-IP dynamic dns.

You can have a free domain (mostly a subdomain/a random generated domain) from no-ip and assign your ip:port to a domain.

or if you own a domain, you can assign it. I created a subdomain named home.parottasalna.com

and i am able to access my item via http://home.parottasalna.com:8080 as below,

Here i haven’t specified any reverse proxy. You can try setting them aswell so that you don’t need to specify port in the domain.

❌