Dokploy/dokploy
1
0
Fork 0
mirror of https://github.com/Dokploy/dokploy synced 2025-06-26 18:27:59 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

refactor(domains): make traefik domains generate in a single click

Browse Source
This commit is contained in:
Mauricio Siu 2024-08-15 01:02:11 -06:00
parent 29ca894a97
commit ecb919e109
15 changed files with 6321 additions and 211 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

61
apps/dokploy/components/dashboard/application/domains/add-domain.tsx
View File

@ -27,13 +27,20 @@ import {
SelectValue,
} from "@/components/ui/select";
import { Switch } from "@/components/ui/switch";
import {
Tooltip,
TooltipContent,
TooltipProvider,
TooltipTrigger,
} from "@/components/ui/tooltip";
import { api } from "@/utils/api";
import { useEffect, useState } from "react";
import { useForm } from "react-hook-form";
import { toast } from "sonner";
import { domain } from "@/server/db/validations";
import { domain } from "@/server/db/validations/domain";
import { zodResolver } from "@hookform/resolvers/zod";
import { Dices } from "lucide-react";
import type z from "zod";
type Domain = z.infer<typeof domain>;
@ -60,10 +67,22 @@ export const AddDomain = ({
},
);
const { data: application } = api.application.one.useQuery(
{
applicationId,
},
{
enabled: !!applicationId,
},
);
const { mutateAsync, isError, error, isLoading } = domainId
? api.domain.update.useMutation()
: api.domain.create.useMutation();
const { mutateAsync: generateDomain, isLoading: isLoadingGenerate } =
api.domain.generateDomain.useMutation();
const form = useForm<Domain>({
resolver: zodResolver(domain),
});
@ -75,7 +94,6 @@ export const AddDomain = ({
/* Convert null to undefined */
path: data?.path || undefined,
port: data?.port || undefined,
serviceName: data?.serviceName || undefined,
});
}
@ -143,9 +161,42 @@ export const AddDomain = ({
render={({ field }) => (
<FormItem>
<FormLabel>Host</FormLabel>
<FormControl>
<Input placeholder="api.dokploy.com" {...field} />
</FormControl>
<div className="flex max-lg:flex-wrap sm:flex-row gap-2">
<FormControl>
<Input placeholder="api.dokploy.com" {...field} />
</FormControl>
<TooltipProvider delayDuration={0}>
<Tooltip>
<TooltipTrigger asChild>
<Button
variant="secondary"
type="button"
isLoading={isLoadingGenerate}
onClick={() => {
generateDomain({
appName: application?.appName || "",
})
.then((domain) => {
field.onChange(domain);
})
.catch((err) => {
toast.error(err.message);
});
}}
>
<Dices className="size-4 text-muted-foreground" />
</Button>
</TooltipTrigger>
<TooltipContent
side="left"
sideOffset={5}
className="max-w-[10rem]"
>
<p>Generate traefik.me domain</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>
</div>
<FormMessage />
</FormItem>

55
apps/dokploy/components/dashboard/compose/domains/add-domain.tsx
View File

@ -40,12 +40,12 @@ import {
} from "@/components/ui/tooltip";
import { domainCompose } from "@/server/db/validations/domain";
import { zodResolver } from "@hookform/resolvers/zod";
import { DatabaseZap, RefreshCw } from "lucide-react";
import { DatabaseZap, Dices, RefreshCw } from "lucide-react";
import type z from "zod";
type Domain = z.infer<typeof domainCompose>;
type CacheType = "fetch" | "cache";
export type CacheType = "fetch" | "cache";
interface Props {
composeId: string;
@ -70,6 +70,15 @@ export const AddDomainCompose = ({
},
);
const { data: compose } = api.compose.one.useQuery(
{
composeId,
},
{
enabled: !!composeId,
},
);
const {
data: services,
isFetching: isLoadingServices,
@ -86,6 +95,9 @@ export const AddDomainCompose = ({
},
);
const { mutateAsync: generateDomain, isLoading: isLoadingGenerate } =
api.domain.generateDomain.useMutation();
const { mutateAsync, isError, error, isLoading } = domainId
? api.domain.update.useMutation()
: api.domain.create.useMutation();
@ -279,9 +291,42 @@ export const AddDomainCompose = ({
render={({ field }) => (
<FormItem>
<FormLabel>Host</FormLabel>
<FormControl>
<Input placeholder="api.dokploy.com" {...field} />
</FormControl>
<div className="flex max-lg:flex-wrap sm:flex-row gap-2">
<FormControl>
<Input placeholder="api.dokploy.com" {...field} />
</FormControl>
<TooltipProvider delayDuration={0}>
<Tooltip>
<TooltipTrigger asChild>
<Button
variant="secondary"
type="button"
isLoading={isLoadingGenerate}
onClick={() => {
generateDomain({
appName: compose?.appName || "",
})
.then((domain) => {
field.onChange(domain);
})
.catch((err) => {
toast.error(err.message);
});
}}
>
<Dices className="size-4 text-muted-foreground" />
</Button>
</TooltipTrigger>
<TooltipContent
side="left"
sideOffset={5}
className="max-w-[10rem]"
>
<p>Generate traefik.me domain</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>
</div>
<FormMessage />
</FormItem>

79
apps/dokploy/components/dashboard/compose/domains/generate-domain.tsx
View File

@ -1,79 +0,0 @@
import { Button } from "@/components/ui/button";
import {
Dialog,
DialogContent,
DialogDescription,
DialogHeader,
DialogTitle,
DialogTrigger,
} from "@/components/ui/dialog";
import { api } from "@/utils/api";
import { RefreshCcw } from "lucide-react";
import Link from "next/link";
import { GenerateTraefikMe } from "./generate-traefikme";
import { GenerateWildCard } from "./generate-wildcard";
interface Props {
applicationId: string;
}
export const GenerateDomain = ({ applicationId }: Props) => {
return (
<Dialog>
<DialogTrigger className="" asChild>
<Button variant="secondary">
Generate Domain
<RefreshCcw className="size-4 text-muted-foreground " />
</Button>
</DialogTrigger>
<DialogContent className="max-h-screen overflow-y-auto sm:max-w-2xl">
<DialogHeader>
<DialogTitle>Generate Domain</DialogTitle>
<DialogDescription>
Generate Domains for your applications
</DialogDescription>
</DialogHeader>
<div className="flex flex-col gap-4 w-full">
<ul className="flex flex-col gap-4">
<li className="flex flex-row items-center gap-4">
<div className="flex flex-col gap-2">
<div className="text-base font-bold">
1. Generate TraefikMe Domain
</div>
<div className="text-sm text-muted-foreground">
This option generates a free domain provided by{" "}
<Link
href="https://traefik.me"
className="text-primary"
target="_blank"
>
TraefikMe
</Link>
. We recommend using this for quick domain testing or if you
don't have a domain yet.
</div>
</div>
</li>
{/* <li className="flex flex-row items-center gap-4">
<div className="flex flex-col gap-2">
<div className="text-base font-bold">
2. Use Wildcard Domain
</div>
<div className="text-sm text-muted-foreground">
To use this option, you need to set up an 'A' record in your
domain provider. For example, create a record for
*.yourdomain.com.
</div>
</div>
</li> */}
</ul>
<div className="flex flex-row gap-4 w-full">
<GenerateTraefikMe applicationId={applicationId} />
{/* <GenerateWildCard applicationId={applicationId} /> */}
</div>
</div>
</DialogContent>
</Dialog>
);
};

69
apps/dokploy/components/dashboard/compose/domains/generate-traefikme.tsx
View File

@ -1,69 +0,0 @@
import {
AlertDialog,
AlertDialogAction,
AlertDialogCancel,
AlertDialogContent,
AlertDialogDescription,
AlertDialogFooter,
AlertDialogHeader,
AlertDialogTitle,
AlertDialogTrigger,
} from "@/components/ui/alert-dialog";
import { Button } from "@/components/ui/button";
import { api } from "@/utils/api";
import { RefreshCcw } from "lucide-react";
import React from "react";
import { toast } from "sonner";
interface Props {
applicationId: string;
}
export const GenerateTraefikMe = ({ applicationId }: Props) => {
const { mutateAsync, isLoading } = api.domain.generateDomain.useMutation();
const utils = api.useUtils();
return (
<AlertDialog>
<AlertDialogTrigger asChild>
<Button variant="secondary" isLoading={isLoading}>
Generate Domain
<RefreshCcw className="size-4 text-muted-foreground " />
</Button>
</AlertDialogTrigger>
<AlertDialogContent>
<AlertDialogHeader>
<AlertDialogTitle>
Are you sure to generate a new domain?
</AlertDialogTitle>
<AlertDialogDescription>
This will generate a new domain and will be used to access to the
application
</AlertDialogDescription>
</AlertDialogHeader>
<AlertDialogFooter>
<AlertDialogCancel>Cancel</AlertDialogCancel>
<AlertDialogAction
onClick={async () => {
await mutateAsync({
applicationId,
})
.then((data) => {
utils.domain.byApplicationId.invalidate({
applicationId: applicationId,
});
utils.application.readTraefikConfig.invalidate({
applicationId: applicationId,
});
toast.success("Generated Domain succesfully");
})
.catch(() => {
toast.error("Error to generate Domain");
});
}}
>
Confirm
</AlertDialogAction>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialog>
);
};

6
apps/dokploy/components/dashboard/compose/domains/show-domains.tsx
View File

@ -26,6 +26,7 @@ export const ShowDomainsCompose = ({ composeId }: Props) => {
enabled: !!composeId,
},
);
return (
<div className="flex w-full flex-col gap-5 ">
<Card className="bg-background">
@ -45,9 +46,6 @@ export const ShowDomainsCompose = ({ composeId }: Props) => {
</Button>
</AddDomainCompose>
)}
{/* {data && data?.length > 0 && (
<GenerateDomain composeId={composeId} />
)} */}
</div>
</CardHeader>
<CardContent className="flex w-full flex-row gap-4">
@ -64,8 +62,6 @@ export const ShowDomainsCompose = ({ composeId }: Props) => {
<GlobeIcon className="size-4" /> Add Domain
</Button>
</AddDomainCompose>
{/* <GenerateDomain composeId={composeId} /> */}
</div>
</div>
) : (

4
apps/dokploy/components/dashboard/compose/general/generic/show.tsx
View File

@ -30,9 +30,9 @@ export const ShowProviderFormCompose = ({ composeId }: Props) => {
Select the source of your code
</p>
</div>
<div className="hidden space-y-1 text-sm font-normal md:block">
{/* <div className="hidden space-y-1 text-sm font-normal md:block">
<GitBranch className="size-6 text-muted-foreground" />
</div>
</div> */}
<ShowConvertedCompose composeId={composeId} />
</CardTitle>
</CardHeader>

15
apps/dokploy/drizzle/0031_steep_vulture.sql Normal file
View File

@ -0,0 +1,15 @@
DO $$ BEGIN
CREATE TYPE "public"."domainType" AS ENUM('compose', 'application');
EXCEPTION
WHEN duplicate_object THEN null;
END $$;
--> statement-breakpoint
ALTER TABLE "domain" ALTER COLUMN "applicationId" DROP NOT NULL;--> statement-breakpoint
ALTER TABLE "domain" ADD COLUMN "serviceName" text;--> statement-breakpoint
ALTER TABLE "domain" ADD COLUMN "domainType" "domainType" DEFAULT 'application';--> statement-breakpoint
ALTER TABLE "domain" ADD COLUMN "composeId" text;--> statement-breakpoint
DO $$ BEGIN
ALTER TABLE "domain" ADD CONSTRAINT "domain_composeId_compose_composeId_fk" FOREIGN KEY ("composeId") REFERENCES "public"."compose"("composeId") ON DELETE cascade ON UPDATE no action;
EXCEPTION
WHEN duplicate_object THEN null;
END $$;

1
apps/dokploy/drizzle/0032_flashy_shadow_king.sql Normal file
View File

@ -0,0 +1 @@
ALTER TABLE "domain" ALTER COLUMN "port" SET DEFAULT 3000;

3071
apps/dokploy/drizzle/meta/0031_snapshot.json Normal file
View File

File diff suppressed because it is too large Load Diff

3071
apps/dokploy/drizzle/meta/0032_snapshot.json Normal file
View File

File diff suppressed because it is too large Load Diff

14
apps/dokploy/drizzle/meta/_journal.json
View File

@ -218,6 +218,20 @@
"when": 1723608499147,
"tag": "0030_little_kabuki",
"breakpoints": true
},
{
"idx": 31,
"version": "6",
"when": 1723701656243,
"tag": "0031_steep_vulture",
"breakpoints": true
},
{
"idx": 32,
"version": "6",
"when": 1723705257806,
"tag": "0032_flashy_shadow_king",
"breakpoints": true
}
]
}

7
apps/dokploy/server/api/routers/domain.ts
View File

@ -1,6 +1,7 @@
import { createTRPCRouter, protectedProcedure } from "@/server/api/trpc";
import {
apiCreateDomain,
apiCreateTraefikMeDomain,
apiFindCompose,
apiFindDomain,
apiFindDomainByApplication,
@ -16,7 +17,7 @@ import {
findDomainById,
findDomainsByApplicationId,
findDomainsByComposeId,
generateDomain,
generateTraefikMeDomain,
generateWildcard,
removeDomainById,
updateDomainById,
@ -47,9 +48,9 @@ export const domainRouter = createTRPCRouter({
return await findDomainsByComposeId(input.composeId);
}),
generateDomain: protectedProcedure
.input(apiFindDomainByApplication)
.input(apiCreateTraefikMeDomain)
.mutation(async ({ input }) => {
return generateDomain(input);
return generateTraefikMeDomain(input.appName);
}),
generateWildcard: protectedProcedure
.input(apiFindDomainByApplication)

56
apps/dokploy/server/api/services/domain.ts
View File

@ -37,48 +37,34 @@ export const createDomain = async (input: typeof apiCreateDomain._type) => {
});
};
export const generateDomain = async (
input: typeof apiFindDomainByApplication._type,
) => {
const application = await findApplicationById(input.applicationId);
export const generateTraefikMeDomain = async (appName: string) => {
const admin = await findAdmin();
const domain = await createDomain({
applicationId: application.applicationId,
host: generateRandomDomain({
serverIp: admin.serverIp || "",
projectName: application.appName,
}),
port: 3000,
certificateType: "none",
https: false,
path: "/",
return generateRandomDomain({
serverIp: admin.serverIp || "",
projectName: appName,
});
return domain;
};
export const generateWildcard = async (
input: typeof apiFindDomainByApplication._type,
) => {
const application = await findApplicationById(input.applicationId);
const admin = await findAdmin();
if (!admin.host) {
throw new TRPCError({
code: "BAD_REQUEST",
message: "We need a host to generate a wildcard domain",
});
}
const domain = await createDomain({
applicationId: application.applicationId,
host: generateWildcardDomain(application.appName, admin.host || ""),
port: 3000,
certificateType: "none",
https: false,
path: "/",
});
return domain;
// const application = await findApplicationById(input.applicationId);
// const admin = await findAdmin();
// if (!admin.host) {
// throw new TRPCError({
// code: "BAD_REQUEST",
// message: "We need a host to generate a wildcard domain",
// });
// }
// const domain = await createDomain({
// applicationId: application.applicationId,
// host: generateWildcardDomain(application.appName, admin.host || ""),
// port: 3000,
// certificateType: "none",
// https: false,
// path: "/",
// });
// return domain;
};
export const generateWildcardDomain = (

7
apps/dokploy/server/db/schema/domain.ts
View File

@ -10,6 +10,7 @@ import {
} from "drizzle-orm/pg-core";
import { createInsertSchema } from "drizzle-zod";
import { nanoid } from "nanoid";
import { z } from "zod";
import { applications } from "./application";
import { compose } from "./compose";
import { certificateType } from "./shared";
@ -23,7 +24,7 @@ export const domains = pgTable("domain", {
.$defaultFn(() => nanoid()),
host: text("host").notNull(),
https: boolean("https").notNull().default(false),
port: integer("port").default(80),
port: integer("port").default(3000),
path: text("path").default("/"),
serviceName: text("serviceName"),
domainType: domainType("domainType").default("application"),
@ -76,6 +77,10 @@ export const apiFindDomainByApplication = createSchema.pick({
applicationId: true,
});
export const apiCreateTraefikMeDomain = createSchema.pick({}).extend({
appName: z.string().min(1),
});
export const apiFindDomainByCompose = createSchema.pick({
composeId: true,
});

16
apps/dokploy/server/utils/docker/domain.ts
View File

@ -61,9 +61,7 @@ export const addDomainToCompose = async (
const result = await loadDockerCompose(compose);
if (!result) {
throw new Error(
"Error to load docker compose, the file is empty or not found",
);
return null;
}
for (const domain of domains) {
@ -89,10 +87,14 @@ export const addDomainToCompose = async (
}
if (Array.isArray(result.services[serviceName].labels)) {
result.services[serviceName].labels.push(
"traefik.enable=true",
...httpLabels,
);
const haveTraefikEnableLabel = result.services[
serviceName
].labels.includes("traefik.enable=true");
if (!haveTraefikEnableLabel) {
result.services[serviceName].labels.push("traefik.enable=true");
}
result.services[serviceName].labels.push(...httpLabels);
}
}