Comment créer un site Web React dans AWS en 15 minutes

Ce tutoriel vous aidera à lancer un site Web personnel ou professionnel simple hébergé dans AWS S3 et construit à l'aide de React. React est une bibliothèque Javascript pour la construction d'interfaces utilisateur. Supposons que vous êtes encore en train d’apprendre à réagir et que d’autres technologies sont liées à la conception Web et que vous voulez un moyen économique de construire et de jouer avec votre propre site Web en direct. Pour ce faire, le meilleur moyen consiste à héberger le site Web dans AWS S3, car celui-ci offre une utilisation gratuite des niveaux pour 12 mois: 5 Go de stockage standard Amazon S3, 20 000 demandes Get et 2 000 demandes de vente. Cela signifie que vous paierez moins d'un dollar par mois jusqu'à ce que votre site Web commence à générer un trafic important.

Étape 1: Créer une application de réaction localement

Pour créer une application de réaction, vous devez d'abord installer node et npm. Pour installer les deux:

Si vous utilisez Mac et Homebrew installés, exécutez le noeud d'installation brew
Autres options pour Mac OS: https://nodejs.org/fr/download/package-manager/#macos
Windows: https://nodejs.org/en/download/package-manager/#windows
Téléchargements: https://nodejs.org

Une fois l'installation terminée, vous pouvez créer une nouvelle application en exécutant:

npx créer-réagir-application mon-application
cd my-app
npm start

Ceci fait, votre navigateur ouvrira une adresse avec l'adresse localhost: 3000. Toute modification apportée à votre code d'application de réaction sera immédiatement reflétée dans le navigateur.

Étape 2: Construisez le site Web local pour le déploiement

Une fois que vous avez terminé de modifier la version locale de votre site Web, vous pouvez le construire pour la production en exécutant la commande suivante dans votre dossier react app:

npm run build

Cela exportera tous les actifs et créera un fichier Javascript minifié en regroupant correctement React et en optimisant l'application pour optimiser les performances. Une fois cette commande terminée, tous les actifs de votre site Web seront dans le dossier de construction. Votre site Web est maintenant prêt à être déployé sur AWS.

Étape 3: créez un compte AWS

Si vous avez déjà un compte Amazon, vous pouvez ignorer cette étape. Allez sur aws.amazon.com et créez un nouveau compte. Veuillez noter que la création d'un compte AWS nécessite des informations de carte de crédit pour la facturation, les paiements et éviter les utilisations frauduleuses.

Étape 4: Créer un compartiment S3

Connectez-vous à votre compte AWS. Ouvrez S3 à partir de votre console AWS. Cliquez sur «Créer un seau».

Si vous envisagez d'utiliser un nom de domaine pour votre site Web, créez le compartiment avec le même nom. Si le nom de domaine de votre site Web est "abc.com", votre nom de compartiment S3 doit également être "abc.com".

Entrez un nom de compartiment et cliquez sur «Créer».

Étape 5: Configurez l'hébergement de site Web statique dans S3

Accédez aux propriétés du compartiment S3 et activez «Hébergement statique de sites Web». Sélectionnez "Utiliser ce compartiment pour héberger un site Web". Indiquez «index.html» comme document d’index et document d’erreur.

Prenez note de votre point final. Ceci est l'URL à l'aide de laquelle vous pouvez accéder à votre site Web. Une fois que vous avez terminé, cliquez sur Enregistrer.

Étape 6: Définissez les autorisations de lecture du compartiment S3 sur public.

Étant donné que tout le monde doit accéder à votre site Web, l'accès en lecture au compartiment S3 doit être public. Pour ce faire, ouvrez le compartiment «Autorisations» et collez la stratégie ci-dessous après l'avoir remplacée par votre nom de compartiment.

{
    "Version": "2012-10-17",
    "Déclaration": [
        {
            "Sid": "PublicReadGetObject",
            "Effet": "Autoriser",
            "Principal": "*",
            "Action": "s3: GetObject",
            "Ressource": "arn: aws: s3 :::  / *"
        }
    ]
}

Étape 7: Téléchargez le contenu du site Web vers S3

Maintenant, vous devez télécharger le contenu de votre dossier de construction dans votre compartiment S3.

Ouvrez votre compartiment S3 et cliquez sur «Télécharger». Glissez-déposez le contenu de votre dossier de construction dans la fenêtre de téléchargement. Vérifiez si tout le contenu de votre dossier de construction est présent, y compris les sous-dossiers et les fichiers. Une fois que vous avez vérifié, cliquez sur «Upload».

C'est tout. Votre site web est en ligne. Vous pouvez y accéder à l'aide du terminal que vous avez noté à l'étape 5.

Étape 8: (Facultatif) Configurez le déploiement rapide sur S3.

Chaque fois que vous apportez des modifications à votre site Web localement, vous devez télécharger manuellement le contenu de votre répertoire de construction sur S3 pour appliquer vos modifications au site Web en direct. Pour éviter cela, vous pouvez installer AWS CLI et le configurer avec vos informations d'identification AWS. Une fois que vous avez fait cela, vous pouvez télécharger le contenu de votre répertoire de construction en utilisant la commande suivante.

aws s3 cp build / s3: //  --recursive

Pour simplifier davantage cette opération, vous pouvez également ajouter cette commande à la section des scripts du fichier package.json, que vous trouverez dans le dossier de votre application react.

"scripts": {
  "start": "react-scripts start",
  "build": "react-scripts build",
  "predeploy": "react-scripts build",
  "deploy": "aws cp build s3: //  --recursive",
  "test": "react-scripts test --env = jsdom",
  "éjecter": "réagir-scripts éjecter"
}

Vous pouvez maintenant lancer npm run deploy pour déployer le contenu de votre dossier de construction sur S3.

D'après mon expérience, utiliser AWS pour un site Web simple revient bien moins cher que toute autre solution hébergée. En outre, vous pouvez étendre votre application pour utiliser AWS Lambda et d'autres offres AWS. Bonne piratage!