Déployez en continu une application Web AWS Amplify moderne à partir d'un référentiel AWS CodeCommit - Recommandations AWS
RécapitulatifConditions préalables et limitationsArchitectureOutilsÉpopéesRessources connexes

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

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

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âcheDescriptionCompé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âcheDescriptionCompétences requises

Créez une nouvelle application React.

  1. 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>

  2. Entrez la commande suivante pour créer une nouvelle application React dans le référentiel cloné.

    $ npx create-react-app .

  3. 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.

  1. 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>

  2. Entrez la commande suivante pour transférer la branche vers le CodeCommit référentiel, où <branch> est 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
TâcheDescriptionCompé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.

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

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âcheDescriptionCompé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