web-dev-qa-db-fra.com

Comment déployer une application React + NodeJS Express sur AWS?

J'ai une application React + Webpack/Babel + Node/Express) et je souhaite la déployer sur AWS.

Devrais-je déployer React et Node/Express séparément? Ou pourraient-ils être déployés ensemble en même temps?

javascriptnode.jsamazon-web-servicesreactjsdeployment
44
Dan Me

1. Si vous avez deux projets distincts

par ex. a React application d'une seule page et une API Node/Express.

une. Vous pouvez déployer les deux séparément

Une autre option consiste à déployer les deux parties simultanément à la fois sur Elastic Beanstalk ou EC2 . Cependant, vous manquerez les avantages de l'hébergement sur S3 et CloudFront, à savoir une livraison plus rapide pour vos utilisateurs et . ) des coûts moins chers . À mon avis, il est également plus pratique et moins sujet aux erreurs inattendues de mettre à jour et de déployer séparément le côté client et le côté serveur d’une application Web.

Un autre avantage de déployer séparément: Pour les organisations avec des équipes différentes pour le front-end et le back-end, , il est plus facile pour chaque équipe de déployer leur côté de l’application par eux-mêmes sans dépendre de l'autre équipe.

b. Pourquoi S3 + CloudFront au lieu de S3 seul?

  • all les avantages d'utiliser un CDN
  • votre propre nom de domaine et un certificat SSL gratuit en 1 clic
  • redirection sur les erreurs 4xx (nécessaire si votre application utilise un routeur basé sur HTML5 History)
  • le système de mise en cache
  • http2 et redirection http to https

c. Comment manipuler CORS?

Vous pouvez utiliser différents sous-domaines, par exemple.

  • api.domain.com Pour l'API Node/Express
  • app.domain.com Pour le React app

Alors activer CORS dans l'API:

app.get('/api', cors({ Origin: 'https://app.domain.com' }), ...)

2. Si vous avez un seul projet

par ex. a Node app incluant certaines React vues.

Vous devez déployer l'application entière sur Elastic Beanstalk ou EC2 .

Remarque: Si vous avez un seul projet comprenant deux sous-projets (c'est-à-dire un dossier pour l'application React app et un autre pour l'API Node)]), et si les deux sous-projets fonctionnent toujours quand ils sont séparés, vous pouvez alors déployer les sous-projets séparément (voir la première partie de la réponse).

3. Dans les deux cas

Exécutez votre Webpack build avant de déployer la partie React. Vous pouvez le faire manuellement (avant de déployer sur AWS) ou automatiquement (dans votre (~ # ~ ] ci [~ # ~] / CD système).

4. outils

5. Si ce n'est pas limité à AWS

J'ai répondu ne question connexe pas limité à AWS.

63
GG.

Concepts de base

Pour déployer votre application sans tracas, vous devez connaître trois concepts: les microservices, les conteneurs et les gestionnaires de processus. Je vais en discuter avec un peu plus de détails et quelques liens pour vous aider à démarrer:

Microservices

Microservices est une architecture qui vous permet de diviser votre application en services plus petits. Cela présente de nombreux avantages: 1- Les services sont facilement testables. 2- Les services sont remplaçables. 3- Les services peuvent évoluer séparément.

Monolith vs Microservices design

La conteneurisation

Presque toutes les applications utiles ont au moins des dizaines de dépendances. Vous pouvez installer des dépendances sur les machines cibles, mais très certainement, vous aurez peu de défis à relever. Des programmes tels que Docker vous permettent de créer un conteneur pour votre application et de le déployer sur le cloud. (Quel que soit le fournisseur de cloud) En savoir plus ...

Gestionnaires de processus

Les gestionnaires de processus veillent au bon fonctionnement de votre application et à la bonne santé de toutes les parties. Si votre application se bloque, elle peut facilement redémarrer l’application.

1. Déploiement d’un serveur NodeJS/React Application sans serveur)

Remarque: Cette approche ne fonctionne pas si vous effectuez un rendu de serveur avec ReactJS. Aller à l'option suivante.

Vous pouvez simplement créer votre application et la déployer sur un site Web S3 statique. Cette option fonctionne si vous utilisez une architecture microservices pour séparer votre API de votre application rea.

Créer un site web statique dans S3 est très simple:

  1. Créez un compartiment dans S3 avec le nom exact du site Web. Exemple: blog.stackoverflow.com.
  2. Activer l'hébergement statique
  3. Créez un enregistrement A dans Route 53 et connectez-le au compartiment que vous avez créé.

Pour plus d'informations, consultez AWS handy documentation .

2. Déploiement d'une application NodeJS dans EC2

Vous pouvez lancer différentes instances EC2 pour chaque microservice. (API, React app, etc.). Vous devez utiliser un gestionnaire de processus tel que PM2 pour vous assurer que votre application fonctionne correctement.

Livraison continue (déploiement automatisé)

Pour créer un déploiement automatique, je préfère utiliser Terraform en combinaison avec Ansible . Terraform est très déclaratif. Vous décrivez à quoi l’infrastructure cloud devrait ressembler et Terraform la construit pour vous.

En revanche, Ansible est très procédural et convient parfaitement à l’approvisionnement d’un nouveau serveur.

Traitement et rapport d'erreur: Sentry

Idéalement, vous devriez avoir des tests unitaires pour empêcher l'envoi de code de bug à la production. (Utilisez Jest avec supertest , Enzyme pour un rendu peu profond). Mais le monde est imparfait et il est bon de recevoir tout bogue potentiel survenant chez le client. Entrez Sentry

9
bman