{"id":25676,"date":"2021-06-10T19:39:00","date_gmt":"2021-06-10T16:39:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=25676"},"modified":"2021-10-18T02:05:25","modified_gmt":"2021-10-17T23:05:25","slug":"deployez-gratuitement-un-site-web-statique-sur-firebase-hosting","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/fr\/deployez-gratuitement-un-site-web-statique-sur-firebase-hosting\/","title":{"rendered":"D\u00e9ployez gratuitement un site Web statique sur Firebase Hosting"},"content":{"rendered":"

L’h\u00e9bergement Firebase est un service propos\u00e9 par Google qui h\u00e9berge des sites Web statiques et dynamiques de mani\u00e8re s\u00e9curis\u00e9e. C’est le meilleur service gratuit pour les d\u00e9veloppeurs. Vous pouvez montrer une conception de site, une version de pr\u00e9-production d’un site au client en le d\u00e9ployant sur l’h\u00e9bergement Firebase.<\/p>\n

Un utilisateur peut utiliser le plan gratuit de Firebase pour h\u00e9berger un site Web. Le plan gratuit comprend la prise en charge du domaine personnalis\u00e9 et SSL, 1 Go de stockage. Le stockage de 1 Go est suffisant pour les petits sites Web. Pour obtenir une liste de toutes les fonctionnalit\u00e9s incluses dans les forfaits gratuits et premium, consultez leur page de tarification<\/a>.<\/p>\n

Bien que l’h\u00e9bergement Firebase prenne en charge l’ex\u00e9cution du code Node.js\/JavaScript, dans cet article, nous nous concentrons uniquement sur le d\u00e9ploiement du site Web statique. Pour d\u00e9ployer un site Web dynamique sur Firebase, j’\u00e9crirai un autre article \u00e0 l’avenir.<\/p>\n

Commencer<\/h3>\n

Pour commencer, vous devez avoir install\u00e9 Node.js sur votre syst\u00e8me. Vous pouvez obtenir le package Node.js pour l’installation sur leur site officiel<\/a>.<\/p>\n

Une fois Node.js install\u00e9 sur votre syst\u00e8me, acc\u00e9dez \u00e0 la console Firebase<\/a> et cr\u00e9ez un projet en cliquant sur la case "Ajouter un projet". Remplissez toutes les informations comme demand\u00e9.<\/p>\n

Lors de la cr\u00e9ation du projet Firebase, vous serez ensuite redirig\u00e9 vers le tableau de bord du projet. Cliquez sur \u00ab\u00a0H\u00e9bergement\u00a0\u00bb dans la barre lat\u00e9rale gauche, puis sur \u00ab\u00a0Commencer\u00a0\u00bb. Il ouvrira une page o\u00f9 vous trouverez des instructions pour le d\u00e9ploiement. Nous verrons cela dans la prochaine partie du tutoriel.<\/p>\n

D\u00e9ployer un site Web statique sur Firebase Hosting<\/h3>\n

Apr\u00e8s avoir cr\u00e9\u00e9 un projet sur Firebase, \u00e0 l’aide de quelques commandes, nous pouvons d\u00e9ployer un site Web statique sur l’h\u00e9bergement Firebase. Cela n\u00e9cessite que vous installiez d’abord Firebase CLI, puis que vous le configuriez localement.<\/p>\n

Installer la CLI Firebase<\/h4>\n

Pour le d\u00e9ploiement, la premi\u00e8re chose que vous devez faire est l’installation de Firebase CLI. Vous avez install\u00e9 Node.js, utilisez donc npm pour installer CLI. Ouvrez le terminal et installez Firebase CLI \u00e0 l’aide de npm comme suit\u00a0:<\/p>\n

npm install -g firebase-tools<\/code><\/pre>\n
Notez que nous installons les outils Firebase globalement en utilisant -g<\/code>. Ce faisant, vous pouvez ex\u00e9cuter des commandes Firebase \u00e0 partir de n’importe quel r\u00e9pertoire de votre ordinateur. Maintenant, \u00e0 partir du terminal, ex\u00e9cutez la commande suivante\u00a0:<\/p>\n
firebase login<\/code><\/pre>\n
Il peut vous rediriger vers la page de connexion du compte Google. Suivez simplement les \u00e9tapes sugg\u00e9r\u00e9es. Il s’agit simplement d’un processus d’autorisation avec Firebase, le projet sera donc d\u00e9ploy\u00e9 sur votre compte uniquement.<\/p>\n
Initialiser et d\u00e9ployer<\/h4>\n
Apr\u00e8s avoir autoris\u00e9 votre compte Google avec Firebase CLI, vous devez initialiser Firebase dans le r\u00e9pertoire racine du projet. Pour cela, ex\u00e9cutez la commande ci-dessous dans le r\u00e9pertoire racine de votre projet.<\/p>\n
firebase init<\/code><\/pre>\n
Lors de l’ex\u00e9cution de la commande ci-dessus, CLI demande une option diff\u00e9rente \u00e0 choisir. Vous devez s\u00e9lectionner l’option \u00ab\u00a0H\u00e9bergement\u00a0\u00bb en naviguant sur une fl\u00e8che, puis en appuyant sur la touche espace. Appuyez sur Entr\u00e9e apr\u00e8s avoir s\u00e9lectionn\u00e9 l’option \u00ab\u00a0H\u00e9bergement\u00a0\u00bb.<\/p>\n
\"D\u00e9ployez<\/a><\/p>\n
Ensuite, s\u00e9lectionnez le projet que vous avez cr\u00e9\u00e9 dans la console Firebase. Appuyez sur la touche Entr\u00e9e. La question suivante serait que voulez-vous utiliser comme r\u00e9pertoire public\u00a0? (Publique). Pas besoin de faire quoi que ce soit ici. Appuyez simplement sur la touche Entr\u00e9e.<\/p>\n
Pour la question suivante Configurer en tant qu’application \u00e0 page unique (r\u00e9\u00e9crire toutes les URL dans \/index.html)\u00a0? (o\/N), appuyez sur N et appuyez sur Entr\u00e9e car nous ne d\u00e9ployons pas une application \u00e0 page unique.<\/p>\n
Apr\u00e8s cette commande, vous verrez quelques fichiers cr\u00e9\u00e9s dans votre r\u00e9pertoire racine avec le public<\/code>dossier. Ce public<\/code>r\u00e9pertoire servira de racine pour le d\u00e9ploiement. Dans ce public<\/code>r\u00e9pertoire, vous devez conserver vos fichiers de projet.<\/p>\n
Maintenant, cr\u00e9ons des pages HTML statiques. Comme ce tutoriel est uniquement \u00e0 des fins de d\u00e9monstration, je cr\u00e9e des pages HTML de base.<\/p>\n
public\/index.html<\/strong><\/p>\n
<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n\u00a0\u00a0\u00a0\u00a0<meta charset=\"UTF-8\">\n\u00a0\u00a0\u00a0\u00a0<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n\u00a0\u00a0\u00a0\u00a0<meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">\n\u00a0\u00a0\u00a0\u00a0<title>Document<\/title>\n\u00a0\u00a0\u00a0\u00a0<link rel=\"stylesheet\" href=\"style.css\">\n<\/head>\n<body>\n\u00a0\u00a0\u00a0\u00a0<h1>This is Index Page<\/h1>\n\u00a0\u00a0\u00a0\u00a0<a href=\"index.html\">Home<\/a> | <a href=\"about.html\">About<\/a>\n<\/body>\n<\/html><\/code><\/pre>\n
public\/about.html<\/strong><\/p>\n
<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n\u00a0\u00a0\u00a0\u00a0<meta charset=\"UTF-8\">\n\u00a0\u00a0\u00a0\u00a0<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n\u00a0\u00a0\u00a0\u00a0<meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">\n\u00a0\u00a0\u00a0\u00a0<title>Document<\/title>\n\u00a0\u00a0\u00a0\u00a0<link rel=\"stylesheet\" href=\"style.css\">\n<\/head>\n<body>\n\u00a0\u00a0\u00a0\u00a0<h1>This is About Page<\/h1>\n\u00a0\u00a0\u00a0\u00a0<a href=\"index.html\">Home<\/a> | <a href=\"about.html\">About<\/a>\n<\/body>\n<\/html><\/code><\/pre>\n
public\/style.css<\/strong><\/p>\n
h1 {\n\u00a0\u00a0\u00a0\u00a0color: blueviolet;\n}<\/code><\/pre>\n
Ce sont nos pages statiques que nous allons d\u00e9ployer sur l’h\u00e9bergement Firebase.<\/p>\n
Si vous souhaitez tester le projet localement avant le d\u00e9ploiement, ex\u00e9cutez la commande serve comme suit\u00a0:<\/p>\n
firebase serve<\/code><\/pre>\n
Il d\u00e9marrera votre serveur local \u00e0 l’ adresse http:\/\/localhost:5000<\/a>. Testez votre projet et si tout va bien, d\u00e9ployez-le \u00e0 l’aide de la commande\u00a0:<\/p>\n
firebase deploy<\/code><\/pre>\n
Une fois le d\u00e9ploiement termin\u00e9, vous devriez voir l’URL d’h\u00e9bergement dans la console.<\/p>\n
\"D\u00e9ployez<\/a><\/p>\n
Ex\u00e9cutez l’URL d’h\u00e9bergement dans le navigateur et vous devriez voir que votre site Web est d\u00e9ploy\u00e9 avec succ\u00e8s. Notez que vous pouvez d\u00e9ployer votre projet autant de fois. Apr\u00e8s vos modifications, ex\u00e9cutez simplement la commande deploy et votre site se d\u00e9ploiera avec la nouvelle version.<\/p>\n
Restaurer votre version<\/h3>\n
Firebase conserve un historique de toutes vos versions de d\u00e9ploiement. Vous pouvez m\u00eame revenir \u00e0 l’ancienne version. Acc\u00e9dez \u00e0 la page Firebase Hosting o\u00f9 vous trouverez une option de restauration (en supposant que vous ayez d\u00e9ploy\u00e9 plusieurs versions).<\/p>\n
\"D\u00e9ployez<\/a><\/p>\n
En effectuant une restauration des versions, vous pouvez basculer directement entre chaque version de votre site Web. C’est simple et utile pendant la phase de conception et de d\u00e9veloppement.<\/p>\n
J’esp\u00e8re que vous avez appris les bases du processus de d\u00e9ploiement de l’h\u00e9bergement Firebase. S’il vous pla\u00eet partager vos pens\u00e9es et suggestions dans la section commentaires ci-dessous.<\/p>\n
Articles Li\u00e9s<\/h4>\n