Tutorial deplegar una aplicación angular

Descripción general

En este tutorial vamos a aprender cómo desplegar y poner a correr una aplicación en un servidor remoto basado en Linux. En este caso la aplicación será la aplicación Angular que están construyendo, pero la mayoría de instrucciones servirán para cualquier otra aplicación que quiera desplegar.

Objetivos de aprendizaje

Al finalizar este taller, cada estudiante debe ser capaz de:

Desplegar una aplicación Angular en un servidor Linux y ponerla a correr.

1. Conectarse al servidor

Cada uno de ustedes recibirá la información de una máquina dentro del datacenter del departamento (admonsis) e instrucciones de conexión. Como las máquinas de nuestro datacenter tienen una dirección IP privada que sólo puede accederse desde adentro de la Universidad, es necesario que en su máquina instale y configure la aplicación Cloudflare WARP para acceder a la VPN de la universidad.

Las instrucciones de conexión las encuentra acá: Guía de configuración de la VPN

Después de haber instalado y activado la VPN usted debería poderse conectar desde un terminal (tanto en Windows como en Mac o Linux) usando el siguiente comando:

ssh usuario@direccionip

Por ejemplo, si el nombre de usuario es estudiante y la dirección ip es 172.24.101.12, el comando para conectarse sería:

ssh estudiante@172.24.101.12

Es posible que la primera vez reciba algún mensaje que le advierte que se trata de un servidor desconocido.

2. Revisar si funciona el AngularCLI

Revise las versiones instaladas del software usando los comandos:

java -version
npm -version
ng serve

La respuesta debería ser algo similar a lo siguiente:

estudiante@ism-vm:~/bookstore$ java -version
openjdk version "21.0.11" 2026-04-21
OpenJDK Runtime Environment (build 21.0.11+10-1-24.04.2-Ubuntu)
OpenJDK 64-Bit Server VM (build 21.0.11+10-1-24.04.2-Ubuntu, mixed mode, sharing)
estudiante@ism-vm:~/bookstore$ npm -version
11.16.0
estudiante@ism-vm:~/bookstore$ ng serve
Error: This command is not available when running the Angular CLI outside a workspace.

En caso de que el último comando falle y el error diga que ng no es un comando reconocido, debería ejecutar las siguientes instrucciones para instalar las herramientas de Angular:

mkdir -p ~/.npm-global
npm config set prefix '~/.npm-global'
echo 'export PATH=~/.npm-global/bin:$PATH' >> ~/.bashrc
source ~/.bashrc
npm install -g @angular/cli

3. Crear la carpeta donde van a descargar el proyecto

Ahora usaremos los comandos pwd, cd, ls y mkdir para crear una nueva carpeta en el lugar correcto.

El comando pwd es utilizado para saber en qué directorio nos encontramos actualmente (print working directory).

estudiante@ism-vm:~$ pwd
/home/estudiante

En este caso vemos que estamos dentro de la carpeta estudiante, que está dentro de la carpeta home que está en la raíz del disco. Esta es la carpeta base de nuestro usuario y podemos volver ahí rápidamente usando el comando cd ~: cd sirve para cambiar de directorio y el caracter ~ sirve para indicar que queremos volver a nuestro home.

Ahora vamos a crear una nueva carpeta, y lo primero que haremos será listar los elementos que se encuentran en la carpeta actual, usando el comando ls. Si usamos el modificador -l veremos más detalles de los archivos, mientras que el modificador -a nos mostrará todos los archivos de la carpeta, incluyendo los archivos ocultos cuyo nombre empieza por el caracter .. El resultado debería ser algo similar a esto:

