2

Estoy intentando levantar una instancia en AWS con Angular pero no he podido.

  • He creado mi instancia en EC2, con sus respectivos grupos y reglas de enrutamiento (incluidos los puertos 22, 80, 443 y 4200)

  • He creado mi elasticIP

  • Con mis Key Pair he entrado al SSH por Putty

  • He instalado node ( 10.x )

  • He instalado npm ( 6.x )

  • He instalado angularCLI ( 7.x )

  • Corri la siguiente instrucción ng new myapp

  • Puse ng build

  • Luego ng serve

Esto de menos me tendría que mostrar el tutorial básico que tiene por default Angular, me dice que correrá en el localhost:4200 por lo que se me hace raro He ingresado a la IP que me dió la elasticIP pero dice La conexión ha sido rechazada, si añado el puerto 4200 dice que tardó en contestar. ¿Alguien Me puede decir que se me está escapando?

De igual forma intenté hacerlo vía Elastic Beanstalk... corrió la instancia, pero no crea las Key Pair entonces no puedo entrar al servidor que creó.

he visto este Vídeo para guiarme, pero al final construye el servidor por medio de la instrucción node y al parecer ejecuta un archivo hecho con el framework express, por lo que estoy un poco perdido.

Hice otra instancia con la misma configuración de EC2 pero esta vez solo instalé nginx y funcionó correctamente por lo que descartaría un problema de reglas de enrutamiento. Algo estoy haciendo mal al hechar a andar la aplicación ya sea con angular o con node ( Que al final angular se sirve de una forma peculiar de node )

Terminando este paso el siguiente es ligar la instancia a un dominio ya comprado, con lo cual me estoy guiando con este Vídeo

Agrecedería un tutorial de guía, si alguien tiene alguno.

3
  • Ya intentaste utilizar curl localhost:4200 o netstat -tlpn | grep 4200 dentro de tu instancia para ver si está corriendo tu servicio?
    – Cuauhtli
    Commented el 13 dic. 2018 a las 0:54
  • Gracias, ya actualicé mi pregunta y añadí un par de cosas que intenté. Commented el 13 dic. 2018 a las 5:43
  • tiene que hacer el ng build mover la carpeta dist a /var/www/ y para acceder algo como http://tu_ip/dist Commented el 13 dic. 2018 a las 15:25

3 respuestas 3

1

No sé casi nada de Angular pero escribe

ng serve --host 0.0.0.0 --port 4200

para correr tu aplicación. Supuse que era algo por el estilo debido a que cuando hacía un

netstat -tlpn

lanzaba un:

tcp        0      0 127.0.0.1:4200            0.0.0.0:*               LISTEN      12745/ng serve

Y el hecho de que tenga como host el 127.0.0.1 sólo lo hace visible para el localhost. En cambio, si le pones el host como el 0.0.0.0 hace que pueda ser visible desde todas las direcciones ipv4 disponibles.

Después de lanzar el nuevo comando ng serve, puedes revisar con netstat y te devolverá algo como

tcp        0      0 0.0.0.0:4200            0.0.0.0:*               LISTEN      12745/ng serve --ho

Y ya puedes acceder desde tu navegador con http://<tu_ip>:4200

introducir la descripción de la imagen aquí

Todo esto lo hice en una instancia de free tier de AWS, instalé lo necesario con yum y npm

Y para añadir un nombre de dominio, AWS parece que tiene su propio tutorial.

https://aws.amazon.com/es/getting-started/tutorials/get-a-domain/

Actualización 1

Respecto a lo que comentaba @JackNavaRow, recuerda que ng serve es para pruebas, entonces no tendría mucho "sentido" (más que para fines de aprendizaje) el ponerlo a correr de forma pública, es decir, permitir que cualquier individuo con acceso a esa ip pueda verlo. Eso lo podrías hacer de forma local, incluso con un port forwarding.

ssh -L 4200:127.0.0.1:4200 instancia_de_aws

Luego correr el ng serve y en tu explorador personal acceder a la dirección "127.0.0.1:4200".

De todas maneras esto sería sólo para casos específicos de prueba.

