Saltar al contenido principal

​
Introducción

Para desarrollar y alojar en Square Cloud, es esencial seguir una secuencia estructurada de configuraciones y requisitos previos. Esta guía técnica cubrirá todo el proceso, desde la configuración inicial hasta el despliegue en producción.

​
Requisitos previos

  • Cuenta de Square Cloud: Regístrate a través de la página de registro usando tu correo electrónico.
  • Plan de pago activo: Garantiza recursos dedicados y un rendimiento optimizado para tu aplicación. Consulta nuestros planes disponibles y elige el más adecuado para tus necesidades.

​
Creando el proyecto

Antes de empezar, asegúrate de tener Node.js y npm instalados en tu sistema. Si aún no los tienes, puedes descargarlos desde el sitio web oficial de Node.js.

​
Instalación de la CLI

Para crear un proyecto Angular, necesitas instalar la Angular CLI. Ejecuta el siguiente comando: 
npm install -g @angular/cli

​
Desarrollando el proyecto

Ahora crea un nuevo proyecto Angular: 
ng new my-angular-app
Luego instala las dependencias del proyecto: 
cd my-angular-app
npm install
Para iniciar tu servidor de desarrollo local, ejecuta: 
ng serve --port 80
Angular iniciará un servidor de desarrollo, normalmente disponible en http://localhost:80. Para generar un componente sencillo, usa: 
ng generate component hello
Puedes editar la plantilla generada en: 
src/app/hello/hello.component.html

​
Compilando el proyecto

Antes de subir tu proyecto a Square Cloud, compila el bundle de producción: 
ng build --configuration production
Angular generará los archivos estáticos optimizados dentro de la carpeta dist/{PROJECT_NAME}.

​
Eligiendo un servidor de producción

Para servir tu aplicación Angular en producción, necesitas usar un servidor. Puedes crear el tuyo propio o usar los existentes.

​
Biblioteca Express

Para servir tu proyecto estático en Square Cloud, asegúrate de que tu servidor entregue correctamente los archivos estáticos. Para usar Node.js con Express, una configuración común es:
server.js
import express from 'express';
import path from 'path';

const app = express();
const distPath = path.join(import.meta.dirname, 'dist');

app.use(express.static(distPath));

// SPA fallback: serve index.html for any route not matched above
app.use((req, res) => {
  res.sendFile(path.join(distPath, 'index.html'));
});

app.listen(80, () => console.log('Server running on port 80'));
Ajusta los parámetros de las rutas dist a la carpeta de compilación de tu proyecto. Si está en una carpeta dentro de build o dist, usa esa ruta en su lugar.

​
Biblioteca Serve

​
Instalación de la librería Serve

Para instalar la librería serve, navega hasta el directorio de tu proyecto en la terminal y ejecuta el siguiente comando: 
npm install serve@14.2.3
Este comando instala la versión 14.2.3 de la librería serve. Si quieres instalar la última versión, puedes omitir el @14.2.3.

​
Configuración del script de inicio

Después de instalar la librería serve, necesitas configurar el script de inicio de tu proyecto para usar serve. Para ello, abre el archivo package.json de tu proyecto y añade un nuevo script llamado start:prod: 
"scripts": {
  "start:prod": "serve -s dist -l 80",
  ...
}
En el script start:prod, serve -s build -l 80 hace lo siguiente:
  • serve: Es el comando para iniciar el servidor serve.
  • -s dist: La opción -s sirve el directorio dist en modo de aplicación de página única (single-page application). Esto significa que todas las solicitudes no encontradas se redirigirán a index.html. El directorio dist se crea habitualmente cuando ejecutas npm run build.
  • -l 80: La opción -l seguida de 80 le indica a serve que escuche en el puerto 80. El puerto 80 es el puerto predeterminado para el tráfico HTTP.
Ajusta el parámetro dist a la carpeta de compilación de tu proyecto. Si está dentro de una carpeta build o dist, usa esa ruta en su lugar.

​
Desplegando

Después de preparar los archivos de tu proyecto, ya puedes subirlos a Square Cloud y alojar tu proyecto. Para ello, crea un archivo ZIP que contenga todos los archivos de tu proyecto.

​
A través del panel

1

Accede a la página de subida

Accede a la página de subida y sube el archivo zip de tu proyecto.
2

Configura tu entorno

Después de subir tu zip, deberás configurar el nombre, el archivo principal o el entorno de ejecución y otros ajustes de tu proyecto.
Si estás subiendo un proyecto web, asegúrate de seleccionar “Publicación Web” y de definir un subdominio para tu proyecto.
3

Despliega tu proyecto

Por último, haz clic en el botón “Deploy” para alojar tu proyecto en Square Cloud.
Tras el despliegue, puedes monitorear el estado y los logs de tu proyecto desde el panel.
Subiendo aplicación a Square Cloud

​
A través de la CLI

Para usar este método, necesitas crear un archivo de configuración llamado squarecloud.app en el directorio raíz de tu proyecto. Este archivo contendrá la configuración necesaria para tu proyecto.

Aprende más sobre: cómo crear el archivo de configuración para Square Cloud.

El archivo squarecloud.app es un archivo de configuración que se usará para configurar tu aplicación; se utilizará para definir tu entorno.
1

Instala la CLI

Primero, necesitas tener la CLI instalada en tu entorno. Si aún no la tienes, ejecuta el siguiente comando en tu terminal:
npm install -g @squarecloud/cli
Si ya la tienes, te recomendamos actualizarla. Para ello, ejecuta el siguiente comando en tu terminal:
squarecloud update
2

Autentícate

Ahora, para autenticarte y usar otros comandos de la CLI, encontrarás tu clave de autorización aquí haciendo clic en “Request API Key”. Después de obtener tu clave de autorización, ejecuta el siguiente comando:
squarecloud auth login
3

Sube tu proyecto

Por último, para desplegar tu aplicación en Square Cloud usando la CLI, necesitas ejecutar el siguiente comando:
squarecloud upload
O si creaste el zip manualmente, puedes usar:
squarecloud upload --file <path/to/zip>

​
Recursos adicionales

Para más información sobre Angular, visita la documentación oficial aquí.

​
Solución de problemas

​
Dominio personalizado

Para usar un dominio personalizado (por ejemplo, mysite.com) en lugar de la URL predeterminada mysite.squareweb.app, necesitas el plan Standard o superior. El subdominio se define mediante el campo SUBDOMAIN en el archivo de configuración.

​
Requisitos mínimos de RAM

Mínimo: 512MB de RAM para sitios web/APIs sencillos. Para sitios con frameworks (Next.JS, React, Vue, Angular, etc.), siempre recomendamos al menos 1GB de RAM. Para aplicaciones más grandes, asigna más RAM para evitar que la aplicación se quede sin memoria y falle.

​
No se pudo encontrar este sitio.

Verifica que el subdominio/dominio coincida con lo configurado en el campo SUBDOMAIN o en la configuración del dominio personalizado. Si acabas de subir el sitio, espera hasta 60 segundos para que Square habilite el primer acceso.

​
El sitio tardó demasiado en responder…

Verifica que hayas configurado correctamente el puerto 80 y el host 0.0.0.0 en la aplicación. Recomendamos usar las variables de entorno forzadas de Square: PORT y HOST del archivo .env.

​
Contáctanos

Si continúas enfrentando dificultades técnicas, nuestro equipo de soporte especializado está disponible para ayudarte. Contáctanos y estaremos encantados de ayudarte a resolver cualquier problema.