Clonar la aplicación desde este repositorio GitHub.
En una ventana de terminal, vaya al directorio de la aplicación y ejecute npm install para instalar las dependencias.
A continuación, vaya a src/api/serverUrl.js y sustituya el valor exportado por la URL de su API.
Si quiere probarlo localmente, ejecute el inicio npm en la terminal.
Luego, ejecuta npm run build para construir una versión de la aplicación lista para la producción. Puedes encontrar los archivos de salida en la carpeta de construcción.
Ahora, usemos Amazon S3 para alojar la aplicación y vayamos completamente sin servidor.
Amazon S3 es un servicio de almacenamiento que también puede funcionar como un servidor web.
En el S3, pones tus archivos en cubos. Puedes saber más sobre el S3 en esta guía de desarrollo, por ahora, vamos a crear un cubo.
Abre el menú Servicios y elige S3 :
Haz clic en el botón Crear cubo e introduce un nombre y la región donde se creará tu cubo:
Asegúrate de no poner ningún espacio en el nombre. Además, el nombre tiene que ser único en todos los nombres existentes en S3, así que usa tu nombre de dominio o algo único.
A continuación, hacemos clic en el botón Create , tomaremos los valores por defecto de las pestañas de propiedades y permisos.
Una vez creado el cubo, haz clic en él y ve a la pestaña Propiedades :
Haga clic en la opción Alojamiento web estático y seleccione Use este cubo para alojar un sitio web :
Dado que se trata de una aplicación de una sola página, introduzca index.html como los documentos Index y Error . Copia la URL que te da S3 y haz clic en Save .
A continuación, en la pestaña Permisos , seleccione Política de cubos :
Introduzca la siguiente política para conceder permisos de sólo lectura a su cubo, sólo cambie examplebucket por el nombre de su cubo (en mi caso net.eherrera.serverless-demo):
123456789101112{"Versión": "2012-10-17", "Declaración":[{"Sid": "AddPerm", "Efecto": "Permitir", "Principal": "*", "Acción":["s3:ObtenerObjeto"], "Recurso":["arn:aws:s3:::examplebucket/*"]}]}json
Haga clic en Guardar para aplicar la política:
Ahora ve a la pestaña Overview , haz clic en el botón Upload , arrastra el contenido del directorio de construcción y haz clic en Upload :
Una vez que la subida haya terminado, ve a tu aplicación usando la URL que has copiado (o vuelve a la opción Alojamiento web estático en la pestaña Propiedades para conseguirlo):
Opcionalmente, se puede crear otro cubo para almacenar los registros del servidor web, sólo hay que habilitar la opción Registro de acceso al servidor en la pestaña Propiedades .
Sin embargo, recomendaría encarecidamente usar CloudFront .
CloudFront es un servicio de Red de Entrega de Contenido (CDN) que copiará su aplicación a las ubicaciones del borde alrededor del mundo para mejorar la velocidad en la que su aplicación es servida a sus usuarios. Puedes aprender más acerca de esto en esta guía para desarrolladores.
Abre el menú Servicios y elige CloudFront :
Haz clic en Crear distribución y en la sección Web haz clic en Empezar :
En el Nombre del dominio de origen seleccione el cubo que contiene su aplicación, ID de origen será poblado:
Desplácese hacia abajo y debajo de Ajustes de distribución , establezca el valor de Objeto raíz por defecto en index.html y haga clic en Crear distribución al final de la página.
Espere unos minutos hasta que el despliegue haya terminado, y luego haga clic en el ID de su distribución:
En la pestaña General , encontrarás la nueva URL de tu aplicación en la fila Domain Name . (Puedes usar el protocolo HTTPS para tu URL si lo prefieres):
¡Y eso es todo!