FortiGate DNAT Configuration to Access Local Web Server from Public Network

ForImagine when you have a local webserver on your network, and then you need to publish the webserver but without directly assigning a public ip to it, keeping the server within the local IP segmen instead.

In this tutorial I’ll discuss about it, how to configure DNAT (Virtual IP) to access local webserver from public ip.

The following is the topology used:

I’ll use the similar topology with previous article with slight modifications. We have two local webservers with two VLAN Segments, V-10 is using 172.16.100.0/24 and V-20 is using 172.16.200.0/24.

The Following is the schenario of this lab :

IOSv Router & Switch
FortigateVM
Docker/Apache2 for webserver

We have two public ip (for the labs it still used private ip)
- 10.123.123.100 is used to publish the WebProfile 172.16.100.100
- 10.223.223.200 is used to publish the WebPortal 172.16.200.200

The PC CL configure IP Address 10.250.100.10

CONFIGURATION DEVICES :

Makesure the Configuration on RTR-WAN

RTR-WAN#show run int gig0/0 
Building configuration...
Current configuration : 115 bytes
!
interface GigabitEthernet0/0
  ip address 10.250.1.2 255.255.255.0
end
RTR-WAN#show run int gig0/1
Building configuration...
Current configuration : 117 bytes
!
  interface GigabitEthernet0/1
  ip address 10.250.100.1 255.255.255.0
end
RTR-WAN# show run | s ip route
 ip route 10.123.123.100 255.255.255.255 10.250.1.1
 ip route 10.223.223.200 255.255.255.255 10.250.1.1
RTR-WAN#

Makesure the configuration on Switch, VLAN Configuration and interface port config.

Switch#show vlan brief
VLAN Name Status Ports
---- -------------------------------- --------- -------------------------------
1 default active Gi0/3, Gi1/0, Gi1/1, Gi1/2
Gi1/3
10 VLAN0010 active Gi0/1
20 VLAN0020 active Gi0/2
Switch#show run int gig0/0
Building configuration...
Current configuration : 115 bytes
!
interface GigabitEthernet0/0
  switchport trunk encapsulation dot1q
  switchport mode trunk
end
Switch#show run int gig0/1
Building configuration...
Current configuration : 105 bytes
!
interface GigabitEthernet0/1
  switchport access vlan 10
  switchport mode access
end
Switch#show run int gig0/2
Building configuration...
Current configuration : 105 bytes
!
interface GigabitEthernet0/2
  switchport access vlan 20
  switchport mode access
end

The following is the Network configuration on Fortigate :

Configure static routing to destination IP Network PC CL

Prepare for the WebServer. I’ll use a custom html script to each apache server.

Edit script on /var/www/html/index.html

nano /var/www/html/index.html

For WebProfile :

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Company Profile - VisionCorp</title>
<style>
body {
margin: 0;
font-family: 'Segoe UI', sans-serif;
background-color: #f8f9fa;
color: #333;
}

header {
background-color: #004080;
color: white;
padding: 30px 0;
text-align: center;
}

nav {
background-color: #003366;
display: flex;
justify-content: center;
gap: 25px;
padding: 15px 0;
}

nav a {
color: white;
text-decoration: none;
font-weight: bold;
}

nav a:hover {
color: #ffcc00;
}

.hero {
background: url('https://via.placeholder.com/1600x400?text=Welcome+to+Our+Company') center/cover no-repeat;
height: 400px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
color: white;
text-shadow: 2px 2px 8px #000;
font-size: 2.5rem;
}

.section {
padding: 50px 20px;
max-width: 1100px;
margin: auto;
}

.section h2 {
color: #004080;
margin-bottom: 20px;
}

