nessi/NexaVPN
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add public-facing web interface with domain-based routing

Browse Source 
Add public-web service with static landing page for client enrollment and device provisioning. Add public-web container to docker-compose with port 8082. Configure nginx reverse proxy with domain-based routing: admin-vpn.nesterovic.cc for admin interface and vpn.nesterovic.cc for public interface. Add proxy headers for X-Real-IP, X-Forwarded-For and X-Forwarded-Proto to both server blocks. Create public-web Dockerfile with nginx serving
This commit is contained in:
Sascha Nesterovic
2026-03-17 22:09:37 +01:00
parent a67fae5c44
commit 65e74c6832
6 changed files with 213 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
deploy/docker-compose.yml
View File

@@ -44,11 +44,21 @@ services:
networks:
- control
public-web:
build:
context: ..
dockerfile: public-web/Dockerfile
ports:
- "8082:80"
networks:
- control
reverse-proxy:
image: nginx:1.27-alpine
depends_on:
- backend
- admin-web
- public-web
ports:
- "80:80"
volumes:

25
deploy/nginx/reverse-proxy.conf
View File

@@ -1,6 +1,6 @@
server {
listen 80;
server_name _;
server_name admin-vpn.nesterovic.cc;
location /api/ {
proxy_pass http://backend:8080;
@@ -13,6 +13,29 @@ server {
location / {
proxy_pass http://admin-web:80;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
}
}
server {
listen 80;
server_name vpn.nesterovic.cc _;
location /api/ {
proxy_pass http://backend:8080;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
}
location / {
proxy_pass http://public-web:80;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
}
}

8
public-web/Dockerfile Normal file
View File

@@ -0,0 +1,8 @@
FROM nginx:1.27-alpine
COPY public-web/index.html /usr/share/nginx/html/index.html
COPY public-web/styles.css /usr/share/nginx/html/styles.css
COPY admin-web/public/NexaVPN_Logo.png /usr/share/nginx/html/NexaVPN_Logo.png
COPY admin-web/public/NexaVPN_Logo_Only.png /usr/share/nginx/html/NexaVPN_Logo_Only.png
COPY admin-web/public/favicon.ico /usr/share/nginx/html/favicon.ico
COPY public-web/nginx.conf /etc/nginx/conf.d/default.conf

35
public-web/index.html Normal file
View File

@@ -0,0 +1,35 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>NexaVPN</title>
<link rel="icon" href="/favicon.ico" />
<link rel="stylesheet" href="/styles.css" />
</head>
<body>
<main class="shell">
<section class="hero">
<img class="logo" src="/NexaVPN_Logo.png" alt="NexaVPN" />
<p class="eyebrow">Private access</p>
<h1>Connect with the NexaVPN app.</h1>
<p class="copy">
Use the desktop client to sign in, provision this device, and connect to your private network.
</p>
<div class="actions">
<a class="button primary" href="https://admin-vpn.nesterovic.cc">Admin portal</a>
<a class="button secondary" href="/api/v1/healthz">API health</a>
</div>
</section>
<section class="card">
<h2>What this host is for</h2>
<ul>
<li>Desktop client login and device enrollment</li>
<li>Profile sync for provisioned devices</li>
<li>Public VPN entrypoint information</li>
</ul>
</section>
</main>
</body>
</html>

10
public-web/nginx.conf Normal file
View File

@@ -0,0 +1,10 @@
server {
listen 80;
server_name _;
root /usr/share/nginx/html;
index index.html;
location / {
try_files $uri /index.html;
}
}

126
public-web/styles.css Normal file
View File

@@ -0,0 +1,126 @@
:root {
color-scheme: dark;
font-family: "Segoe UI", "SF Pro Text", "Helvetica Neue", sans-serif;
--bg: #08111d;
--panel: rgba(15, 24, 41, 0.82);
--text: #eef4ff;
--muted: #a7b7d4;
--line: rgba(177, 197, 229, 0.14);
--accent: #74e0b8;
--accent-strong: #1fb67a;
}
* {
box-sizing: border-box;
}
body {
margin: 0;
min-height: 100vh;
color: var(--text);
background:
radial-gradient(circle at top left, rgba(116, 224, 184, 0.17), transparent 25%),
radial-gradient(circle at right, rgba(74, 120, 255, 0.12), transparent 20%),
linear-gradient(180deg, #07101c 0%, #0d1728 100%);
}
.shell {
width: min(960px, 100%);
margin: 0 auto;
min-height: 100vh;
display: grid;
align-content: center;
gap: 24px;
padding: 32px 24px;
}
.hero,
.card {
background: var(--panel);
border: 1px solid var(--line);
border-radius: 28px;
box-shadow: 0 24px 72px rgba(3, 8, 20, 0.34);
backdrop-filter: blur(16px);
}
.hero {
display: grid;
gap: 18px;
padding: 32px;
}
.logo {
width: min(280px, 100%);
height: auto;
}
.eyebrow {
margin: 0;
color: var(--accent);
text-transform: uppercase;
letter-spacing: 0.18em;
font-size: 0.78rem;
}
h1,
h2,
p,
ul {
margin: 0;
}
h1 {
font-size: clamp(2rem, 5vw, 3.4rem);
line-height: 1.05;
}
.copy {
max-width: 42rem;
color: var(--muted);
line-height: 1.6;
font-size: 1.05rem;
}
.actions {
display: flex;
gap: 12px;
flex-wrap: wrap;
}
.button {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 12px 18px;
border-radius: 999px;
text-decoration: none;
font-weight: 700;
}
.button.primary {
background: linear-gradient(135deg, var(--accent) 0%, var(--accent-strong) 100%);
color: #04141a;
}
.button.secondary {
border: 1px solid var(--line);
color: var(--text);
background: rgba(255, 255, 255, 0.03);
}
.card {
padding: 24px 28px;
}
.card ul {
padding-left: 20px;
color: var(--muted);
line-height: 1.8;
}
@media (max-width: 720px) {
.hero,
.card {
padding: 24px;
}
}