Comment déployer l'application React and Node sur AWS: une meilleure approche

Dans l'un de mes précédents blogs, Comment déployer rapidement l'application React and Node sur AWS, j'ai expliqué comment déployer rapidement notre application de réaction, notre application de nœud, et leur permettre de se parler. Il s’agissait essentiellement des étapes suivantes:

  • Créez une version de production de votre application de réaction
  • Placez ces fichiers manuellement dans le dossier public de votre serveur de noeud
  • Activer node.js pour servir des fichiers statiques
  • Configurez node.js, postgres sur l'instance aws EC2
  • transmettre la demande au port 80 au serveur node.js

Le flux de travail ci-dessus fonctionne si vous ne devez pas déployer régulièrement. Nous devons effectuer les étapes suivantes manuellement chaque fois qu'un changement se produit dans l'application de réaction

  • Construire réagir application
  • Copier les fichiers de réaction dans le dossier public de node.js
  • Déployer l'application node.js

Examinons une conception alternative et automatisons l’ensemble du processus de déploiement.

Nouvelle architecture

Dans cette conception, nous découplerions notre application Nœud et notre application React. Nous introduirions nginx pour faciliter la communication entre react et node.

Utilisation de nginx pour servir le code de réaction et agir en tant que proxy inverse pour le serveur de nœud

Nouveau flux de travail

CI et CD pour react applicationCI et CD pour application de nœud

Déployer l'application de nœud

Ceci est couvert dans mon article de blog: Comment déployer l'application Node.js sur AWS avec GitLab

Déployer l'application React

Ceci est très similaire, plutôt beaucoup plus simple que le déploiement de nœud, car nous n'avons pas besoin de ssh dans l'instance AWS EC2.

Comme pour le déploiement d'applications de nœuds, nous devons configurer notre fichier .gitlab-ci.yml. Ce fichier serait exactement le même que celui de l'application de nœud, sauf un changement. Nous devons créer notre application de réaction avec npm run build à la ligne 29

Maintenant que nous avons la version de notre application de réaction, nous devons déplacer ces fichiers dans un dossier où nginx peut lire. Toutes les choses seraient semblables au déploiement du nœud, sauf que nous copierions les fichiers avec scp au lieu de ssh à la ligne 34.

Configurez Nginx

Maintenant que nous avons les codes de nœud et de réaction sur notre boîte AWS, nous avons besoin d'un moyen par lequel ils peuvent se parler.

Installons Nginx sur notre machine Ubuntu

sudo apt-get install nginx

Ensuite, éditez l’emplacement de la page par défaut que Nginx servira.

Editez ce fichier / etc / nginx / sites-available / default et ajoutez la ligne de code suivante dans le bloc serveur

emplacement / {
 root / home / ubuntu / myFrontApp / dist;
 index index.html index.htm index.nginx-debian.html;
 }

Donc, notre page par défaut serait maintenant index.html à l’emplacement / home / ubuntu / myFrontApp / dist.

Supposons que react app envoie une requête au serveur de nœud avec le chemin de l'API. Quelque chose comme http: // / api / user pour obtenir la liste de tous les utilisateurs. Nous devons donc nous assurer que chaque route avec / api doit être redirigée vers le serveur de nœud.

Dans le fichier / etc / nginx / sites-available / default, nous ajouterons les lignes suivantes

emplacement / api / {
 proxy_pass http: // localhost: 8000 /;
 proxy_http_version 1.1;
 proxy_set_header Mise à niveau $ http_upgrade;
 proxy_set_header Connexion 'upgrade';
 proxy_set_header Host $ host;
 proxy_cache_bypass $ http_upgrade;
 }

Donc, tout le bloc ressemble à celui ci-dessous dans le fichier nginx

serveur {
 listen 80 default_server;
 listen [::]: 80 default_server;
 emplacement / {
   root / home / ubuntu / hssfrontend / dist;
   index index.html index.htm index.nginx-debian.html;
        }
 nom du serveur _;
emplacement / api / {
    proxy_pass http: // localhost: 8000 /;
    proxy_http_version 1.1;
    proxy_set_header Mise à niveau $ http_upgrade;
    proxy_set_header Connexion 'mise à niveau';
    proxy_set_header Host $ host;
    proxy_cache_bypass $ http_upgrade;
 }
}

Enregistrez ce fichier et redémarrez le serveur nginx avec le service sudo nginx restart.

Une fois cela fait, vous êtes prêt à partir!

Si vous avez trouvé cette histoire intéressante ou utile, soutenez-la en applaudissant.