estudiante@ism-vm:~$ ls
bookstore
estudiante@ism-vm:~$ ls -l
total 10
drwxrwxr-x 4 estudiante estudiante 4096 ago 21 14:40 bookstore
estudiante@ism-vm:~$ ls -la
total 78
drwxr-x--- 11 estudiante estudiante 4096 ago 21 16:58 .
drwxr-xr-x  4 root       root       4096 jul 14 11:47 ..
-rw-------  1 estudiante estudiante 5441 ago 21 17:06 .bash_history
-rw-r--r--  1 estudiante estudiante  220 jul 14 11:47 .bash_logout
-rw-r--r--  1 estudiante estudiante 4023 ago 21 14:46 .bashrc
drwxrwxr-x  4 estudiante estudiante 4096 ago 21 14:40 bookstore
drwx------  5 estudiante estudiante 4096 ago 21 16:58 .cache
drwxrwxr-x  4 estudiante estudiante 4096 jul 14 11:56 .fnm
-rw-rw-r--  1 estudiante estudiante   29 ago 21 16:58 .gitconfig
drwxrwxr-x  3 estudiante estudiante 4096 jul 14 11:50 .local
drwxrwxr-x  3 estudiante estudiante 4096 jul 14 15:59 .m2
drwxrwxr-x  4 estudiante estudiante 4096 ago 21 14:40 .npm
drwxrwxr-x  4 estudiante estudiante 4096 ago 21 14:43 .npm-global
-rw-------  1 estudiante estudiante   21 ago 21 14:43 .npmrc
-rw-r--r--  1 estudiante estudiante  807 jul 14 11:47 .profile
-rw-r--r--  1 estudiante estudiante    0 jul 14 11:49 .sudo_as_iin_successful
-rw-------  1 estudiante estudiante 3918 ago 21 15:59 .viminfo
-rw-------  1 estudiante estudiante  104 jul 14 14:44 .Xauthority

Ahora vamos a crear la carpeta donde descargaremos nuestra aplicación, usando el comando mkdir.

estudiante@ism-vm:~$ mkdir modulo
estudiante@ism-vm:~$ ls
bookstore  modulo
estudiante@ism-vm:~$ cd modulo
estudiante@ism-vm:~/modulo$ ls -la
total 8
drwxrwxr-x  2 estudiante estudiante 4096 ago 23 11:27 .
drwxr-x--- 12 estudiante estudiante 4096 ago 23 11:27 ..
estudiante@ism-vm:~/modulo$ pwd
/home/estudiante/modulo

Fíjese que, dentro de la nueva carpeta, que en este caso llamamos modulo, hay dos archivos. En realidad, son enlaces simbólicos:

. hace referencia a esta carpeta. Siempre que usted vea que aparece una ruta que empieza por . puede interpretarla como una ruta que empieza desde acá (desde la carpeta donde esté parado)
.. hace referencia a la carpeta que contiene a esta carpeta. En este caso, a la carpeta /home/estudiante. Si usted quiere regresar a esa carpeta puede usar el comando cd .. para subir en el árbol de carpetas.

4. Crear un token en GitHub

Desde este servidor en el que está trabajando, usted va a tener que conectarse a GitHub e identificarse como usted para tener acceso a sus repositorios privados. Para eso NO SE PUEDE USAR UN PASSWORD. Se debe usar un token de conexión.

Entre a GitHub y asegúrese de estar autenticado.
Haga click en su imagen de perfil (arriba a la derecha) y seleccione la opción Settings (Configuración).
En el menú de la izquierda, seleccione la última opción Developer Settings (Configuración de desarrollador).
Seleccione la opción Personal access tokens y luego Tokens (classic).
Genere un nuevo token clásico teniendo en cuenta lo siguiente:

Es posible que tenga que usar el doble factor de autenticación.
Dele un nombre explícito al token (ej. Token para Servidor de Despliegue)
Seleccione una fecha de expiración que sea posterior al final del semestre, pero no haga que nunca expire.
Dentro de los permisos (scope), seleccione todos los de la categoría repo

El token es una cadena de caracteres que usted debe mantener secreta y que debe guardar en este momento: no se puede recuperar. Si la pierde, deberá realizar el proceso de nuevo para generar un nuevo token de autenticación.

5. Descargar el proyecto (clonar)

Teniendo ya un token, vuelva al servidor, asegúrese de estar en la carpeta correcta usando el comando pwd y clone su repositorio. Puede conseguir la URL de su repositorio haciendo click en el botón verde que dice Code dentro de GitHub.

El comando les va a pedir su nombre de usuario de GitHub y el token de autenticación). Deberían ver algo similar a esto:

estudiante@ism-vm:~/modulo$ git clone https://github.com/Uniandes-isis2603/bookstore-front-new.git
Username: **********
Password (or token): ******
Cloning into 'bookstore-front-new'...
remote: Enumerating objects: 141, done.
remote: Counting objects: 100% (141/141), done.
remote: Compressing objects: 100% (102/102), done.
remote: Total 141 (delta 42), reused 134 (delta 35), pack-reused 0 (from 0)
Receiving objects: 100% (141/141), 1.47 MiB | 3.51 MiB/s, done.
Resolving deltas: 100% (42/42), done.
estudiante@ism-vm:~/modulo$ ls
bookstore-front-new

