- Iremos a la página de Node
- Descargaremos e instalaremos la versión de la izquierda.
- Al terminar la instalación comprobaremos en una consola de comandos si Node ya es reconocido en nuestro sistema corriendo el comando node -v, si retorna la versión de Node que acabamos de instalar, fue exitosa, si no, reiniciar el equipo debería solucionar el problema.
- Abriremos una Consola de Comandos y navegaremos al directorio donde deseamos crear el folder y el proyecto de la app.
- Ya en el directorio correremos el comando npx create-react-app app-name sustituyendo app-name por el nombre que deseemos darle a nuestra app, sin mayusculas, y usando guiones (-) en lugar de espacios para separar palabras como my-aws-app.
- Esperamos a que el proceso termine, sabremos que el proceso finalizó correctamente cuando la consola nos muestre esto.
- Terminado el proceso, entraremos al directorio creado con el nombre que le dimos a la App y correremos el comando npm start.
- Cuando la consola muestre que compiló correctamente y retorne la dirección y puerto donde se levanto el servidor de nuestra app, sabremos que el proceso termino y que podemos visualizar nuestra app en un navegador en dicha dirección y puerto.
- Iremos a la página principal de Github y daremos click en Sign Up o Crear Cuenta.
- Se mostrará un formulario que iremos llenando, los campos cargarán conforme los llenemos.
- Una vez completado el formulario, Github hará envío de un código al correo que registramos y tendrémos que escribirle en esta ventana.
- Al validar el código, podremos avanzar a personalizar nuestro perfil o saltarnos y dejar para luego este paso.
- Ya en nuestro perfil, daremos clic en Create Repository o Crear Repositorio.
- Se abrirá un formulario donde llenaremos la información para crear nuestro nuevo Repo.
- Una vez creado el Repo, Github nos muestra como podemos hacer uso de este, utilizaremos el segundo método sugerido, haciendo push de un proyecto existente.
- Navegaremos a la página principal de AWS y daremos click en "Create free account" o "Comienza de forma gratuita".
- Aparecerá un formulario que deberemos llenar con nuestra información para crear la cuenta.
- Al llenar todos los datos nos pedira completar un tipo Captcha para validar.
- Aparecerá otro formulario, esta vez para llenar nuestra información de contacto (Personal).
- Abrirá un formulario donde debemos ingresar los datos de alguna tarjeta de crédito o débito (no se hace ningún cobro, solo es para validar nuestra identidad).
- Deberemos proporcionar un número celular que se vinculará a nuestra cuenta para recibir el código de verificación, también debemos completar el captcha.
- Ingresaremos el código que llegó por mensaje a nuestro celular.
- Seleccionaremos el tipo de soporte que deseamos para nuestra cuenta, en nuestro caso es el gratis a la izquierda.
- Nos mostrará una pantalla confirmando que nuestra cuenta se creó correctamente y podremos avanzar a la consola de AWS.
- En la consola nos preguntará si deseamos usar la nueva consola, de momento daremos clic en "Quizás más tarde".
- En la barra de busqueda que se encuentra en la parte de arriba escribiremos "Amplify" y daremos clic en la opción "AWS Amplify" que nos muestra.
- Daremos clic en "Introducción".
- Ahora daremos clic en la opción de "Introducción" en la sección a la derecha de "Amplify Hosting".
- Ya en Amplify Hosting, nos pedirá seleccionar de donde está nuestro código existente, y seleccionaremos "Github".
- Si tenemos sesión iniciada en Github en el mismo navegador, nos mostrará una ventana donde nos pide autorizar vincular nuestro Github con la Aws-Amplify-Console. Si no tenemos sesión, deberemos hacer login en Github antes.
- Al vincular correctamente nustro Github con la consola de Amplify, podremos seleccionar el Repo que deseamos buscandolo en la Dropdown que nos muestra.
- Al seleccionar el repo, seleccionará automáticamente una de las branches disponibles en el proyecto, normalmente será master, dev o main de estar disponibles, pero podemos elegir la que gustemos.
- Ahora nos mostrará una ventana donde podemos modificar las opciones de compilación, por si queremos añadir, modificar o quitar alguna, de momento nosotros solo daremos Siguiente.
- Esta vista nos da un resumen de lo que fuimos configurando antes de terminar para validar cualquier posible error, si todo está correcto daremos clic en Guardar e Implementar.
- Al llegar a esta vista, significa que nuestro repo y nuestro AWS Amplify ya están conectados y AWS estará escuchando y al pendiente de cualquier merge a la branch que indicamos en el paso 17.
- Regresaremos a la ventana principal de nuestra consola de AWS, podemos hacerlo dando clic en el logo de AWS en la esquina superior izquierda.
- En la bara de busqueda escribiremos S3 para la busqueda, y daremos clic en el resultado que solo dice S3.
- Ya en la consola de S3, daremos click en cualquiera de los 2 botones para crear un nuevo Bucket.
- En la ventana que nos muestre, deberemos escribir un nombre para nuestro bucket que sea único, no se pueden repetir.
- Bajaremos hasta la sección de Object Ownership o Propiedad de objeto.
- Daremos clic en la opción de la derecha, esta opción es para abilitar las ACLs (Access Control Lists o Listas de Control de Accesos), y después seleccionaremos la segunda opción que nos mostrará Object Writer o Escritor de Objetos.
- Bajaremos a la siguiente sección, esta se encarga de las configuraciones de control de acceso público a nuestro bucket.
- Deseleccionaremos la casilla marcada en la parte superior, y seleccionaremos la casilla que aparece en la parte inferior de la sección.
- Bajaremos por la página hasta topar, y daremos clic en el botón naranja para crear nuestro nuevo Bucket.
- Nuestro nuevo bucket debería aparecer en el listado, de ser así, daremos clic en el nombre de nuestro bucket.
- Aquí podremos ver los archivos en nuestro bucket, daremos clic en cualquiera de los 2 botones para subir el archivo que deseemos cargar.
- En esta ventana ya sea usando los botones para Añadir un archivo o carpeta o usando Drag and Drop, seleccionaremos los archivos que deseamos tener en el bucket.
- Los archivos que hayamos añadido se mostrarán en un listado en la parte inferior de esta sección.
- Bajaremos un poco, y daremos clic en la sección de permisos para expandirla.
- La sección de permisos debería de verse así.
- La primera sección la dejaremos igual, en la segunda sección elegiremos la segunda opción que nos muestra, y marcaremos la casilla que aparecerá al dar clic en dicha opción.
- Finalmente podremos dar clic en el botón narajna (Upload o Cargar) para subir nuestros archivos.
- Nos regresará a la vista de contenido del bucket, con un recuadro verde en la parte superior indicando que los archivos se subieron con éxito.
- Si bajamos un poco, podremos ver la lista de archivos, y daremos clic en su nombre.
- La ventana que nos abre, nos mostrará los datos y propiedades del archivo que subimos, el que nos interesa es el link en la parte derecha, daremos clic en dicha URL.
- Si la imagen es visible en dicha URL, nuestro link está listo para ser usado en nuestros proyectos, compatido, etc.
