Cet article vous aidera à apprendre à déployer vos applications React en production. Nous allons utiliser Docker et NGINX pour sécuriser les clés API et les demandes de proxy afin d'empêcher les violations du partage de ressources cross-origin (CORS).
Vous pouvez trouver le code et vidéo dans le résumé à la fin.
Ce que vous apprendrez dans cet article
Dans chaque cycle de vie d'un projet, vient le moment de le publier, et il n'est pas toujours évident de savoir comment le faire. L'environnement de production est différent de celui de développement et les utilisateurs ne prendront aucune mesure supplémentaire pour l'exécuter. La plupart des applications Web utilisent une sorte d'API et sont souvent hébergées sur un serveur différent.
Dans ce cas, en tant que développeur, nous devons résoudre les problèmes de partage de ressources cross-origin (CORS). Trop souvent, nous finissons par construire un backend même si ce n'est pas nécessaire. Je pense que les développeurs doivent garder leurs applications simples et supprimer tous les éléments redondants.
Dans cet article, je voudrais vous montrer comment je prépare mes applications React pour les déployer en production.
Je pourrais créer un exemple d'application React trivial, mais cela ne serait pas très utile. J'ai donc décidé de connecter mon application à une véritable API fournie par FED St. Louis. L'API nécessite une clé d'accès pour récupérer les données, et les points de terminaison sont protégés contre les demandes inter-domaines - aucune application Web externe ne pourra consommer directement les données.
Prenez note :Si votre application repose sur le rendu côté serveur ce n'est pas le bon stratégie de déploiement. Vous pouvez vous inspirer, mais vous aurez toujours besoin d'une sorte de backend.
Prérequis
Il est essentiel d'avoir des connaissances de base sur la façon de créer des applications React. Vous devez également connaître certains principes fondamentaux de Docker avant de suivre les instructions de cet article.
Si vous manquez quelque chose, ne vous inquiétez pas ! Consultez cet article incroyable et ce didacticiel YouTube sur FreeCodeCamp :
- Une introduction conviviale pour les débutants aux conteneurs, aux VM et à Docker par @iam_preethi
- Créer un cours d'initiation à l'application React
Comment créer un exemple d'application React
J'ai démarré une application Web simple en utilisant create-react-app . Le seul travail de l'application consiste à afficher un graphique linéaire avec une représentation du PIB des États-Unis.
L'application récupère les données uniquement à partir de l'API suivante :
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=abcdefghijklmnopqrstuvwxyz123456Voici les paramètres :
series_id- L'identifiant d'une série. LeGDPCAsignifie le "PIB réel".frequency- L'agrégation des données. Leasignifie annuel.observation_start- Le début de la période d'observation.observation_end- La fin de la période d'observation.file_type- Le format des données. La valeur par défaut estxml.api_key- La clé d'accès requise pour récupérer toutes les données de cette API. Vous pouvez en demander un ici.
Vous pouvez trouver plus de détails dans la documentation.
La vie n'est pas toujours parfaite et la conception de l'API n'est pas idéale. Il nécessite que le développeur transmette la clé d'accès et la sortie attendue des données en tant que paramètres d'URL.
Passer la sortie en tant que paramètre n'est pas un problème pour nous car cela ne fait qu'ajouter du bruit - mais la clé API qui fuit l'est. Imaginez si quelqu'un les intercepte et abuse de l'API pour effectuer une action interdite. Nous ne voulons pas prendre le risque.
Supposons un instant que les clés API ne posent pas de problème. Pourtant, il n'est pas possible de profiter de cette API. L'API FRED est protégée contre les requêtes inter-domaines, de sorte que nous obtenons les erreurs suivantes si nous essayons de l'appeler depuis un domaine externe :
De nombreux développeurs suggéreraient de créer un middleware (un backend) pour envoyer des requêtes proxy à l'API et filtrer les données sensibles. Ils diraient qu'ils pourraient avoir besoin d'ajouter de nouvelles fonctionnalités à l'avenir, et dans une certaine mesure, c'est une approche équitable.
Mais je préfère construire mes applications de manière plus YAGNI (You Ain't Gonna Need It). Donc, je vais éviter de construire le backend jusqu'à ce que ce soit nécessaire - dans notre cas, je ne le construirai pas du tout.
Utilisons NGINX !
Je suis un grand fan de NGINX car il apporte de la simplicité. NGINX a tout ce dont vous avez besoin pour préparer un serveur Web de qualité production, tel que HTTP2, la compression, TLS et de nombreuses autres fonctionnalités.
Le plus important est que nous pouvons réaliser tout cela en définissant quelques lignes de configuration. Jetez simplement un œil à l'extrait ci-dessous :
...
http {
...
server {
...
location /api {
set $args $args&&file_type=json&api_key=abcdefghijklmnopqrstuvwxyz123456;
proxy_pass https://api.stlouisfed.org/fred/series;
}
}
}
Ces 4 lignes sont tout ce dont j'avais besoin pour masquer notre clé API et supprimer les erreurs CORS. Littéralement! Désormais, toutes les requêtes HTTP vers /api sera proxy à l'API FRED, et seules nos applications pourront consommer l'API. Toutes les demandes externes seront confrontées à des erreurs CORS.
Pour se débarrasser de l'encombrement, j'ai remplacé tout le contenu par défaut du fichier par ... (trois points). Vous pouvez trouver la version complète sur mon GitHub ou vidéo (liens ci-dessous). Et voici à quoi ressemble notre point de terminaison :
/api/observations?series_id=GDPCA&frequency=a&observation_start=1999-04-15&observation_end=2021-01-01
Nous n'avons besoin de passer ni le api_key ni file_type paramètres pour récupérer les données. Et personne ne peut lire la clé d'accès à partir de l'URL, donc c'est sûr.
Docker aime NGINX
Le moyen le plus pratique d'exécuter NGINX dans le cloud consiste à utiliser Docker. Pour cette partie, je suppose que vous savez ce qu'est Docker (mais si ce n'est pas le cas, veuillez lire l'article lié dans les prérequis).
Nous avons juste besoin de créer un Dockerfile avec le contenu suivant :
FROM nginx
COPY container /
COPY build /usr/share/nginx/htmlEt maintenant, seules trois étapes supplémentaires sont nécessaires pour exécuter l'application FRED :
- Créer l'application React . Ce processus génère le
build/répertoire contenant les fichiers statiques. - Créer l'image Docker . Cela créera une image Docker exécutable.
- Publier l'image Docker vers un référentiel ou exécutez-le sur la machine locale .
Pour l'instant, essayons de l'exécuter sur notre machine.
$ yarn install
$ yarn build
$ docker build -t msokola/fred-app:latest .
$ docker run -p 8081:80 -it msokola/fred-app:latest
Le 8081 est un port sur votre machine. Cela signifie que l'application sera disponible sous l'URL suivante :http://localhost:8081 .
Après avoir ouvert cette URL dans le navigateur, vous devriez voir des journaux comme celui-ci dans votre 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" "-"
Faites attention à ces 200 s comme ils représentent l'état HTTP OK. Si vous voyez un 400 à côté de la requête API, cela signifie que quelque chose ne va pas avec votre clé API. Le 304 est également correct (cela signifie que les données ont été mises en cache).
Comment déployer le conteneur sur AWS
Le conteneur fonctionne, nous pouvons donc le déployer. Dans cette partie de l'article, je vais vous montrer comment exécuter votre application dans Amazon Web Services (AWS).
AWS est l'une des plateformes cloud les plus populaires. Si vous souhaitez utiliser Microsoft Azure ou toute autre plate-forme, les étapes seront similaires mais la syntaxe des commandes sera différente.
Attention : J'ai enregistré une vidéo sur YouTube pour que vous puissiez me regarder tout au long du processus de déploiement. Si vous êtes bloqué ou rencontrez des problèmes, vous pouvez vérifier si nous avons les mêmes résultats à chaque étape. Si vous voulez regarder la vidéo, cliquez ici ou vous pouvez la trouver intégrée dans le Résumé ci-dessous.
1. Installer les outils AWS CLI
Avant de commencer, vous devrez installer les outils de l'AWS CLI afin de pouvoir appeler des commandes sur votre cloud.
AWS propose des assistants d'installation pour tous les systèmes d'exploitation, je vais donc ignorer cette section. Après une installation réussie, vous devez vous connecter en tapant la commande suivante :
$ 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]: jsonPour générer des clés d'accès, vous devez vous connecter à votre console AWS. Là, cliquez sur votre nom d'utilisateur et sélectionnez "Mes informations d'identification de sécurité ".
2. Créer un nouveau registre de conteneurs élastique (ECR)
Une fois les outils CLI configurés, nous devrons créer un espace où nous pourrons stocker les exécutables de notre application. Nous utilisons Docker, donc nos exécutables seront des images Docker que nous exécuterons sur des machines virtuelles.
AWS propose un service dédié au stockage des images appelé Elastic Container Registry. La commande suivante en créera un pour nous :
aws ecr create-repository --repository-name react-to-aws --region us-east-2Voici les paramètres :
ecr- Les acronymes de "Elastic Container Registry".repository-name- Le nom de notre registre. Veuillez garder à l'esprit que nous ferons référence à ce nom plus tard.region- L'indicatif régional. Vous pouvez trouver une région la plus proche de votre emplacement pour réduire la latence. Voici une liste de toutes les régions.
Vous pouvez trouver plus de détails dans la documentation.
Et voici le résultat attendu :
{
"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. Transférez les images Docker vers le cloud
Dans cette étape, nous allons pousser nos images Docker dans le cloud. Nous pouvons le faire en copiant les commandes push de notre console AWS.
Ouvrons la console AWS dans le navigateur, et cliquez sur Elastic Container Registry à partir de "Tous les services - Conteneurs ". Si vous n'avez pas changé de région, vous pouvez simplement cliquer ici. Vous allez voir la liste complète de vos dépôts :
Vous devez maintenant sélectionner le react-to-aws référentiel, puis "Afficher les commandes push " dans le menu (marqué de cercles rouges dans l'image ci-dessus). Vous allez voir apparaître la fenêtre suivante :
Vous devez copier toutes les commandes du modal dans votre terminal. Ne pas copiez les commandes de l'extrait ci-dessous parce que ça ne marchera pas.
$ 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
Vous pouvez maintenant fermer le modal et cliquer sur le nom du référentiel (react-to-aws ) pour parcourir la liste des images disponibles. Vous devriez voir l'écran suivant :
Votre application est dans le référentiel, prête à être déployée ! Cliquez maintenant sur "Copier l'URI" et conserver le contenu de votre presse-papiers (collez-le dans un bloc-notes ou un fichier texte), car nous devrons l'exécuter !
4. Configurer l'application
Notre image est disponible dans le cloud, nous devons donc maintenant la configurer.
Les machines virtuelles ne savent pas comment exécuter votre image pour s'assurer qu'elle fonctionne bien. Nous devons définir certaines instructions telles que les ports ouverts, les variables d'environnement, etc. AWS l'appelle définition de tâche.
Ouvrez la console AWS , et cliquez sur Elastic Container Service (ECS) à partir de "Tous les services - Conteneurs ". Si vous n'avez pas changé de région, vous pouvez cliquer ici.
Sélectionnez maintenant Définitions de tâches , et cliquez sur "Créer une nouvelle définition de tâche " comme indiqué dans l'image ci-dessous :
Nous avons deux options pour exécuter notre tâche :FARGATE et EC2 . Choisissez FARGATE , et cliquez sur "Étape suivante ".
À l'étape suivante, vous devez remplir le formulaire avec les valeurs suivantes :
- Nom de la définition de tâche -
react-to-aws-task. - Rôle de tâche -
none. - Mémoire des tâches (Go) -
0.5GB(le plus petit). - CPU de tâche (vCPU) -
0.25 vCPU(le plus petit).
Une fois que vous avez atteint les "Définitions de conteneurs" rubrique cliquez sur "Ajouter un conteneur" :
Remplissez le formulaire avec les valeurs suivantes :
- Nom du conteneur -
react-to-aws. - Image - L'URI de l'étape 4. Vous l'avez collé quelque part.
- Limites de mémoire (Mio) -
Soft limit128. - Mappages de ports -
80- le port HTTP.
Les autres options ne nous concernent pas. Cliquez maintenant sur "Ajouter" pour ajouter un conteneur, et terminez la définition de la tâche en cliquant sur Créer . Vous devriez voir l'écran suivant, et cliquez sur "Afficher la définition de la tâche ".
5. Allons-y !
Enfin, nous pouvons créer un cluster, afin de pouvoir exécuter notre application dans le cloud. Vous devez sélectionner "Clusters " dans le menu de gauche, et "Créer un cluster ". Comme le montre l'image ci-dessous :
Nous avons maintenant trois options :Networking only , EC2 Linux + Networking , et EC2 Windows + Networking . Choisissez le premier - Networking only , et cliquez sur "Étape suivante ". Vous devriez voir l'écran suivant :
Entrez le nom du cluster react-to-aws , et cliquez sur "Créer ". Vous devriez voir un statut de déjeuner réussi. Il ressemble à l'écran que nous avons obtenu une fois notre définition de tâche créée. Cliquez maintenant sur "Afficher le cluster ".
Maintenant, vous devez cliquer sur les "Tâches" et cliquez sur "Exécuter une nouvelle tâche ". Félicitations ! Vous avez atteint le tout dernier formulaire à remplir :)
Remplissez le formulaire avec les valeurs suivantes :
- Type de lancement -
FARGATE. - VPC de cluster - Le premier.
- Sous-réseau - Le premier.
Gardez les autres valeurs telles qu'elles sont , et cliquez sur "Exécuter la tâche ". Vous devriez voir l'écran suivant :
Nous devrons attendre environ une minute jusqu'à ce que le "Dernier état " devient EN COURS D'EXECUTION. N'oubliez pas que vous devez cliquer sur "Actualiser " pour actualiser la liste. Une fois que le statut de la tâche est en cours d'exécution, cliquez sur le nom de la tâche.
Dans le "Réseau" section vous trouverez l'adresse IP publique de votre conteneur. Vous pouvez l'ouvrir dans votre navigateur et vous verrez votre application.