Héberger un site web statique

Hébergez votre site marketing ou votre application web sur AWS

Introduction

Les sites web statiques proposent des fichiers HTML, JavaScript, image, vidéo, etc. aux visiteurs de votre site web. Ces sites sont très économiques et tout aussi fiables. Ils ne requièrent pratiquement aucune gestion informatique et peuvent facilement évoluer pour gérer un trafic beaucoup plus soutenu.

Pour plus d'informations, consultez les Questions fréquentes (FAQ) >>

Ce que vous apprendrez

  • Héberger un site statique à l'aide d'AWS Amplify via la console AWS AWS Amplify fournit un hébergement entièrement géré pour les sites web statiques et les applications web. La solution d'hébergement Amplify s'appuie sur Amazon CloudFront et Amazon S3 pour fournir les ressources de votre site via le réseau de diffusion de contenu (CDN) AWS.
  • Mise en place d'un déploiement continu : Amplify offre un flux de travail basé sur Git avec un déploiement continu, vous permettant de déployer automatiquement des mises à jour de votre site à chaque validation de code.

 Expérience AWS

Débutant

 Durée

10 minutes

 Coût

Le coût total d'hébergement de votre site web statique sur AWS varie en fonction de votre utilisation.

Pour connaître la répartition des services utilisés et les coûts associés, consultez la tarification applicable à AWS Amplify et Amazon Route 53.

 Conditions préalables de ce tutoriel

 
[*]Les comptes créés dans les dernières 24 heures sont susceptibles de ne pas avoir encore accès aux services nécessaires pour ce tutoriel.

Implémentation

  • Créer et connecter un référentiel

    Pour commencer ce tutoriel, vous devez créer et initialiser un référentiel. Le plus simple pour cela est d'utiliser la commande « create-react-app ». Installez ce paquet en utilisant la commande suivante dans votre invite de commande ou votre terminal.

    Vous disposez déjà d'un référentiel à connecter. Passez à l'étape c ci-dessous.
    Vous voulez procéder à un déploiement sans vous connecter à un fournisseur Git. Commencez en cliquant ici.
    npx create-react-app amplifyapp
    cd amplifyapp
    npm start

    Dans cette étape, vous allez créer un référentiel GitHub et déposer votre code dans le référentiel. Vous aurez besoin d'un compte GitHub pour terminer cette étape. Si vous n'en avez pas, inscrivez-vous ici.

    a. Créez un référentiel GitHub pour votre application (lien)

    Front End GitHub Repository Module 1

    b. Initialisez Git et envoyez l'application au nouveau référentiel GitHub en exécutant les commandes suivantes dans votre interface de ligne de commande :

    git init
    git remote add origin git@github.com:username/reponame.git
    git add .
    git commit -m “initial commit”
    git push origin master

    c. Pour connecter votre référentiel, connectez-vous à Amplify Console, puis sélectionnez Mise en route dans Déployer.

    1-gettingstarted

    Connectez vos référentiels GitHub, Bitbucket, GitLab ou AWS CodeCommit. Vous avez également la possibilité de télécharger manuellement vos artefacts de construction sans connecter un référentiel Git (voir Déploiements manuels). Après avoir autorisé Amplify Console, Amplify récupère un jeton d'accès auprès du fournisseur du référentiel, mais ne stocke pas ce jeton sur les serveurs AWS. Amplify accède à votre référentiel en utilisant des clés de déploiement installées dans un référentiel spécifique uniquement.

    2-connectrepository

    Après avoir connecté le fournisseur de services de référentiel, choisissez un référentiel, puis la branche correspondante à construire et à déployer.

    3-repositorybranch
  • Confirmer les paramètres de construction

    Pour la branche sélectionnée, Amplify examine votre référentiel pour détecter automatiquement la séquence de commandes de construction à exécuter. Confirmez les paramètres de construction, puis cliquez sur Suivant.

    next-host
  • Enregistrer et déployer

    Passez en revue tous les paramètres pour vous assurer que tout est configuré correctement. Sélectionnez Enregistrer et déployer pour déployer votre application web sur un réseau mondial de diffusion de contenu (CDN). La mise en place de votre front-end prend généralement de 1 à 2 minutes, mais peut être plus ou moins rapide en fonction de la taille de l'application.

    8-saveanddeploy

Ce tutoriel vous a-t-il été utile ?

Merci
Merci de nous indiquer ce que vous avez aimé.
Fermer
Nous sommes désolés de vous décevoir.
Quelque chose est-il obsolète, déroutant ou inexact ? Aidez-nous à améliorer ce didacticiel en fournissant des commentaires.
Fermer

Héberger un site web statique avec Amazon S3

Pour héberger votre site web statique, vous pouvez également utiliser Amazon S3. L'hébergement d'un site web statique sur Amazon S3 permet d'obtenir un site hautement performant et évolutif, à un coût bien plus abordable que pour un serveur web traditionnel.

Pour héberger un site web statique sur Amazon S3, configurez un compartiment Amazon S3 pour l'hébergement du site et téléchargez le contenu de votre site. Avec AWS Management Console, vous pouvez configurer votre compartiment Amazon S3 en tant que site web statique sans utiliser le moindre code. En fonction des exigences de votre site web, vous pouvez également utiliser certaines configurations optionnelles, notamment les redirections, la journalisation du trafic web et les documents d'erreur personnalisés.

Pour obtenir plus d'informations sur l'hébergement d'un site web statique sur Amazon S3, y compris des instructions et les étapes à suivre, consultez le guide de mise en œuvre.

Félicitations !

Vous avez créé une application web statique dans AWS ! Pour continuer, découvrez plus en détails AWS Amplify ainsi que l'ensemble de ses outils et services de développement d'applications web et mobiles sur AWS.