Esta publicación lo ayudará a aprender cómo implementar sus aplicaciones React en producción. Vamos a utilizar Docker y NGINX para proteger las claves de API y las solicitudes de proxy para evitar infracciones de uso compartido de recursos entre orígenes (CORS).
Puedes encontrar el código y vídeo en el resumen al final.
Lo que aprenderás en este artículo
En cada ciclo de vida de un proyecto, llega el momento de publicarlo, y no siempre es tan obvio cómo hacerlo. El entorno de producción es diferente al de desarrollo, y los usuarios no tendrán que realizar ningún paso adicional para ejecutarlo. La mayoría de las aplicaciones web consumen algún tipo de API y, a menudo, están alojadas en un servidor diferente.
En este caso, como desarrollador, debemos resolver los problemas de uso compartido de recursos de origen cruzado (CORS). Con demasiada frecuencia, terminamos construyendo un backend aunque no sea necesario. Creo que los desarrolladores deben mantener sus aplicaciones simples y eliminar todas las piezas redundantes.
En este artículo, me gustaría mostrarles cómo preparo mis aplicaciones React para implementarlas en producción.
Podría crear una aplicación de ejemplo de React trivial, pero no sería muy útil. Así que decidí vincular mi aplicación a una API real proporcionada por FED St. Louis. La API requiere una clave de acceso para recuperar datos, y los puntos finales están protegidos contra solicitudes entre dominios:ninguna aplicación web externa podrá consumir datos directamente.
Toma nota :si su aplicación se basa en representación del lado del servidor esto no es lo correcto estrategia de despliegue. Puedes inspirarte, pero aún necesitarás algún tipo de backend.
Requisitos
Es fundamental tener algunos conocimientos básicos sobre cómo crear aplicaciones React. También debe conocer algunos conceptos básicos de Docker antes de seguir las instrucciones de este artículo.
Si te pierdes algo, ¡no te preocupes! Solo echa un vistazo a este increíble artículo y tutorial de YouTube sobre FreeCodeCamp:
- Una introducción para principiantes a contenedores, máquinas virtuales y Docker por @iam_preethi
- Crear un curso acelerado de la aplicación React
Cómo crear una aplicación React de ejemplo
Arranqué una aplicación web simple usando create-react-app . El único trabajo que tiene la aplicación es mostrar un gráfico de líneas con una representación del PIB de los Estados Unidos.
La aplicación recupera datos solo de la siguiente API:
https://api.stlouisfed.org/fred/series/observations?series_id=GDPCA&frequency=a&observation_start=1999-04-15&observation_end=2021-01-01&file_type=json&api_key=abcdefghijklmnopqrstuvwxyz123456Estos son los parámetros:
series_id- El id de una serie. ElGDPCAsignifica "PIB real".frequency- La agregación de los datos. Elasignifica anual.observation_start- El inicio del período de observación.observation_end- El final del período de observación.file_type- El formato de los datos. El valor predeterminado esxml.api_key- La clave de acceso requerida para recuperar cualquier dato de esta API. Puede solicitar uno aquí.
Puede encontrar más detalles en la documentación.
La vida no siempre es perfecta y el diseño de la API no es ideal. Requiere que el desarrollador pase la clave de acceso y el resultado esperado de los datos como parámetros de URL.
Pasar la salida como un parámetro no es un problema para nosotros porque solo agrega algo de ruido, pero la clave API que se filtra sí lo es. Imagínese si alguien los intercepta y abusa de la API para realizar alguna acción prohibida. No queremos arriesgarnos.
Supongamos por un momento que las claves API no son un problema. Aún así, no es posible aprovechar esta API. La API de FRED está protegida contra solicitudes entre dominios, por lo que obtendremos los siguientes errores si intentamos llamarla desde un dominio externo:
Muchos desarrolladores sugerirían crear un middleware (un backend) para enviar solicitudes a la API y filtrar datos confidenciales. Dirían que es posible que necesiten agregar nuevas funciones en el futuro y, hasta cierto punto, es un enfoque justo.
Pero prefiero construir mis aplicaciones de una manera más YAGNI (No lo vas a necesitar). Así que voy a evitar compilar el backend hasta que sea necesario; en nuestro caso, no lo compilaré en absoluto.
¡Usemos NGINX!
Soy un gran admirador de NGINX porque trae simplicidad consigo. NGINX tiene todo lo que necesita para preparar un servidor web de producción, como HTTP2, compresión, TLS y muchas otras funciones.
Lo más importante es que todo esto lo podemos conseguir definiendo unas líneas de configuración. Solo eche un vistazo al fragmento a continuación:
...
http {
...
server {
...
location /api {
set $args $args&&file_type=json&api_key=abcdefghijklmnopqrstuvwxyz123456;
proxy_pass https://api.stlouisfed.org/fred/series;
}
}
}
Esas 4 líneas son todo lo que necesitaba para ocultar nuestra clave API y suprimir los errores CORS. ¡Literalmente! A partir de ahora, todas las solicitudes HTTP a /api será enviado a FRED API, y solo nuestras aplicaciones podrán consumir la API. Todas las solicitudes externas enfrentarán errores CORS.
Para deshacerme del desorden, reemplacé todo el contenido predeterminado del archivo con ... (tres puntos). Puede encontrar la versión completa en mi GitHub o vídeo (enlaces a continuación). Y así es como se ve nuestro punto final:
/api/observations?series_id=GDPCA&frequency=a&observation_start=1999-04-15&observation_end=2021-01-01
No necesitamos pasar ni la api_key ni file_type parámetros para recuperar datos. Y nadie puede leer la clave de acceso de la URL, por lo que es segura.
Docker ama NGINX
La forma más conveniente de ejecutar NGINX en la nube es usar Docker. Para esta parte, asumo que sabe qué es Docker (pero si no, lea el artículo vinculado en los requisitos previos).
Solo necesitamos crear un Dockerfile con los siguientes contenidos:
FROM nginx
COPY container /
COPY build /usr/share/nginx/htmlY ahora, solo se necesitan tres pasos más para ejecutar la aplicación FRED:
- Crear la aplicación React . Este proceso genera el
build/directorio que contiene archivos estáticos. - Crear la imagen de Docker . Creará una imagen Docker ejecutable.
- Publicar la imagen de Docker a algún repositorio o ejecútelo en la máquina local .
Por ahora, intentemos ejecutarlo en nuestra máquina.
$ yarn install
$ yarn build
$ docker build -t msokola/fred-app:latest .
$ docker run -p 8081:80 -it msokola/fred-app:latest
El 8081 es un puerto en su máquina. Significa que la aplicación estará disponible en la siguiente URL:http://localhost:8081 .
Después de abrir esta URL en el navegador, debería ver registros como este en su terminal:
0.0.0.1 - - [11/Mar/2021:18:57:50 +0000] "GET / HTTP/1.1" 200 1556 "-" "Mozilla/5.0 (Macintosh; Intel Mac OS X 11_2_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/88.0.4324.192 Safari/537.36" "-"
...
0.0.0.1 - - [11/Mar/2021:18:57:51 +0000] "GET /api/observations?series_id=GDPCA&frequency=a&observation_start=1999-04-15&observation_end=2021-01-01 HTTP/1.1" 200 404 "http://localhost:8081/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 11_2_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/88.0.4324.192 Safari/537.36" "-"
Presta atención a esos 200 s como representan el estado HTTP OK. Si ves un 400 junto a la solicitud de API significa que algo anda mal con su clave de API. El 304 también está bien (significa que los datos se almacenaron en caché).
Cómo implementar el contenedor en AWS
El contenedor está funcionando, por lo que podemos implementarlo. En esta parte del artículo, le mostraré cómo ejecutar su aplicación en Amazon Web Services (AWS).
AWS es una de las plataformas en la nube más populares. Si desea utilizar Microsoft Azure o cualquier otra plataforma, los pasos serán similares pero la sintaxis de los comandos será diferente.
Toma nota: Grabé un video de YouTube para que puedan verme pasar por el proceso completo de implementación. Si se atasca o encuentra algún problema, puede verificar si tenemos los mismos resultados en cada paso. Si desea ver el video, haga clic aquí o puede encontrarlo incrustado en el Resumen a continuación.
1. Instale las herramientas de la CLI de AWS
Antes de comenzar, deberá instalar las herramientas de la CLI de AWS para poder invocar comandos en su nube.
AWS ofrece asistentes de instalación para todos los sistemas operativos, por lo que voy a omitir esta sección. Después de una instalación exitosa, debe iniciar sesión escribiendo el siguiente comando:
$ aws configure
AWS Access Key ID [None]: AKIAIOSFODNN7EXAMPLE
AWS Secret Access Key [None]: wJalrXUtnFEMI/K7MDENG/bPxRfiCYEXAMPLEKEY
Default region name [None]: us-east-2
Default output format [None]: jsonPara generar claves de acceso, debe iniciar sesión en su consola de AWS. Allí, haga clic en su nombre de usuario y seleccione "Mis credenciales de seguridad ".
2. Cree un nuevo registro de contenedor elástico (ECR)
Una vez configuradas las herramientas CLI, necesitaremos crear un espacio donde podamos almacenar los ejecutables de nuestra aplicación. Usamos Docker, por lo que nuestros ejecutables serán imágenes de Docker que ejecutaremos en máquinas virtuales.
AWS ofrece un servicio dedicado para almacenar imágenes llamado Elastic Container Registry. El siguiente comando creará uno para nosotros:
aws ecr create-repository --repository-name react-to-aws --region us-east-2Estos son los parámetros:
ecr- Las siglas de "Elastic Container Registry".repository-name- El nombre de nuestro registro. Tenga en cuenta que nos referiremos a este nombre más adelante.region- El código de región. Puede encontrar una región más cercana a su ubicación para reducir la latencia. Aquí hay una lista de todas las regiones.
Puede encontrar más detalles en la documentación.
Y aquí está el resultado esperado:
{
"repository": {
"repositoryArn": "arn:aws:ecr:us-east-2:1234567890:repository/react-to-aws2",
"registryId": "1234567890",
"repositoryName": "react-to-aws",
"repositoryUri": "1234567890.dkr.ecr.us-east-2.amazonaws.com/react-to-aws2",
"createdAt": "2021-03-16T22:50:23+04:00",
"imageTagMutability": "MUTABLE",
"imageScanningConfiguration": {
"scanOnPush": false
},
"encryptionConfiguration": {
"encryptionType": "AES256"
}
}
}3. Envíe las imágenes de Docker a la nube
En este paso, vamos a enviar nuestras imágenes de Docker a la nube. Podemos hacerlo copiando los comandos push desde nuestra consola de AWS.
Abramos Consola de AWS en el navegador y haga clic en Registro de contenedores elásticos de "Todos los servicios - Contenedores " lista. Si no cambió su región, simplemente haga clic aquí. Verá la lista completa de sus repositorios:
Ahora debe seleccionar react-to-aws repositorio y luego "Ver comandos push " del menú (marcado con círculos rojos en la imagen de arriba). Verá la siguiente ventana:
Debe copiar todos los comandos del modal en su terminal. No copie los comandos del fragmento a continuación porque no funcionará.
$ aws ecr get-login-password --region us-east-2 | docker login --username AWS --password-stdin 123456789.dkr.ecr.us-east-2.amazonaws.com
Login Succeeded
$ docker build -t react-to-aws .
[+] Building 0.6s (8/8) FINISHED
...
$ docker tag react-to-aws:latest 123465789.dkr.ecr.us-east-2.amazonaws.com/react-to-aws:latest
$ docker push 123456789.dkr.ecr.us-east-2.amazonaws.com/react-to-aws:latest
The push refers to repository [123456789.dkr.ecr.us-east-2.amazonaws.com/react-to-aws:latest]
...
latest: digest: sha256:3921262a91fd85d2fccab1d7dbe7adcff84f405a3dd9c0e510a20d744e6c3f74 size: 1988
Ahora puede cerrar el modal y hacer clic en el nombre del repositorio (react-to-aws ) para navegar por la lista de imágenes disponibles. Debería ver la siguiente pantalla:
¡Su aplicación está en el repositorio, lista para su implementación! Ahora haga clic en "Copiar URI" y conserva el contenido de tu portapapeles (péguelo en algún bloc de notas o archivo de texto), ¡ya que necesitaremos ejecutarlo!
4. Configurar la aplicación
Nuestra imagen está disponible en la nube, por lo que ahora debemos configurarla.
Las máquinas virtuales no saben cómo ejecutar su imagen para garantizar que funcione bien. Debemos definir algunas instrucciones como puertos abiertos, variables de entorno, etc. AWS lo llama definición de tareas.
Abra la Consola de AWS y haga clic en Servicio de contenedor elástico (ECS) de "Todos los servicios - Contenedores " lista. Si no cambió su región, puede hacer clic aquí.
Ahora seleccione Definiciones de tareas y haga clic en "Crear nueva definición de tarea " como se marca en la imagen a continuación:
Tenemos dos opciones para ejecutar nuestra tarea:FARGATE y EC2 . Elija FARGATE , y haz clic en "Siguiente paso ".
En el siguiente paso, debe completar el formulario con los siguientes valores:
- Nombre de definición de tarea -
react-to-aws-task. - Rol de tarea -
none. - Memoria de tareas (GB) -
0.5GB(el más pequeño). - CPU de tareas (vCPU) -
0.25 vCPU(el más pequeño).
Una vez que haya llegado a las "Definiciones de contenedores" sección haga clic en "Agregar contenedor" :
Rellene el formulario con los siguientes valores:
- Nombre del contenedor -
react-to-aws. - Imagen - El URI del paso 4. Lo has pegado en alguna parte.
- Límites de memoria (MiB) -
Soft limit128. - Asignaciones de puertos -
80- el puerto HTTP.
Otras opciones no son relevantes para nosotros. Ahora haga clic en "Agregar" para agregar un contenedor y finalizar la definición de la tarea haciendo clic en Crear . Debería ver la siguiente pantalla y hacer clic en "Ver definición de tarea ".
5. ¡Vamos a ejecutarlo!
Finalmente, podemos crear un clúster, para que podamos ejecutar nuestra aplicación en la nube. Debe seleccionar "Clusters " en el menú del lado izquierdo y "Crear clúster ". Como se muestra en la siguiente imagen:
Ahora tenemos tres opciones:Networking only , EC2 Linux + Networking y EC2 Windows + Networking . Elija el primero:Networking only y haga clic en "Siguiente paso ". Debería ver la siguiente pantalla:
Ingrese el nombre del clúster react-to-aws y haga clic en "Crear ". Debería ver un estado de almuerzo exitoso. Se parece a la pantalla que obtuvimos una vez que se creó nuestra definición de tarea. Ahora haga clic en "Ver clúster ".
Ahora debe hacer clic en "Tareas" y haga clic en "Ejecutar nueva tarea ". ¡Felicitaciones! Ha llegado al último formulario para completar :)
Rellene el formulario con los siguientes valores:
- Tipo de lanzamiento -
FARGATE. - Cluster VPC - El primero.
- Subred - El primero.
Mantener los otros valores como están y haga clic en "Ejecutar tarea ". Debería ver la siguiente pantalla:
Tendremos que esperar alrededor de un minuto hasta que aparezca el mensaje "Último estado " cambia a EN EJECUCIÓN. Tenga en cuenta que debe hacer clic en "Actualizar " para actualizar la lista. Una vez que el estado de la tarea se esté ejecutando, haga clic en el nombre de la tarea.
En la "Red" encontrarás la IP Pública de tu contenedor. Puede abrirlo en su navegador y verá su aplicación.