6. Correr el proyecto

Después de descargar el proyecto, es necesario entrar a la carpeta y ahí ya podremos descargar las librerías necesarias (usando npm install) y poner a correr el servidor (usando ng serve --host 0.0.0.0).

estudiante@ism-vm:~/modulo$ ls
bookstore-front-new
estudiante@ism-vm:~/modulo$ cd bookstore-front-new/
estudiante@ism-vm:~/modulo/bookstore-front-new$ npm install
...
INSTALACION DE PAQUETES
...
estudiante@ism-vm:~/modulo/bookstore-front-new$ ng serve --host 0.0.0.0
Initial chunk files | Names            |  Raw size
styles.css          | styles           | 283.81 kB |
scripts.js          | scripts          | 107.58 kB |
polyfills.js        | polyfills        |  93.05 kB |
main.js             | main             |  13.88 kB |

                    | Initial total    | 578.86 kB

Application bundle generation complete. [3.142 seconds]
Watch mode enabled. Watching for file changes...
NOTE: Raw file sizes do not reflect development server per-request transformations.
  ➜  Local:   http://localhost:4200/
  ➜  Network: http://172.24.101.12:4200/
  ➜  press h + enter to show help

Para detener la ejecución, puede utilizar el comando CTRL+C.

Ahora puede abrir su navegador y conectarse a la dirección que le indica la traza, en este caso http://172.24.101.12:4200/.

Si todo sale bien, debería ver su aplicación funcionando.

¿Por qué `--host 0.0.0.0`?

Durante el desarrollo, Angular asume que la aplicación está corriendo en la misma máquina desde donde se va a acceder, así que sólo responde a solicitudes que busquen localhost. Como en este caso la máquina donde está su navegador es diferente a la máquina donde está el servidor, es necesario indicarle a Angular que debe responder también a solicitudes remotas. El parámetro de ejecución --host 0.0.0.0 le permite exactamente eso.

El rol de la VPN

La prueba desde el navegador no podría funcionar si su computador no tuviera una forma para encontrar la máquina con la IP que vemos en la traza: cualquier dirección que inicia por 172 sabemos que es una dirección IP privada, que sólo tiene sentido dentro del contexto de la red de la universidad. Esto es similar a las direcciones IPs de los dispositivos que usted tiene en su casa y que muy posiblemente empiezan por 192.168.

La VPN de la Universidad permite, entre muchas cosas, que usuarios autenticados accedan a direcciones IP privadas. El software que usted tuvo que instalar (Cloudflare) se encarga de que cualquier programa en su computador reconozca que esas direcciones que empiezan por 172 deben buscarse dentro de la red de la universidad.

7. Dejar la aplicación corriendo

Posiblemente ya se habrá dado cuenta que si su conexión SSH se cierra o si usted suspende el comando ng serve usando ctrl+c, su aplicación dejará de funcionar. Para dejarla corriendo basta con usar el comando nohup, que significa no hangup y que hace que cuando se cierre la conexión el servidor siga funcionando. Usaremos el siguiente comando para lograr esto:

nohup ng serve --host 0.0.0.0 > output.log 2>&1 &

Los elementos de este comando son los siguientes:

nohup: indica que el resto del comando debe seguir ejecutándose así se termine la conexión
ng serve --host 0.0.0.0: inicia nuestra aplicación Angular
> output.log: redirige la salida estándar de la aplicación se vaya al archivo ‘output.log’. Como nadie va a estar viendo la terminal, esto es importante para después poder ver qué ha pasado con la aplicación.
2>&1: redirige la salida de error de la aplicación al mismo archivo ‘output.log’.
&: este caracter hace que el comando se empiece a ejecutar en background para que se pueda seguir usando la terminal.

¿Cómo sabemos que la aplicación está corriendo?

Podemos ver el contenido del archivo ‘output.log’ para ver el mensaje que indica dónde está corriendo. Para eso podemos usar los comandos cat, que lista todo el contenido del archivo, o more que lo lista página por página.
Podemos conectarnos desde el navegador y ver que la aplicación responda.
Podemos ver si el proceso está corriendo (ver la siguiente sección).

¿Cómo hago para cerrar la aplicación?

