Les traductions sont fournies par des outils de traduction automatique. En cas de conflit entre le contenu d'une traduction et celui de la version originale en anglais, la version anglaise prévaudra.
Déployez en continu une application Web AWS Amplify moderne à partir d'un référentiel AWS CodeCommit
Créée par Deekshitulu Pentakota (AWS) et Sai Katakam (AWS)
Environnement : PoC ou pilote | Technologies : applications Web et mobiles DevOps ; Modernisation | Services AWS : AWS Amplify ; AWS CodeCommit |
Récapitulatif
Les applications Web modernes sont conçues comme des applications d'une seule page (SPA) 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.
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
![Schéma d'architecture du déploiement d'une application Web à partir d'un CodeCommit dépôt et de son hébergement avec AWS Amplify](images/pattern-img/370c0a43-fc09-46dc-a018-853cbd4cff11/images/746a9450-6a0b-4798-bf22-e8f89c7933f6.png)
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
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 |
Tâche | Description | Compétences requises |
---|---|---|
Créez une nouvelle application React. |
Pour plus d'informations sur la création d'une application React personnalisée, consultez les instructions de création d'une application React | Développeur d'applications |
Créez une branche et insérez le code. |
| Développeur d'applications |
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 ainsi que 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.
| Développeur d'applications |
Révisez et déployez. | Pour obtenir des instructions, consultez la section Enregistrer et déployer dans la documentation d'Amplify Hosting. Patientez jusqu'à ce que le processus de déploiement soit terminé. | Développeur d'applications |
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 |
Apportez 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
Documentation d'hébergement AWS Amplify
Ressources React