Feat: New cf tunnel install flow

This commit is contained in:
peaklabs-dev
2024-09-12 15:50:22 +02:00
parent 0d3d5f40fd
commit 9310af0301
3 changed files with 55 additions and 53 deletions

View File

@@ -238,4 +238,12 @@ class Form extends Component
$this->server->settings->save(); $this->server->settings->save();
$this->dispatch('success', 'Server timezone updated.'); $this->dispatch('success', 'Server timezone updated.');
} }
public function manualCloudflareConfig()
{
$this->server->settings->is_cloudflare_tunnel = true;
$this->server->settings->save();
$this->server->refresh();
$this->dispatch('success', 'Cloudflare Tunnels enabled.');
}
} }

View File

@@ -2,7 +2,5 @@
<x-forms.input id="cloudflare_token" required label="Cloudflare Token" /> <x-forms.input id="cloudflare_token" required label="Cloudflare Token" />
<x-forms.input id="ssh_domain" label="Configured SSH Domain" required <x-forms.input id="ssh_domain" label="Configured SSH Domain" required
helper="The SSH Domain you configured in Cloudflare" /> helper="The SSH Domain you configured in Cloudflare" />
<x-forms.button type="submit" isHighlighted @click="modalOpen=false">Automated Configuration (experimental)</x-forms.button> <x-forms.button type="submit" isHighlighted @click="modalOpen=false">Automated Configuration</x-forms.button>
<h3 class="text-center">Or</h3>
<x-forms.button wire:click.prevent='alreadyConfigured' @click="modalOpen=false">I have already set up the tunnel manually on the server.</x-forms.button>
</form> </form>

View File