11
  • Ya están las reglas de enrutamiento, tanto http como https Commented el 13 dic. 2018 a las 4:09
  • Ya usaste nmap -T4 -A ip_de_instancia para ver si se muestran como abiertos esos puertos?
    – Cuauhtli
    Commented el 13 dic. 2018 a las 4:38
  • Oye, pero las reglas de firewall si permiten ingreso de tráfico al puerto 4200 en el que mencionaste que estaba corriendo tu app de angular? Creo que algo de esa info está aquí. docs.aws.amazon.com/es_es/AWSEC2/latest/UserGuide/…
    – Cuauhtli
    Commented el 13 dic. 2018 a las 4:41
  • Creo que sería algo así (insisto en no saber mucho de AWS :( ) imgur.com/a/k5omV41
    – Cuauhtli
    Commented el 13 dic. 2018 a las 4:46
  • 1
    @mrc_es ese es el modo "develop" de angular , lo ideal es que se publique se ejecute ng build en el proyecto mover la carpeta dist a /var/www/ y luego acceder a algo como http://<tu_ip>/dist, claro se puede modificar el virtualhost pero para no hacer la respuesta larga Commented el 13 dic. 2018 a las 15:39
0

Como primer paso verificaría la conexión a este puerto desde el exterior por medio de telnet

telnet <ip> <port>

En caso de estar cerrado verificaría que la página web esté allí, conectado al host por medio de ssh, usuaría el comando curl para ello

curl localhost:4200

En caso de haber mostrado el código HTML haría la última verificación. Mediante el comando netstat observo que el servicio se encuentre escuchando todas las peticiones mediante la dirección no especificada 0.0.0.0

netstat -tlpn | grep 4200

Para el caso de que todas las verificaciones sean positivas concluiría que el problema es de configuración del servidor. Aquí solo podría dar ideas ya que desconozco la distribución linux empleada. El paso a seguir sería permitir la conexión a este puerto ya que el firewall podría no permitirlo, recuerde que el puerto 4200 no es el idóneo para ésto, yo aconsejo instalar un servidor web como NGINX para así enrutar las conexiones que lleguen del puerto 80. En caso de estar usando Ubuntu y desee habilitar el puerto 4200 puede emplear el comando ufw

sudo ufw allow 4200/tcp

Adicionalmente supongo que si está usando AWS es porque se desea desplegar en producción por lo que yo no recomendaría instalar todo angular y sus librerías para luego usar el comando ng serve, para esto constuiría la solución por medio del comando ng build -prod y por último recuerde que puede cambiar el puerto 4200 usando ng serve --port <port>

2
  • Gracias por el aporte, pero como tal, no está corriendo en localhost, es una instancia de amazon que obviamente no es localhost, por lo que entiendo Node vendría a suplantar a Nginx, me considero novato en este tema, la versión del servidor es Ubuntu 18 Commented el 13 dic. 2018 a las 5:55
  • Angular y Node son completamente diferentes. Es cierto que se puede obtener mediante Express.js un servicio web completamente funcional sin embargo no reemplaza a NGINX ya que éste último sirve en este caso como enrutador o proxy reverso (suponga que tiene muchas páginas web hechas en node, necesita de alguien que diga a cuál ir cuando abran dominio.com). Para el caso de angular hay que generar un compilado que resulta en un HTML, varios .js y un css donde con ayuda de NGINX usted desplegará, ng serve no es usado para producción.
    – Johann
    Commented el 13 dic. 2018 a las 6:45
-1

El ng serve solo sirve como servidor local (provisional) para desarrollo

Tu proyecto de Angular funciona como una Aplicación Web, y puedes montarla en cualquier servidor Web (Apache, NGINX) que tengas dentro de tu instancia EC2, solo ocupas compilar el proyecto:

ng build

Angular build

Angular deployment

Una vez que tengas el build del proyecto se generara una carpeta llamada "dist" que contendrá la raíz de tu proyecto:

Solo restaría configurar en tu servidor Web el proyecto compilado, como un nuevo sitio. (Puedes copiar y pegar el contenido de la carpeta dist dentro de la raíz de tu Apache o NGINX).

Por ultimo solo vincula la IP elástica a la instancia que estés utilizando:

Desde la consola de AWS entramos a Elastic IPs AWS Console Elegimos la IP que queremos asociar Elastic IP Panel Seleccionamos la instancia a la que le vamos a asociar la IP

2
  • 1
    El OP se refiere específicamente a montar un instancia de Angular en AWS, no a algún otro tipo de contenedor
    – Phi
    Commented el 24 ene. 2019 a las 16:52
  • Ya creo la instancia en AWS, todo lo esta haciendo bien, solo respondí lo que complementaba su trabajo, ya que es la forma correcta de hacer un deploy de Angular, si el OP considera que no es de utilidad se borra y listo. Commented el 24 ene. 2019 a las 17:00

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.