love - upload angular app to aws

¿Cómo cargar archivos pre-renderizados en S3 y acceder a eso en la carga inicial de nuestra página web?

Question

Tengo implementada mi aplicación web con el kit Angular Universal Starter. Quiero subir el archivo pre-renderizado al depósito S3 para que mi página inicial se cargue más rápido. Pero no pude encontrar las configuraciones adecuadas para cargar el archivo pre-renderizado a S3 y cómo acceder a ese archivo en la carga inicial.

Answer 1

Usar un HTML procesado previamente es lo mismo que cargar un sitio web estático. Asumiendo que tiene aws cli instalado y configurado (usando aws configure ), puede ejecutar el siguiente comando en el directorio para cargar el archivo en un depósito de s3.

Esto solo cargará / actualizará aquellos archivos que hayan cambiado desde los archivos de cubetas existentes.

aws s3 sync my_local_dir s3://my_s3_bucket_name

Además, si desea configurar el caché, puede agregar la siguiente opción

aws s3 sync my_local_dir s3://my_s3_bucket_name --cache-control max-age=604800

Answer 2

@Shailaja shah ... Esta respuesta es un poco tarde, no sé si recibiste tu respuesta o no. Pero lo estoy agregando aquí de todos modos para ayudar a los compañeros de SO.

No veo cómo Angular Universal funciona con alojamiento de archivos estáticos como S3. Angular Universal necesita un motor de Javascript del lado del servidor (nodejs) para ejecutar previamente la página antes de entregárselo al servidor del cliente; Amazon S3 simplemente no tiene ninguna capacidad aparte de servir algunos archivos estáticos. Por otro lado, con el procesamiento del lado del cliente, S3 funcionará bien, ya que su único trabajo es servir los archivos estáticos (index.html, app.js, app.css, etc.)

Una pregunta similar (este qn es sobre otro servidor de archivos estáticos nginx, en lugar de S3): https://github.com/angular/universal/issues/554

Por cierto, Angular Universal es parte del proyecto principal ng ahora

Abriendo una recompensa aquí, como también tengo curiosidad por saberlo.

Answer 3

Lo he implementado en mi organización actual. La diferencia en mi caso fue que nuestro contenido era dinámico debido al inventario. Por lo tanto, solíamos enviar páginas renderizadas previamente a todos los rastreadores solo y no a usuarios reales. Esto fue hecho por las siguientes razones:

1. No envíe rastreadores al servidor real, de lo contrario afectará nuestro análisis.
2. Por qué molestar a nuestros servidores por rastreadores que SOLO necesitan datos estáticos.
3. Lo más importante es que los motores MOST no pueden representar etiquetas angulares ... Básicamente no ejecutan javascript en la página antes de mostrar el resultado de la búsqueda. Si no hacemos esto; los resultados de búsqueda de nuestro sitio web se verán horribles

Cómo lo hicimos: en nuestro nginx; configuramos la regla si user-agent es una solicitud de transferencia de motores de búsqueda a un servidor de pre-render (un servidor independiente) que tiene https://github.com/prerender/prerender instalado.

Lo que es más importante en este servidor de pre-render se configuró el plugin s3HtmlCache. Este plugin primero verifica si la página está disponible en S3; si no, crea la página en tiempo de ejecución -> guarda en s3 -> envía al cliente.

Entonces, para resolver su problema: en su nginx; simplemente transfiera TODAS las solicitudes al servidor de preprocesamiento.

Avísame si enfrentas algún problema. Lo he implementado y sé que esto funcionará con seguridad. Todo lo mejor.