Add TCP/UDP port mapping support

- Add app_ports table for storing port mappings per app
- Add Port model with CRUD operations
- Add handlers for adding/deleting port mappings
- Add ports section to app detail template
- Update Docker client to configure port bindings when creating containers
- Support both TCP and UDP protocols
This commit is contained in:
2025-12-30 12:11:57 +07:00
parent 4ece7431af
commit bc275f7b9c
9 changed files with 398 additions and 5 deletions

View File

@@ -213,6 +213,58 @@
</form>
</div>
<!-- Ports -->
<div class="card p-6 mb-6">
<h2 class="section-title mb-4">Port Mappings</h2>
{{if .Ports}}
<div class="overflow-x-auto mb-4">
<table class="table">
<thead class="table-header">
<tr>
<th>Host Port</th>
<th>Container Port</th>
<th>Protocol</th>
<th class="text-right">Actions</th>
</tr>
</thead>
<tbody class="table-body">
{{range .Ports}}
<tr>
<td class="font-mono">{{.HostPort}}</td>
<td class="font-mono">{{.ContainerPort}}</td>
<td>
{{if eq .Protocol "udp"}}
<span class="badge-warning">UDP</span>
{{else}}
<span class="badge-info">TCP</span>
{{end}}
</td>
<td class="text-right">
<form method="POST" action="/apps/{{$.App.ID}}/ports/{{.ID}}/delete" class="inline" data-confirm="Delete this port mapping?">
<button type="submit" class="text-error-500 hover:text-error-700 text-sm">Delete</button>
</form>
</td>
</tr>
{{end}}
</tbody>
</table>
</div>
{{end}}
<form method="POST" action="/apps/{{.App.ID}}/ports" class="flex flex-col sm:flex-row gap-2 items-end">
<div class="flex-1 w-full">
<input type="number" name="host_port" placeholder="Host port" required min="1" max="65535" class="input font-mono text-sm">
</div>
<div class="flex-1 w-full">
<input type="number" name="container_port" placeholder="Container port" required min="1" max="65535" class="input font-mono text-sm">
</div>
<select name="protocol" class="input text-sm">
<option value="tcp">TCP</option>
<option value="udp">UDP</option>
</select>
<button type="submit" class="btn-primary">Add</button>
</form>
</div>
<!-- Recent Deployments -->
<div class="card p-6 mb-6">
<div class="flex items-center justify-between mb-4">