= Implementar aplicaciones React en Amazon S3 =
== Guía de 5 minutos sobre cómo implementar React Apps con S3 ==
Entonces ha completado su aplicación React y está buscando alojarla en algún lugar. ¿Sabía que puede usar Amazon AWS S3 para alojar sus aplicaciones React? Es relativamente fácil, económico y rápido de implementar.
= ¡Comencemos! =
== Requisitos previos ==
Antes de pasar al hospedaje, hagamos la configuración administrativa. Asegúrese de que se complete lo siguiente:
**Tiene una cuenta de AWS Regístrese para obtener una cuenta de AWS aquí: httpsaws.amazon.com/resources/create-account/ **Cree un usuario de AWS En la consola de AWS, vaya a la pestaña IAM y vaya a à Sección "Usuarios"en la barra lateral.
Haga clic en "Agregar usuario"y marque "Acceso programático"ÃÂ.
Haga clic en âÃÂÃÂSiguiente: PermisosâÃÂày aquí seleccione âÃÂÃÂAdjuntar políticas existentes directamenteâà ÂÃÂ. Marque âÃÂÃÂAdministratorAccessâÃÂàpara el propósito de implementación.
Haga clic en los botones Siguiente y finalmente haga clic en "Crear usuario".
En el paso final, recibimos una ID de clave de acceso y una clave de acceso secreta. Descargar y
** guárdelos en su computadora ya que los necesitará más adelante
== Instalar AWS CLI ==
La CLI de AWS es una herramienta poderosa que puede ayudarnos a simplificar el proceso de implementación.
Instalemos AWS CLI usando Homebrew (para macOS). Instale Homebrew si aún no lo ha hecho.
*Nota: si usa Windows, puede encontrar las instrucciones en los documentos oficiales * *aquí*
Abre tu terminal e ingresa
brew instalar awscli.
Una vez instalada la herramienta CLI, podemos configurar nuestra cuenta de AWS con
configurar aws. Aquí es donde deberá ingresar la información de la clave de acceso que descargó previamente. Debería ser algo como lo siguiente.
Para la región, puede verificar su URL en la consola de AWS y mencionará su región. Por ejemplo, el mío es âÃÂÃÂap-sureste-1âÃÂÃÂ.
= Creación de una aplicación React =
Es posible que ya tenga su aplicación React lista para implementar. Sin embargo, si necesita una aplicación de muestra, puede usar las siguientes opciones:
- Genere una aplicación React repetitiva ejecutando
npx crear-reaccionar-aplicación mi-aplicación
- Descargue mi aplicación React de muestra (con un ejemplo de formulario) de httpsgithub.com/harishv7/react-hook-form-example. Esto se hizo para un tutorial para agregar formularios a las aplicaciones React. Compruébalo aquí.
Una vez hecho esto, asegúrese de que todas las dependencias estén instaladas usando
yarn install y ejecuta la aplicación usando
inicio de hilo.
= Configurar un depósito S3 =
Ahora que tenemos nuestra aplicación de muestra lista, configuremos un depósito S3 para alojar nuestra aplicación.
En la consola de AWS, busque âÃÂÃÂS3âÃÂày vaya a S3 Dashboard. Haga clic en âÃÂÃÂCrear cuboâÃÂày asigne al cubo un nombre como âÃÂÃÂmy-react -app-2021âÃÂà(o cualquier otra cosa que desee).
*Nota: El nombre del depósito debe ser único en todo S3. ¡Así que elija un nombre único que no exista, de lo contrario obtendrá un error!* 
Active el acceso público al cubo ya que lo estamos alojando en vivo.
Deje el resto de la configuración tal como está y haga clic en "Crear depósito". Verá una entrada como la siguiente en su tablero S3.
Hagamos clic y entremos en nuestro depósito S3 recién creado.
Hagamos clic en âÃÂÃÂPropertiesâÃÂày desplácese hasta el final donde consulte âÃÂÃÂAlojamiento estático de sitios webâÃÂÃÂ.
Haga clic en "Habilitar"e ingrese "index.html"ÃÂ en Documento de índice.
Deje los otros campos iguales y haga clic en âÃÂÃÂGuardar cambiosâÃÂÃÂ.
= Implementación en S3 =
Ahora, estamos listos para implementar nuestra aplicación en S3. La forma de hacerlo es usar el siguiente comando CLI:
aws s3 sync build/ s3your-bucket-name>--acl public-read
También podemos agregar este comando a nuestro archivo package.json como un script de implementación.
Construyamos nuestra aplicación usando
construcción de hilo que ayuda a crear una construcción de producción optimizada.
A continuación, ejecutemos el comando CLI dado anteriormente o si configuró su secuencia de comandos de publicación en package.json, podemos usar
despliegue de hilo.
Eso es todo, ¡nuestra aplicación ya está implementada!
Para encontrar dónde está alojada nuestra aplicación (el enlace del sitio web), vaya a la consola de AWS S3 y haga clic en el depósito que creó.
Vaya a la pestaña "Propiedades"y desplácese hacia abajo hasta el sitio web estático sección hosting y nuestra URL estará allí.
Haga clic en él y su aplicación se abrirá en una nueva pestaña. ¡Aquí está el mío!
= Conclusión =
¡Hemos implementado con éxito nuestra aplicación React en Amazon S3! Esta es una excelente opción para implementar y probar rápidamente sus prototipos de React y compartirlos con otros. También es muy fácil y rápido de implementar.
¡Espero que este tutorial te haya sido útil!
¡Feliz codificación! ðÃÂÃÂû
*Más contenido en * *plainenglish.io*
COMPARTIDO ALOJAMIENTO WEB#7
