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

Question

J'ai une application React + Webpack/Babel + Node/Express et je veux 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 une seule fois ?

Answer 1

1. Si vous avez deux projets distincts

_Par exemple, un React application monopage et une API Node/Express._

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

• le site front-end (l'application React) sur S3 y CloudFront ( tutorial )

• le site backend (l'API de Node) sur Elastic Beanstalk (recommandé) ou EC2

Une autre option consiste à déployer les deux parties en une seule fois sur Elastic Beanstalk o EC2 . Cependant, vous ne bénéficierez pas des avantages de l'hébergement sur S3 et CloudFront, à savoir une livraison plus rapide pour vos utilisateurs y des coûts moins élevés . À mon avis, il est également plus pratique et moins sujet à des 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 du déploiement séparé : Pour les organisations ayant des équipes différentes pour le frontend et le backend, il est plus facile pour chaque équipe de déployer sa partie de l'application sur son propre site. sans dépendre de l'autre équipe.

b. Pourquoi S3 + CloudFront plutôt que S3 seul ?

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

c. Comment gérer CORS ?

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

• api.domain.com pour l'API Node/Express
• app.domain.com pour l'application React

Puis activer CORS dans l'API :

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

2. Si vous avez un seul projet

Par exemple, une application Node comprenant des vues React.

Vous devez déployer l'ensemble de l'application sur Elastic Beanstalk o EC2 .

Remarque : Si vous avez un seul projet comprenant deux sous-projets (c'est-à-dire un dossier pour l'application React et un autre pour l'API Node), et si les deux sous-projets fonctionnent toujours lorsqu'ils sont séparés, alors vous pouvez 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 Construction de Webpack avant de déployer la partie React. Vous pouvez le faire manuellement (avant de déployer sur AWS) ou automatiquement (dans votre fichier CI / CD système). Si vous avez démarré votre application avec create-react-app (CRA), il suffit d'exécuter yarn build o npm run build à la racine du projet et téléchargez le contenu du dossier "build" dans votre seau S3.

4. Outils

• CLI officiel d'AWS S3 - Gérer les boucles et les objets S3 à l'aide d'un système de haut niveau. aws s3 des commandes.
• CLI officiel d'AWS Elastic Beanstalk - Gérer et déployer votre backend en utilisant eb des commandes.
• S3-déploiement - Utilitaire CLI pour déployer des fichiers vers S3.

5. S'il n'est pas restreint à l'AWS

J'ai répondu une question connexe ne se limite pas à AWS.

Answer 2

Concepts de base

Pour déployer votre application sans problème, vous devez vous familiariser avec trois concepts : Les microservices, les conteneurs et les gestionnaires de processus. Je vais les aborder avec un peu plus de détails et quelques liens pour vous aider à démarrer :

Microservices

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

Containerisation

Presque toutes les applications utiles ont au moins des dizaines de dépendances. Vous pouvez installer les dépendances sur les machines cibles, mais vous rencontrerez très certainement quelques difficultés. Des programmes comme Docker vous permettent de créer un conteneur pour votre application et de déployer ce conteneur 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 tous les éléments. Si votre application tombe en panne, il peut facilement redémarrer l'application.

1. Déploiement d'une application sans serveur NodeJS / React

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

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

La création d'un site web statique dans S3 est très simple :

1. Créez un seau 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 seau que vous avez créé.

Pour plus d'informations, consultez le site pratique d'AWS documentation .

2. Déployer une application NodeJS dans EC2

Vous pouvez lancer différentes instances EC2 pour chaque microservice. (API, application React, etc.) Vous devez utiliser un gestionnaire de processus tel que PM2 pour garantir le bon fonctionnement de votre application.

Livraison continue (automatisation du déploiement)

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 doit ressembler l'infrastructure du nuage et Terraform la construit pour vous.

Ansible, en revanche, est très procédural et est parfait pour le provisionnement d'un nouveau serveur.

Traitement des erreurs et établissement de rapports : Sentry

Idéalement, vous devriez avoir des tests unitaires pour éviter d'envoyer du code bogué vers la production. (Utilisez Jest avec supertest , Enzyme pour un rendu peu profond). Mais le monde est imparfait, et il est bon de recevoir tous les bugs potentiels qui se produisent sur le client. Entrez Sentry