@@ -117,65 +117,61 @@
</div> </div>
</div> </div>
</div> </div>
<div class="w-64"> <div class="w-96">
@if ($server->isFunctional()) @if (!$server->isLocalhost())
@if (!$server->isLocalhost()) <x-forms.checkbox instantSave id="server.settings.is_build_server"
<x-forms.checkbox instantSave id="server.settings.is_build_server" label="Use it as a build server?" />
label="Use it as a build server?" /> <div class="flex flex-col gap-2 pt-6">
<div class="flex items-center gap-1 pt-6"> <div class="flex items-center gap-1">
<h3 class="">Cloudflare Tunnels <h3 class="text-lg font-semibold">Cloudflare Tunnels</h3>
</h3>
<x-helper class="inline-flex" <x-helper class="inline-flex"
helper="If you are using Cloudflare Tunnels, enable this. It will proxy all SSH requests to your server through Cloudflare.<br><span class='dark:text-warning'>Coolify does not install or set up Cloudflare (cloudflared) on your server.</span>" /> helper="If you are using Cloudflare Tunnels, enable this. It will proxy all SSH requests to your server through Cloudflare.<br> You then can close your server's SSH port in the firewall of your hosting provider.<br><span class='dark:text-warning'>If you choose manual configuration, Coolify does not install or set up Cloudflare (cloudflared) on your server.</span>" />
</div> </div>
@if ($server->settings->is_cloudflare_tunnel) @if ($server->settings->is_cloudflare_tunnel)
<x-forms.checkbox instantSave id="server.settings.is_cloudflare_tunnel" label="Enabled" /> <x-forms.checkbox instantSave id="server.settings.is_cloudflare_tunnel" label="Enabled" />
@else @elseif (!$server->isFunctional())
<x-modal-input buttonTitle="Configure" title="Cloudflare Tunnels"> <div class="p-4 mb-4 text-sm text-yellow-800 bg-yellow-100 rounded-lg dark:bg-yellow-900 dark:text-yellow-300">
<p>Please validate the server first. The SSH port needs to be open in the firewall on your hosting provider that coolify can validate the server and automatically configure cloudflare tunnels.</p>
<p class="mt-2">For more information, please read our <a href="https://coolify.io/docs/knowledge-base/cloudflare/tunnels/" target="_blank" class="font-medium underline hover:text-yellow-600 dark:hover:text-yellow-200">Documentation</a>.</p>
</div>
@endif
@if (!$server->settings->is_cloudflare_tunnel && $server->isFunctional())
<x-modal-input buttonTitle="Automatic Configuration" title="Cloudflare Tunnels" class="w-full">
<livewire:server.configure-cloudflare-tunnels :server_id="$server->id" /> <livewire:server.configure-cloudflare-tunnels :server_id="$server->id" />
</x-modal-input> </x-modal-input>
@endif @endif
@if (!$server->isBuildServer()) @if (!$server->settings->is_cloudflare_tunnel)
<h3 class="pt-6">Swarm <span class="text-xs text-neutral-500">(experimental)</span></h3> <x-forms.button wire:click="manualCloudflareConfig" class="w-full">
<div class="pb-4">Read the docs <a class='underline dark:text-white' I have configured Cloudflare Tunnels manually
href='https://coolify.io/docs/knowledge-base/docker/swarm' target='_blank'>here</a>. </x-forms.button>
</div>
@if ($server->settings->is_swarm_worker)
<x-forms.checkbox disabled instantSave type="checkbox"
id="server.settings.is_swarm_manager"
helper="For more information, please read the documentation <a class='dark:text-white' href='https://coolify.io/docs/knowledge-base/docker/swarm' target='_blank'>here</a>."
label="Is it a Swarm Manager?" />
@else
<x-forms.checkbox instantSave type="checkbox" id="server.settings.is_swarm_manager"
helper="For more information, please read the documentation <a class='dark:text-white' href='https://coolify.io/docs/knowledge-base/docker/swarm' target='_blank'>here</a>."
label="Is it a Swarm Manager?" />
@endif
@if ($server->settings->is_swarm_manager)
<x-forms.checkbox disabled instantSave type="checkbox"
id="server.settings.is_swarm_worker"
helper="For more information, please read the documentation <a class='dark:text-white' href='https://coolify.io/docs/knowledge-base/docker/swarm' target='_blank'>here</a>."
label="Is it a Swarm Worker?" />
@else
<x-forms.checkbox instantSave type="checkbox" id="server.settings.is_swarm_worker"
helper="For more information, please read the documentation <a class='dark:text-white' href='https://coolify.io/docs/knowledge-base/docker/swarm' target='_blank'>here</a>."
label="Is it a Swarm Worker?" />
@endif
@endif @endif
@endif
@else
<div class="flex items-center gap-1 pt-6">
<h3 class="">Cloudflare Tunnels
</h3>
<x-helper class="inline-flex"
helper="If you are using Cloudflare Tunnels, enable this. It will proxy all SSH requests to your server through Cloudflare.<br><span class='dark:text-warning'>Coolify does not install or set up Cloudflare (cloudflared) on your server.</span>" />
</div> </div>
@if ($server->settings->is_cloudflare_tunnel) @if (!$server->isBuildServer())
<x-forms.checkbox instantSave id="server.settings.is_cloudflare_tunnel" label="Enabled" /> <h3 class="pt-6">Swarm <span class="text-xs text-neutral-500">(experimental)</span></h3>
@else <div class="pb-4">Read the docs <a class='underline dark:text-white'
<x-modal-input buttonTitle="Configure" title="Cloudflare Tunnels"> href='https://coolify.io/docs/knowledge-base/docker/swarm' target='_blank'>here</a>.
<livewire:server.configure-cloudflare-tunnels :server_id="$server->id" /> </div>
</x-modal-input> @if ($server->settings->is_swarm_worker)
<x-forms.checkbox disabled instantSave type="checkbox"
id="server.settings.is_swarm_manager"
helper="For more information, please read the documentation <a class='dark:text-white' href='https://coolify.io/docs/knowledge-base/docker/swarm' target='_blank'>here</a>."
label="Is it a Swarm Manager?" />
@else
<x-forms.checkbox instantSave type="checkbox" id="server.settings.is_swarm_manager"
helper="For more information, please read the documentation <a class='dark:text-white' href='https://coolify.io/docs/knowledge-base/docker/swarm' target='_blank'>here</a>."
label="Is it a Swarm Manager?" />
@endif
@if ($server->settings->is_swarm_manager)
<x-forms.checkbox disabled instantSave type="checkbox"
id="server.settings.is_swarm_worker"
helper="For more information, please read the documentation <a class='dark:text-white' href='https://coolify.io/docs/knowledge-base/docker/swarm' target='_blank'>here</a>."
label="Is it a Swarm Worker?" />
@else
<x-forms.checkbox instantSave type="checkbox" id="server.settings.is_swarm_worker"
helper="For more information, please read the documentation <a class='dark:text-white' href='https://coolify.io/docs/knowledge-base/docker/swarm' target='_blank'>here</a>."
label="Is it a Swarm Worker?" />
@endif
@endif @endif
@endif @endif
</div> </div>