Merge pull request #279 from Dokploy/fix/remove-expose-port-traefik

feat(traefik): add toggle for disable the traefik dashboard

components/dashboard/settings/web-server.tsx

@@ -8,7 +8,7 @@ import {
 } from "@/components/ui/card";
 import { Label } from "@/components/ui/label";
 import { Switch } from "@/components/ui/switch";
-import React, { useEffect, useState } from "react";
+import React from "react";
 
 import {
 	DropdownMenu,
@@ -37,6 +37,9 @@ export const WebServer = () => {
 		api.settings.reloadTraefik.useMutation();
 	const { mutateAsync: cleanAll, isLoading: cleanAllIsLoading } =
 		api.settings.cleanAll.useMutation();
+	const { mutateAsync: toggleDashboard, isLoading: toggleDashboardIsLoading } =
+		api.settings.toggleDashboard.useMutation();
+
 	const {
 		mutateAsync: cleanDockerBuilder,
 		isLoading: cleanDockerBuilderIsLoading,
@@ -107,6 +110,7 @@ export const WebServer = () => {
 										<span>View Traefik config</span>
 									</DropdownMenuItem>
 								</ShowServerTraefikConfig>
+
 								<ShowServerMiddlewareConfig>
 									<DropdownMenuItem
 										onSelect={(e) => e.preventDefault()}
@@ -124,8 +128,14 @@ export const WebServer = () => {
 					</DropdownMenu>
 
 					<DropdownMenu>
-						<DropdownMenuTrigger asChild disabled={reloadTraefikIsLoading}>
+						<DropdownMenuTrigger
-							<Button isLoading={reloadTraefikIsLoading} variant="outline">
+							asChild
+							disabled={reloadTraefikIsLoading || toggleDashboardIsLoading}
+						>
+							<Button
+								isLoading={reloadTraefikIsLoading || toggleDashboardIsLoading}
+								variant="outline"
+							>
 								Traefik
 							</Button>
 						</DropdownMenuTrigger>
@@ -157,6 +167,38 @@ export const WebServer = () => {
 										<span>View Traefik config</span>
 									</DropdownMenuItem>
 								</ShowMainTraefikConfig>
+								<DropdownMenuItem
+									onClick={async () => {
+										await toggleDashboard({
+											enableDashboard: true,
+										})
+											.then(async () => {
+												toast.success("Dashboard Enabled");
+											})
+											.catch(() => {
+												toast.error("Error to enable Dashboard");
+											});
+									}}
+									className="w-full cursor-pointer space-x-3"
+								>
+									<span>Enable Dashboard</span>
+								</DropdownMenuItem>
+								<DropdownMenuItem
+									onClick={async () => {
+										await toggleDashboard({
+											enableDashboard: false,
+										})
+											.then(async () => {
+												toast.success("Dashboard Disabled");
+											})
+											.catch(() => {
+												toast.error("Error to disable Dashboard");
+											});
+									}}
+									className="w-full cursor-pointer space-x-3"
+								>
+									<span>Disable Dashboard</span>
+								</DropdownMenuItem>
 
 								<DockerTerminalModal appName="dokploy-traefik">
 									<DropdownMenuItem

server/api/routers/settings.ts

@@ -1,12 +1,14 @@
 import { MAIN_TRAEFIK_PATH, MONITORING_PATH, docker } from "@/server/constants";
 import {
 	apiAssignDomain,
+	apiEnableDashboard,
 	apiModifyTraefikConfig,
 	apiReadTraefikConfig,
 	apiSaveSSHKey,
 	apiTraefikConfig,
 	apiUpdateDockerCleanup,
 } from "@/server/db/schema";
+import { initializeTraefik } from "@/server/setup/traefik-setup";
 import {
 	cleanStoppedContainers,
 	cleanUpDockerBuilder,
@@ -67,6 +69,13 @@ export const settingsRouter = createTRPCRouter({
 
 		return true;
 	}),
+	toggleDashboard: adminProcedure
+		.input(apiEnableDashboard)
+		.mutation(async ({ input }) => {
+			await initializeTraefik(input.enableDashboard);
+			return true;
+		}),
+
 	cleanUnusedImages: adminProcedure.mutation(async () => {
 		await cleanUpUnusedImages();
 		return true;

server/db/schema/admin.ts

@@ -93,3 +93,7 @@ export const apiModifyTraefikConfig = z.object({
 export const apiReadTraefikConfig = z.object({
 	path: z.string().min(1),
 });
+
+export const apiEnableDashboard = z.object({
+	enableDashboard: z.boolean().optional(),
+});

server/setup/traefik-setup.ts

@@ -11,7 +11,7 @@ const TRAEFIK_SSL_PORT =
 	Number.parseInt(process.env.TRAEFIK_SSL_PORT ?? "", 10) || 443;
 const TRAEFIK_PORT = Number.parseInt(process.env.TRAEFIK_PORT ?? "", 10) || 80;
 
-export const initializeTraefik = async () => {
+export const initializeTraefik = async (enableDashboard = false) => {
 	const imageName = "traefik:v2.5";
 	const containerName = "dokploy-traefik";
 	const settings: CreateServiceOptions = {
@@ -59,11 +59,15 @@ export const initializeTraefik = async () => {
 					PublishedPort: TRAEFIK_PORT,
 					PublishMode: "host",
 				},
-				{
+				...(enableDashboard
-					TargetPort: 8080,
+					? [
-					PublishedPort: 8080,
+							{
-					PublishMode: "host",
+								TargetPort: 8080,
-				},
+								PublishedPort: 8080,
+								PublishMode: "host" as const,
+							},
+						]
+					: []),
 			],
 		},
 	};