Déployez en continu une application Web AWS Amplify moderne à partir d'un référentiel AWS CodeCommit

PDF

Créée par Deekshitulu Pentakota (AWS) et Sai Katakam (AWS)

Récapitulatif

Remarque : AWS n' CodeCommit est plus disponible pour les nouveaux clients. Les clients actuels d'AWS CodeCommit peuvent continuer à utiliser le service normalement. En savoir plus.

Les applications Web modernes sont conçues comme des applications d'une seule page (SPAs) qui regroupent tous les composants de l'application dans des fichiers statiques. En utilisant AWS Amplify Hosting, vous pouvez créer un pipeline d'intégration et de déploiement continus (CI/CD) qui crée, déploie et héberge une application Web moderne gérée dans un référentiel Git. Lorsque vous connectez Amplify Hosting au référentiel de code, chaque validation lance un flux de travail unique pour déployer le frontend et le backend de l'application. L'avantage de cette approche est que l'application Web n'est mise à jour qu'une fois le déploiement terminé avec succès, ce qui permet d'éviter les incohérences entre le frontend et le backend.

Dans ce modèle, vous utilisez un CodeCommit référentiel AWS pour gérer votre application Web moderne. L'exemple d'application Web présenté dans ces instructions utilise le framework React SPA. Cependant, Amplify Hosting prend en charge de nombreux autres frameworks SPA, tels que Angular, Vue, Next.js, et prend également en charge les générateurs à site unique, tels que Gatsby, Hugo et Jekyll.

Ce modèle est destiné aux créateurs d'AWS qui ont de l'expérience avec les services et concepts suivants :

• AWS CodeCommit

• Hébergement AWS Amplify

• React

• JavaScript

• Node.js

• npm

• Git

Conditions préalables et limitations

Prérequis

• Un compte AWS actif.

• Autorisations pour créer des ressources dans Amplify et. CodeCommit Pour plus d'informations, consultez Identity and Access Management pour Amplify et Identity and Access Management pour AWS. CodeCommit

• Interface de ligne de commande AWS (AWS CLI), installée et configurée.

• Un éditeur de texte ou un éditeur de code.

• CodeCommit, configuré pour les utilisateurs HTTPS à l'aide des informations d'identification Git.

• Un rôle de service IAM pour Amplify.

• npm et Node.js, installés (documentation npm).

Limites

• Ce modèle ne traite pas du développement et de l'intégration d'un backend pour l'application Amplify, tel qu'une API, une authentification ou une base de données. Pour plus d'informations sur les backends, voir Créer un backend dans la documentation Amplify.

Versions du produit

• Version 2.0 de l'interface de ligne de commande AWS

• Node.js version 16.x ou ultérieure

Architecture

Pile technologique cible

• CodeCommitRéférentiel AWS contenant un spa React

• Flux de travail d'hébergement AWS Amplify

Architecture cible

Outils

Services AWS

• AWS Amplify Hosting fournit un flux de travail basé sur Git pour héberger des applications Web sans serveur complètes avec un déploiement continu.

• AWS CodeCommit est un service de contrôle de version qui vous permet de stocker et de gérer de manière privée des référentiels Git, sans avoir à gérer votre propre système de contrôle de source.

• AWS Identity and Access Management (IAM) vous aide à gérer en toute sécurité l'accès à vos ressources AWS en contrôlant qui est authentifié et autorisé à les utiliser.

Autres outils

• Node.js est un environnement d' JavaScript exécution piloté par les événements conçu pour créer des applications réseau évolutives.

• npm est un registre de logiciels qui s'exécute dans un environnement Node.js et est utilisé pour partager ou emprunter des packages et gérer le déploiement de packages privés.

Épopées

Création d'un CodeCommit référentiel

Tâche	Description	Compétences requises
Créer un référentiel .	Pour obtenir des instructions, consultez la section Création d'un CodeCommit référentiel AWS dans la CodeCommit documentation.	AWS DevOps
Pour cloner le référentiel.	Pour obtenir des instructions, consultez la section Se connecter au CodeCommit référentiel en clonant le référentiel dans la CodeCommit documentation. Si vous y êtes invité, fournissez les informations d'identification Git.	Développeur d’applications

Création d'un CodeCommit référentiel

Tâche	Description	Compétences requises
Créer un référentiel .	Pour obtenir des instructions, consultez la section Création d'un CodeCommit référentiel AWS dans la CodeCommit documentation.	AWS DevOps
Pour cloner le référentiel.	Pour obtenir des instructions, consultez la section Se connecter au CodeCommit référentiel en clonant le référentiel dans la CodeCommit documentation. Si vous y êtes invité, fournissez les informations d'identification Git.	Développeur d’applications

Création d'une application React

Tâche	Description	Compétences requises
Créez une nouvelle application React.	Entrez la commande suivante pour accéder au dépôt cloné. Remplacez <repo name> par le nom de votre CodeCommit dépôt. $ cd <repo name> Entrez la commande suivante pour créer une nouvelle application React dans le référentiel cloné. $ npx create-react-app . Codez l'application, puis entrez la commande suivante pour la démarrer. $ npm start Pour plus d'informations sur la création d'une application React personnalisée, consultez les instructions de création d'une application React dans la documentation de création d'une application React. Vous pouvez également déployer un exemple d'application React sur votre compte Amplify en suivant les instructions de la section Déployer un frontend dans la documentation Amplify.	Développeur d’applications
Créez une branche et insérez le code.	Entrez la commande suivante pour créer une nouvelle branche localement, où <branch> est le nom que vous souhaitez attribuer à la nouvelle branche. $ git checkout -b <branch> Entrez la commande suivante pour transférer la branche vers le CodeCommit référentiel, où se <branch> trouve le nom que vous avez attribué à l'étape précédente. Pour plus d'informations, consultez la section Utilisation des validations. $ git push --set-upstream origin <branch>	Développeur d’applications

