Cómo agregar un dominio personalizado a tu proyecto en Coolify

¿Coolify: qué es, cómo funciona y cuándo usarlo?

Requisitos previos

Dominio registrado con acceso a cPanel o panel de gestión DNS
Proyecto ya desplegado en Coolify
VPS con IP pública

Paso 1 — Apuntar el subdominio al VPS en cPanel

Ingresa a tu cPanel
Ve a Zone Editor o Editor de Zonas DNS
Busca tu dominio principal o sub-dominio
Agrega un registro tipo A:
- Nombre: app (o el subdominio que quieras)
- Valor: IP pública de tu VPS (ej: 216.005.00.07)
- TTL: 3600
Guarda los cambios

Los cambios DNS pueden tardar entre 5 y 30 minutos en propagarse.

Paso 2 — Cambiar el Dockerfile del frontend a nginx

vite preview no está diseñado para producción y bloquea dominios personalizados en algunos casos o proyectos, Debes reemplazarlo por nginx.

Reemplaza el contenido de frontend/Dockerfile:

# Build stage

FROM node:20-alpine AS build

WORKDIR /app

COPY package.json ./

RUN npm install

COPY . .

ARG VITE_API_URL

ENV VITE_API_URL=$VITE_API_URL

RUN npm run build

# Production stage — serve with nginx

FROM nginx:alpine

COPY --from=build /app/dist /usr/share/nginx/html

COPY nginx.conf /etc/nginx/conf.d/default.conf

EXPOSE 80

CMD ["nginx", "-g", "daemon off;"]

Paso 3 — Crear el archivo nginx.conf

Crea el archivo frontend/nginx.conf:

server {

    listen 80;

    server_name _;

    root /usr/share/nginx/html;

    index index.html;

    location / {

        try_files $uri $uri/ /index.html;

    }

}

Paso 4 — Actualizar docker-compose.yml

Cambia el mapeo de puertos del frontend. nginx escucha en el puerto 80 internamente:

frontend:

  image: ghcr.io/tu-usuario/tu-app-frontend:latest

  restart: unless-stopped

  ports:

    - "4173:80"

  depends_on:

    - backend

Paso 5 — Subir los cambios a GitHub

git add frontend/Dockerfile frontend/nginx.conf docker-compose.yml
git commit -m "fix: serve frontend with nginx for custom domain support"
git push origin main

GitHub Actions construirá y publicará la nueva imagen automáticamente en GHCR.

Paso 6 — Actualizar variables de entorno en Coolify

Ve a tu proyecto en Coolify → Environment Variables y actualiza:

CORS_ORIGIN=https://app.tudominio.cl

Nota: VITE_API_URL es una variable de build-time. Si quieres que el frontend llame al backend por dominio en lugar de IP, necesitas un subdominio para el backend (ej: api.tudominio.cl), actualizar el workflow de GitHub Actions con ese valor y reconstruir la imagen.

Paso 7 — Configurar el dominio en Coolify

Ve a tu proyecto → servicio → General
En la sección Services, haz clic en Settings del servicio Frontend
En el campo Domains agrega:
```
https://app.tudominio.cl
```
Haz clic en Save

Coolify usará Traefik para redirigir el tráfico del dominio al contenedor frontend automáticamente. Si usas https://, Coolify gestionará el certificado SSL con Let's Encrypt de forma automática.

Paso 8 — Actualizar tag en Coolify y hacer Deploy

Ve a GitHub → tu repositorio → Packages → copia el nuevo SHA de la imagen frontend
En Coolify → Edit Compose File → actualiza el tag:
```
image: ghcr.io/tu-usuario/tu-app-frontend:NUEVO_SHA
```
Guarda y haz clic en Deploy

Verificación

Abre en el navegador:

https://app.tudominio.cl

Deberías ver tu aplicación cargando correctamente con HTTPS y sin errores de host bloqueado.

¿Necesitas Ayuda adicional?

En V2Networks, estamos comprometidos con la estabilidad y seguridad de tu sitio web. Si necesitas asistencia adicional, no dudes en contactarnos a través de nuestro Centro de Soporte