Eventualmente vamos a tener que cerrar la aplicación para volverla a poner a correr. ¿Cómo hacemos?

Lo primero que tenemos que hacer es descubrir el PID (process ID) o identificador del proceso y después terminar el proceso con el comando kill.

Para identificar el proceso, vamos a usar los comandos ps, que sirve para listar los procesos que están corriendo y grep, que sirve para buscar dentro de un texto y que nos va a servir para encontrar el proceso que queremos dentro de los centenares de procesos que pueden estar corriendo en nuestra máquina.

Primero ejecutemos el comando ps -f: usamos el modificador -f para que nos muestre información adicional que podría servirnos para identificar el proceso que necesitamos. En el siguiente ejemplo, usamos el comando ps -f para listar los procesos que estamos corriendo.

estudiante@ism-vm:~/modulo/bookstore-front-new$ ps -f
UID          PID    PPID  C STIME TTY          TIME CMD
estudia+ 1957082 1957048  0 11:15 pts/0    00:00:00 -bash
estudia+ 1957596 1957082  0 12:20 pts/0    00:00:00 ps -f

Acá podemos ver que sólo hemos creado dos procesos: -bash, que es la línea de comandos y el comando ps -f que acabamos de ejecutar. Algo importante es que el proceso padre del segundo comando es el proceso -bash (el PPID del segundo proceso es el PID del primero). Eso quiere decir que si cerramos el primer proceso, el segundo también debería desaparecer si todavía estuviera corriendo.

Ahora vamos a combinar el comando ps con el comando grep. En Linux y sistemas operativos similares, el caracter ‘|’ sirve para tomar la salida de un programa y pasárselo al siguiente. En este caso, vamos a tomar la salida de ps -f y se la vamos a pasar al comando grep bash. Este segundo comando filtra todas las líneas que le entran y se queda únicamente con las líneas donde aparece la palabra bash.

estudiante@ism-vm:~/modulo/bookstore-front-new$ ps -f | grep bash
estudia+ 1957082 1957048  0 11:15 pts/0    00:00:00 -bash
estudia+ 1957600 1957082  0 12:20 pts/0    00:00:00 grep --color=auto bash

Para tener otro ejemplo de cómo funciona grep, observe el siguiente comando: listamos el contenido del archivo angular.json usando el comando cat angular.json y luego filtramos para quedarnos sólo con las líneas que incluyen la palabra true.

estudiante@ism-vm:~/modulo/bookstore-front-new$ cat angular.json | grep true
              "sourceMap": true,
            "codeCoverage": true,

Finalmente, vamos a ver si el servidor de Angular está corriendo.

estudiante@ism-vm:~/modulo/bookstore-front-new$ ps -ef | grep 'ng serve'
estudia+ 1690699       1  0 ago21 ?        00:00:47 ng serve --host 0.0.0.0
estudia+ 1957619 1957082  0 12:28 pts/0    00:00:00 grep --color=auto ng serve

Usamos el modificador -e para indicar que nos interesan también procesos que hayan creado otros usuarios, o que hayamos creador nosotros mismos usando conexiones anteriores. Además, en el comando grep usamos comillas alrededor de lo que queremos buscar porque contiene un espacio.

En este caso, encontramos que el servidor está corriendo desde el 21 de agosto y que tiene el PID 1690699. Nuestra siguiente tarea es cerrar el proceso usando el comando kill:

estudiante@ism-vm:~/modulo/bookstore-front-new$ kill 1690699
estudiante@ism-vm:~/modulo/bookstore-front-new$ ps -ef | grep 'ng serve'
estudia+ 1957629 1957082  0 12:31 pts/0    00:00:00 grep --color=auto ng serve

Después de ejecutar estas instrucciones, deberíamos poder volver a correr nuestro servidor. Si no lo hicimos correctamente, probablemente nos encontraremos con un mensaje de error como el siguiente:

Port 4200 is already in use.
Would you like to use a different port? Yes

8. Consideraciones finales

Este tutorial le explicó cómo desplegar su aplicación Angular dentro de una máquina virtual que se creó para usted dentro de la infraestructura del departamento. Su aplicación no es pública y sólo puede accederse si se tiene acceso a través de la VPN.

Esto es a propósito: su aplicación no está construida teniendo en cuenta consideraciones de seguridad y de escalabilidad que deberían considerarse para aplicaciones reales. Esto lo estudiarán más adelante en este y en otros cursos.