ACESS YOUR LOCAL APPLICATION VIA INTERNET

By: Mr.ParottaSalna

5 August 2024 at 16:32

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

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)
Log in with your router’s admin credentials.

Set Up Port Forwarding (Usual steps)

Locate the port forwarding section in your router’s interface.
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
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.

Normal view