Shiloh/lasthourcloud
Shiloh/lasthourcloud
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 4 Wiki Activity

feat: Heroku deployments

Browse Source
This commit is contained in:
Andras Bacsai 2022-08-16 13:58:37 +02:00
parent bb01cfb330
commit a7fe446550
12 changed files with 166 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
apps/api/src/jobs/deployApplication.ts
View File

@ -152,6 +152,13 @@ import * as buildpacks from '../lib/buildPacks';
.createHash('sha256')
.update(
JSON.stringify({
pythonWSGI,
pythonModule,
pythonVariable,
deploymentType,
denoOptions,
baseImage,
baseBuildImage,
buildPack,
port,
exposePort,
@ -291,6 +298,7 @@ import * as buildpacks from '../lib/buildPacks';
}
};
});
console.log({port})
const composeFile = {
version: '3.8',
services: {

19
apps/api/src/lib/buildPacks/common.ts
View File

@ -252,6 +252,20 @@ export function setDefaultBaseImage(buildPack: string | null, deploymentType: st
label: 'python:3.7-slim-bullseye'
}
];
const herokuVersions = [
{
value: 'heroku/builder:22',
label: 'heroku/builder:22'
},
{
value: 'heroku/buildpacks:20',
label: 'heroku/buildpacks:20'
},
{
value: 'heroku/builder-classic:22',
label: 'heroku/builder-classic:22'
},
]
let payload: any = {
baseImage: null,
baseBuildImage: null,
@ -299,6 +313,11 @@ export function setDefaultBaseImage(buildPack: string | null, deploymentType: st
payload.baseBuildImage = 'node:18';
payload.baseBuildImages = nodeVersions;
}
if (buildPack === 'heroku') {
payload.baseImage = 'heroku/buildpacks:20';
payload.baseImages = herokuVersions;
}
return payload;
}

2
apps/ui/src/lib/common.ts
View File

@ -229,7 +229,7 @@ export const staticDeployments = [
'astro',
'eleventy'
];
export const notNodeDeployments = ['php', 'docker', 'rust', 'python', 'deno', 'laravel'];
export const notNodeDeployments = ['php', 'docker', 'rust', 'python', 'deno', 'laravel', 'heroku'];
export function generateRemoteEngine(destination: any) {

7
apps/ui/src/lib/components/Toast.svelte
View File

@ -5,16 +5,17 @@
</script>
<div
on:click={() => dispatch('click')}
on:mouseover={() => dispatch('pause')}
on:focus={() => dispatch('pause')}
on:mouseout={() => dispatch('resume')}
on:blur={() => dispatch('resume')}
class="alert shadow-lg text-white rounded"
class="alert shadow-lg text-white rounded hover:scale-105 transition-all duration-100 cursor-pointer"
class:bg-coollabs={type === 'success'}
class:alert-error={type === 'error'}
class:alert-info={type === 'info'}
>
<!-- {#if type === 'success'}
{#if type === 'success'}
<svg
xmlns="http://www.w3.org/2000/svg"
class="stroke-current flex-shrink-0 h-6 w-6"
@ -53,6 +54,6 @@
d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
/></svg
>
{/if} -->
{/if}
<slot />
</div>

5
apps/ui/src/lib/components/Toasts.svelte
View File

@ -2,7 +2,7 @@
import { fade } from 'svelte/transition';
import Toast from './Toast.svelte';
import { pauseToast, resumeToast, toasts } from '$lib/store';
import { dismissToast, pauseToast, resumeToast, toasts } from '$lib/store';
</script>
{#if $toasts}
@ -12,7 +12,8 @@
<Toast
type={toast.type}
on:resume={() => resumeToast(toast.id)}
on:pause={() => pauseToast(toast.id)}>{@html toast.message}</Toast
on:pause={() => pauseToast(toast.id)}
on:click={() => dismissToast(toast.id)}>{@html toast.message}</Toast
>
{/each}
</article>

2
apps/ui/src/lib/components/svg/applications/ApplicationIcons.svelte
View File

@ -38,4 +38,6 @@
<Icons.Deno {isAbsolute} />
{:else if application.buildPack?.toLowerCase() === 'laravel'}
<Icons.Laravel {isAbsolute} />
{:else if application.buildPack?.toLowerCase() === 'heroku'}
<Icons.Heroku {isAbsolute} />
{/if}

23
apps/ui/src/lib/components/svg/applications/Heroku.svelte Normal file
View File

@ -0,0 +1,23 @@
<script lang="ts">
export let isAbsolute = true;
</script>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class={isAbsolute ? 'absolute top-0 left-0 -m-4 h-10 w-10' : 'mx-auto w-8 h-8'} viewBox="0 0 72 80">
<defs>
<radialGradient id="a" cx="50%" cy="50%" r="74.309%" fx="50%" fy="50%" gradientTransform="matrix(1 0 0 .89474 0 .053)">
<stop offset="0%" stop-color="#844DB8"/>
<stop offset="100%" stop-color="#5B16A3"/>
</radialGradient>
<linearGradient id="c" x1="10.528%" x2="95.325%" y1="94.375%" y2="-.956%">
<stop offset="0%" stop-color="#7673C0" stop-opacity=".5"/>
<stop offset="100%" stop-color="#7673C0" stop-opacity="0"/>
</linearGradient>
<rect id="b" width="68" height="76" x="2" y="2" rx="5"/>
</defs>
<g fill="none" fill-rule="evenodd">
<g fill-rule="nonzero">
<use fill="url(#a)" xlink:href="#b"/>
<use fill="url(#c)" xlink:href="#b"/>
</g>
<path fill="#FFF" d="M64.8,0 C68.776,0 72,3.224 72,7.2 L72,7.2 L72,72.8 C72,76.776 68.776,80 64.8,80 L64.8,80 L7.2,80 C3.224,80 0,76.776 0,72.8 L0,72.8 L0,7.2 C0,3.224 3.224,0 7.2,0 L7.2,0 Z M64.8,4 L7.2,4 C5.436,4 4,5.435 4,7.2 L4,7.2 L4,72.8 C4,74.564 5.436,76 7.2,76 L7.2,76 L64.8,76 C66.565,76 68,74.564 68,72.8 L68,72.8 L68,7.2 C68,5.435 66.565,4 64.8,4 L64.8,4 Z M19,52 L28,60 L19,68 L19,52 Z M27,12 L27,34.711 C30.994,33.411 36.577,32 42,32 C46.945,32 49.905,33.944 51.517,35.575 C54.814625,38.91 54.995191,43.1202378 55.0003112,43.9159307 L55.0002258,68 L47,68 L47,44.11 C46.961,42.243 46.062,40 42,40 C34.230209,40 25.5570898,43.7328438 24.7166549,44.1028638 L24.651,44.132 L19,46.692 L19,12 L27,12 Z M55,12 C54.46,16.544 52.618,20.9 49,25 L49,25 L41,25 C44.144,20.875 46.118,16.534 47,12 L47,12 Z"/>
</g>
</svg>

2
apps/ui/src/lib/components/svg/applications/index.ts
View File

@ -16,4 +16,4 @@ export { default as Astro } from './Astro.svelte';
export { default as Eleventy } from './Eleventy.svelte';
export { default as Deno } from './Deno.svelte';
export { default as Laravel } from './Laravel.svelte';
export { default as Heroku } from './Heroku.svelte';

77
apps/ui/src/lib/templates.ts
View File

@ -170,6 +170,16 @@ export function findBuildPack(pack: string, packageManager = 'npm') {
port: 80
};
}
if (pack === 'heroku') {
return {
...metaData,
installCommand: null,
buildCommand: null,
startCommand: null,
publishDirectory: null,
port: 5000
};
}
return {
name: 'node',
fancyName: 'Node.js',
@ -187,118 +197,137 @@ export const buildPacks = [
name: 'node',
fancyName: 'Node.js',
hoverColor: 'hover:bg-green-700',
color: 'bg-green-700'
color: 'bg-green-700',
isCoolifyBuildPack: true,
},
{
name: 'static',
fancyName: 'Static',
hoverColor: 'hover:bg-orange-700',
color: 'bg-orange-700'
color: 'bg-orange-700',
isCoolifyBuildPack: true,
},
{
name: 'php',
fancyName: 'PHP',
hoverColor: 'hover:bg-indigo-700',
color: 'bg-indigo-700'
color: 'bg-indigo-700',
isCoolifyBuildPack: true,
},
{
name: 'laravel',
fancyName: 'Laravel',
hoverColor: 'hover:bg-indigo-700',
color: 'bg-indigo-700'
color: 'bg-indigo-700',
isCoolifyBuildPack: true,
},
{
name: 'docker',
fancyName: 'Docker',
hoverColor: 'hover:bg-sky-700',
color: 'bg-sky-700'
color: 'bg-sky-700',
isCoolifyBuildPack: true,
},
{
name: 'svelte',
fancyName: 'Svelte',
hoverColor: 'hover:bg-orange-700',
color: 'bg-orange-700'
color: 'bg-orange-700',
isCoolifyBuildPack: true,
},
{
name: 'vuejs',
fancyName: 'VueJS',
hoverColor: 'hover:bg-green-700',
color: 'bg-green-700'
color: 'bg-green-700',
isCoolifyBuildPack: true,
},
{
name: 'nuxtjs',
fancyName: 'NuxtJS',
hoverColor: 'hover:bg-green-700',
color: 'bg-green-700'
color: 'bg-green-700',
isCoolifyBuildPack: true,
},
{
name: 'gatsby',
fancyName: 'Gatsby',
hoverColor: 'hover:bg-blue-700',
color: 'bg-blue-700'
color: 'bg-blue-700',
isCoolifyBuildPack: true,
},
{
name: 'astro',
fancyName: 'Astro',
hoverColor: 'hover:bg-pink-700',
color: 'bg-pink-700'
color: 'bg-pink-700',
isCoolifyBuildPack: true,
},
{
name: 'eleventy',
fancyName: 'Eleventy',
hoverColor: 'hover:bg-red-700',
color: 'bg-red-700'
color: 'bg-red-700',
isCoolifyBuildPack: true,
},
{
name: 'react',
fancyName: 'React',
hoverColor: 'hover:bg-blue-700',
color: 'bg-blue-700'
color: 'bg-blue-700',
isCoolifyBuildPack: true,
},
{
name: 'preact',
fancyName: 'Preact',
hoverColor: 'hover:bg-blue-700',
color: 'bg-blue-700'
color: 'bg-blue-700',
isCoolifyBuildPack: true,
},
{
name: 'nextjs',
fancyName: 'NextJS',
hoverColor: 'hover:bg-blue-700',
color: 'bg-blue-700'
color: 'bg-blue-700',
isCoolifyBuildPack: true,
},
{
name: 'nestjs',
fancyName: 'NestJS',
hoverColor: 'hover:bg-red-700',
color: 'bg-red-700'
color: 'bg-red-700',
isCoolifyBuildPack: true,
},
{
name: 'rust',
fancyName: 'Rust',
hoverColor: 'hover:bg-pink-700',
color: 'bg-pink-700'
color: 'bg-pink-700',
isCoolifyBuildPack: true,
},
{
name: 'python',
fancyName: 'Python',
hoverColor: 'hover:bg-green-700',
color: 'bg-green-700'
color: 'bg-green-700',
isCoolifyBuildPack: true,
},
{
name: 'deno',
fancyName: 'Deno',
hoverColor: 'hover:bg-green-700',
color: 'bg-green-700'
color: 'bg-green-700',
isCoolifyBuildPack: true,
},
// {
// name: 'heroku',
// fancyName: 'Heroku Buildpack',
// hoverColor: 'hover:bg-indigo-700',
// color: 'bg-indigo-700'
// }
{
name: 'heroku',
fancyName: 'Heroku',
hoverColor: 'hover:bg-purple-700',
color: 'bg-purple-700',
isHerokuBuildPack: true,
}
];
export const scanningTemplates = {
'@sveltejs/kit': {

21
apps/ui/src/routes/applications/[id]/configuration/buildpack.svelte
View File

@ -30,7 +30,6 @@
import { page } from '$app/stores';
import { get } from '$lib/api';
import { appSession } from '$lib/store';
import { browser } from '$app/env';
import { t } from '$lib/translations';
import { buildPacks, findBuildPack, scanningTemplates } from '$lib/templates';
import { errorNotification } from '$lib/common';
@ -263,11 +262,27 @@
</div>
</div>
{:else}
<div class="max-w-7xl mx-auto flex flex-wrap justify-center">
{#each buildPacks as buildPack}
<div class="max-w-7xl mx-auto ">
<div class="title pb-2">Coolify Buildpacks</div>
<div class="flex flex-wrap justify-center">
{#each buildPacks.filter(bp => bp.isCoolifyBuildPack === true) as buildPack}
<div class="p-2">
<BuildPack {packageManager} {buildPack} {scanning} bind:foundConfig />
</div>
{/each}
</div>
</div>
<div class="max-w-7xl mx-auto ">
<div class="title pb-2">Heroku</div>
<div class="flex flex-wrap justify-center">
{#each buildPacks.filter(bp => bp.isHerokuBuildPack === true) as buildPack}
<div class="p-2">
<BuildPack {packageManager} {buildPack} {scanning} bind:foundConfig />
</div>
{/each}
</div>
</div>
{/if}

63
apps/ui/src/routes/applications/[id]/index.svelte
View File

@ -332,53 +332,56 @@
<label for="gitSource" class="text-base font-bold text-stone-100"
>{$t('application.git_source')}</label
>
<a
href={!isDisabled
? `/applications/${id}/configuration/source?from=/applications/${id}`
: ''}
class="no-underline"
><input
value={application.gitSource.name}
id="gitSource"
disabled
class="cursor-pointer hover:bg-coolgray-500"
/></a
>
{#if isDisabled}
<input disabled={isDisabled} value={application.gitSource.name} />
{:else}
<a
href={`/applications/${id}/configuration/source?from=/applications/${id}`}
class="no-underline"
><input
value={application.gitSource.name}
id="gitSource"
class="cursor-pointer hover:bg-coolgray-500"
/></a
>
{/if}
</div>
<div class="grid grid-cols-2 items-center">
<label for="repository" class="text-base font-bold text-stone-100"
>{$t('application.git_repository')}</label
>
<a
href={!isDisabled
? `/applications/${id}/configuration/repository?from=/applications/${id}&to=/applications/${id}/configuration/buildpack`
: ''}
class="no-underline"
><input
value="{application.repository}/{application.branch}"
id="repository"
disabled
class="cursor-pointer hover:bg-coolgray-500"
/></a
>
{#if isDisabled}
<input disabled={isDisabled} value="{application.repository}/{application.branch}" />
{:else}
<a
href={`/applications/${id}/configuration/repository?from=/applications/${id}&to=/applications/${id}/configuration/buildpack`}
class="no-underline"
><input
value="{application.repository}/{application.branch}"
id="repository"
class="cursor-pointer hover:bg-coolgray-500"
/></a
>
{/if}
</div>
<div class="grid grid-cols-2 items-center">
<label for="buildPack" class="text-base font-bold text-stone-100"
>{$t('application.build_pack')}</label
>
{#if isDisabled}
<input class="capitalize" disabled={isDisabled} value={application.buildPack} />
{:else}
<a
href={!isDisabled
? `/applications/${id}/configuration/buildpack?from=/applications/${id}`
: ''}
href={`/applications/${id}/configuration/buildpack?from=/applications/${id}`}
class="no-underline "
>
<input
value={application.buildPack}
id="buildPack"
disabled
class="cursor-pointer hover:bg-coolgray-500"
class="cursor-pointer hover:bg-coolgray-500 capitalize"
/></a
>
{/if}
</div>
<div class="grid grid-cols-2 items-center pb-8">
<label for="destination" class="text-base font-bold text-stone-100"
@ -698,7 +701,7 @@
/>
</div>
{/if}
{#if application.buildPack !== 'laravel'}
{#if application.buildPack !== 'laravel' && application.buildPack !== 'heroku'}
<div class="grid grid-cols-2 items-center">
<div class="flex-col">
<label for="baseDirectory" class="pt-2 text-base font-bold text-stone-100"

2
apps/ui/src/tailwind.css
View File

@ -46,7 +46,7 @@ textarea {
}
#svelte .custom-select-wrapper .selectContainer {
@apply h-12 w-96 rounded border-none bg-coolgray-200 p-2 px-0 text-xs tracking-tight outline-none transition duration-150 hover:bg-coolgray-500 focus:bg-coolgray-500 md:text-sm;
@apply h-12 w-96 rounded border border-coolgray-300 border-dashed bg-coolgray-200 p-2 px-0 text-xs tracking-tight outline-none transition duration-150 hover:bg-coolgray-500 focus:bg-coolgray-500 md:text-sm;
}
#svelte .listContainer {