Création d'une application React

Tâche	Description	Compétences requises
Créez une nouvelle application React.	Entrez la commande suivante pour accéder au dépôt cloné. Remplacez <repo name> par le nom de votre CodeCommit dépôt. $ cd <repo name> Entrez la commande suivante pour créer une nouvelle application React dans le référentiel cloné. $ npx create-react-app . Codez l'application, puis entrez la commande suivante pour la démarrer. $ npm start Pour plus d'informations sur la création d'une application React personnalisée, consultez les instructions de création d'une application React dans la documentation de création d'une application React. Vous pouvez également déployer un exemple d'application React sur votre compte Amplify en suivant les instructions de la section Déployer un frontend dans la documentation Amplify.	Développeur d’applications
Créez une branche et insérez le code.	Entrez la commande suivante pour créer une nouvelle branche localement, où <branch> est le nom que vous souhaitez attribuer à la nouvelle branche. $ git checkout -b <branch> Entrez la commande suivante pour transférer la branche vers le CodeCommit référentiel, où se <branch> trouve le nom que vous avez attribué à l'étape précédente. Pour plus d'informations, consultez la section Utilisation des validations. $ git push --set-upstream origin <branch>	Développeur d’applications

Déployez l'application dans AWS Amplify Hosting

Tâche	Description	Compétences requises
Connect Amplify au référentiel.	Pour obtenir des instructions, voir Connecter un dépôt dans la documentation d'Amplify Hosting. Sélectionnez AWS CodeCommit , le référentiel et la branche que vous avez créés précédemment.	Développeur d’applications
Définissez les paramètres de construction du frontend.	Pour obtenir des instructions, voir Confirmer les paramètres de construction du frontend dans la documentation d'Amplify Hosting. Acceptez les valeurs par défaut ou entrez ce qui suit. Build settings: version: 0.1 frontend: phases: preBuild: commands: - npm ci build: commands: - npm run build artifacts: baseDirectory: build files: - '**/*' cache: paths: - node_modules/**/*	Développeur d’applications
Vérifiez et déployez.	Pour obtenir des instructions, consultez la section Enregistrer et déployer dans la documentation d'Amplify Hosting. Attendez que le processus de déploiement soit terminé.	Développeur d’applications

Déployez l'application dans AWS Amplify Hosting

Tâche	Description	Compétences requises
Connect Amplify au référentiel.	Pour obtenir des instructions, voir Connecter un dépôt dans la documentation d'Amplify Hosting. Sélectionnez AWS CodeCommit , le référentiel et la branche que vous avez créés précédemment.	Développeur d’applications
Définissez les paramètres de construction du frontend.	Pour obtenir des instructions, voir Confirmer les paramètres de construction du frontend dans la documentation d'Amplify Hosting. Acceptez les valeurs par défaut ou entrez ce qui suit. Build settings: version: 0.1 frontend: phases: preBuild: commands: - npm ci build: commands: - npm run build artifacts: baseDirectory: build files: - '**/*' cache: paths: - node_modules/**/*	Développeur d’applications
Vérifiez et déployez.	Pour obtenir des instructions, consultez la section Enregistrer et déployer dans la documentation d'Amplify Hosting. Attendez que le processus de déploiement soit terminé.	Développeur d’applications

Valider le déploiement continu

Tâche	Description	Compétences requises
Vérifiez le déploiement initial.	Lorsque le processus de déploiement est terminé, sous Domaine, cliquez sur le lien. Vérifiez que l'application fonctionne comme prévu.	Développeur d’applications
Appliquez une modification au référentiel de code.	Modifiez le code sur votre poste de travail local et transférez les modifications vers le CodeCommit référentiel. Amplify Hosting détecte le changement dans le référentiel et lance automatiquement le processus de création et de déploiement. Vérifiez que les mises à jour de l'application sont visibles sur le domaine.	Développeur d’applications

Valider le déploiement continu

Tâche	Description	Compétences requises
Vérifiez le déploiement initial.	Lorsque le processus de déploiement est terminé, sous Domaine, cliquez sur le lien. Vérifiez que l'application fonctionne comme prévu.	Développeur d’applications
Appliquez une modification au référentiel de code.	Modifiez le code sur votre poste de travail local et transférez les modifications vers le CodeCommit référentiel. Amplify Hosting détecte le changement dans le référentiel et lance automatiquement le processus de création et de déploiement. Vérifiez que les mises à jour de l'application sont visibles sur le domaine.	Développeur d’applications

Ressources connexes

CodeCommit Documentation AWS

• Configuration pour AWS CodeCommit

  • Configuration pour les utilisateurs HTTPS à l'aide des informations d'identification Git

  • Étapes de configuration des connexions HTTPS aux CodeCommit référentiels AWS sous Linux, macOS ou Unix à l'aide de l'assistant d'identification de la CLI AWS

• Commencer à utiliser AWS CodeCommit

Documentation d'hébergement AWS Amplify

• Commencer avec le code existant

• Configuration de domaines personnalisés

Ressources React

• Créer le site Web de l'application React

• Création de la documentation de l'application React

• Créer un référentiel d'applications React (GitHub)