.about, .services, .contact {
background-color: white;
margin-bottom: 30px;
border-radius: 10px;
padding: 30px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.services ul {
list-style: none;
padding-left: 0;
}

.services li::before {
content: "✔";
margin-right: 10px;
color: green;
}

footer {
background-color: #003366;
color: white;
text-align: center;
padding: 20px;
margin-top: 30px;
}
</style>
</head>
<body>

<header>
<h1>VisionCorp</h1>
<p>Innovating the Future of Business</p>
</header>

<nav>
<a href="#">Home</a>
<a href="#about">About</a>
<a href="#services">Services</a>
<a href="#contact">Contact</a>
</nav>

<section class="hero">
Empowering Ideas into Reality
</section>

<div class="section">

<div id="about" class="about">
<h2>About Us</h2>
<p>
VisionCorp is a leading business consulting and IT solutions provider, helping organizations achieve digital transformation. 
Founded in 2010, we specialize in software development, cloud integration, and strategic planning for businesses of all sizes.
</p>
</div>

<div id="services" class="services">
<h2>Our Services</h2>
<ul>
<li>Business Consulting</li>
<li>Custom Software Development</li>
<li>Cloud & Infrastructure Solutions</li>
<li>Digital Marketing Strategy</li>
<li>IT Support & Maintenance</li>
</ul>
</div>

<div id="contact" class="contact">
<h2>Contact Us</h2>
<p><strong>Address:</strong> Jl. Teknologi No. 10, Jakarta, Indonesia</p>
<p><strong>Email:</strong> info@visioncorp.com</p>
<p><strong>Phone:</strong> +62 21 555 1234</p>
<p><strong>Business Hours:</strong> Monday - Friday, 09:00 - 17:00</p>
</div>

</div>

<footer>
<p>&copy; 2025 VisionCorp. All rights reserved.</p>
</footer>

</body>
</html>

For WebPortal :

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Company Portal - IntraOffice</title>
<style>
body {
margin: 0;
font-family: 'Segoe UI', sans-serif;
background-color: #f4f6f8;
color: #333;
}

header {
background-color: #1a237e;
color: white;
padding: 20px;
text-align: center;
}

nav {
background-color: #3949ab;
display: flex;
justify-content: center;
gap: 30px;
padding: 12px 0;
}

nav a {
color: white;
text-decoration: none;
font-weight: bold;
}

nav a:hover {
text-decoration: underline;
}

.main {
max-width: 1200px;
margin: auto;
padding: 30px 20px;
}

.announcement, .quick-links {
background-color: white;
padding: 25px;
margin-bottom: 30px;
border-radius: 8px;
box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

.announcement h2,
.quick-links h2 {
color: #1a237e;
margin-bottom: 15px;
}

.quick-links-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
}

.link-box {
background-color: #e8eaf6;
padding: 20px;
text-align: center;
border-radius: 8px;
transition: 0.3s;
}

.link-box:hover {
background-color: #c5cae9;
cursor: pointer;
}

footer {
background-color: #1a237e;
color: white;
text-align: center;
padding: 20px;
margin-top: 30px;
}
</style>
</head>
<body>

<header>
<h1>IntraOffice Web Portal</h1>
<p>Welcome to the Internal Portal of PT. Modern Solusi</p>
</header>

<nav>
<a href="#">Home</a>
<a href="#">Announcements</a>
<a href="#">Employee Directory</a>
<a href="#">Support</a>
<a href="#">Logout</a>
</nav>

<div class="main">
<section class="announcement">
<h2>📢 Latest Announcements</h2>
<ul>
<li>📅 Office will be closed on August 17th for Independence Day.</li>
<li>🛠️ Maintenance scheduled for internal servers on Saturday, 9:00 AM - 12:00 PM.</li>
<li>🎉 Congratulations to the Sales Team for achieving Q3 Targets!</li>
</ul>
</section>

<section class="quick-links">
<h2>🔗 Quick Access</h2>
<div class="quick-links-grid">
<div class="link-box">
<h3>HR Portal</h3>
<p>Leave Requests, Attendance, Payslip</p>
</div>
<div class="link-box">
<h3>IT Helpdesk</h3>
<p>Report Issues, Request Access</p>
</div>
<div class="link-box">
<h3>Finance</h3>
<p>Expense Claims, Budget Reports</p>
</div>
<div class="link-box">
<h3>Company Docs</h3>
<p>Policies, Templates, Forms</p>
</div>
<div class="link-box">
<h3>Project Tracker</h3>
<p>Monitor ongoing projects</p>
</div>
</div>
</section>
</div>

<footer>
<p>&copy; 2025 PT. Modern Solusi. Internal Use Only.</p>
</footer>

</body>
</html>

Now, Configuration DNAT on fortigate firewall.

Create two Virtual IP for WebProfile and WebPortal IP.