📵 👩🏿‍🤝‍👨🏽 🧓🏾 Heroku et React: déployez votre première application 🍍 🍉 🔍

Bonjour à tous. Parallèlement au printemps, de nouveaux cours sont venus à OTUS, que nous commençons à introduire aujourd'hui. Recrutement déjà ouvert pour le cours "React.js developer" . Vous pouvez en savoir plus sur le cours lors du webinaire gratuit , qui se tiendra le 11 mars. Dans le cadre du même webinaire, une petite application web sur ReactJS sera développée.

Et maintenant, nous vous suggérons de lire l'article sur le déploiement de votre première application, qui a été écrit par notre auteur indépendant.

Le modèle de démarrage Create-react-app et Heroku sont d'excellents outils pour créer rapidement des applications basées sur le cloud, mais la documentation React et Heroku contient étonnamment peu d'informations sur la façon de déployer votre application React sur Heroku. Les étapes décrites dans cet article fonctionneront sur tout projet créé à l'aide de create-react-app . Dans notre article, nous allons installer sur Heroku une application simple à faire avec le backend le plus minimal, juste pour regarder le processus lui-même. Mais tout d'abord:

Qu'est-ce que Heroku en général? Pourquoi ai-je besoin de lui?

Heroku est une plate-forme cloud-as-a-service (PaaS) qui prend en charge de nombreux langages de programmation (et elle se vante et se démarque vraiment). L'histoire de Heroku a commencé en 2007, puis Ruby a été le premier langage de programmation. Il prend désormais en charge Java, Node.js, Scala, Clojure, Python, PHP et Go.

Pourquoi ai-je besoin de ce cloud? Je peux acheter un hébergement bon marché

Oui, vous pouvez acheter un hébergement pour vous-même et y installer le serveur Node.js, si ce service est pris en charge sur l'hébergement. Cependant, les plates-formes cloud ont des qualités telles que, par exemple, la mesure de l'élasticité et de la consommation - si de nombreux utilisateurs visitent votre service, la plate-forme sera très probablement automatiquement (ou vous-même en utilisant les outils fournis par la plate-forme) modulera ou réduira le flux. La comptabilisation de la consommation signifie que vous ne paierez que pour les ressources en demande. Les plates-formes cloud ont de nombreux autres avantages, une liste complète peut être trouvée ici . Eh bien, nous irons directement au déploiement.

Créer votre propre application React

De quel type de modèle create-react-app s'agit-il ? Il est probablement impossible d’être même un peu impliqué dans le développement d’applications React et de ne pas le savoir. Ce modèle fournit React, React-dom, Webpack, ESLint "sous le capot". Bien sûr, vous pouvez créer vous-même votre propre application React, mais pourquoi créer une application complexe avec un tas de dépendances lorsque vous pouvez utiliser un vélo prêt à l'emploi?

Pour commencer, assurez-vous que Node.js est installé .

Pour créer une nouvelle application, entrez les commandes suivantes dans la console:

 npx create-react-app test-app
 cd test-app

Remarque utile

, , create-react-app . npm install -g create-react-app. , ( , ), - , react-scripts 3.4.0. , npm uninstall -g create-react-app.

Ok, vous avez livré le package et vous souhaitez maintenant le déployer. Afin de ne pas déployer un package simple avec un composant que create-react-app délivre hors de la boîte, j'ai décidé d'écrire une petite application todo, dont le code source, si vous voulez également essayer de remplir votre application, peut être trouvé ici . En bref, il y a un enregistrement d'état sous la forme de nouvelles entrées à la mode , d'où le texte des cas et leur identifiant , qui est généré directement à partir de Date.now(). J'ai participé à la mise en page des composants de Material-UI react .

Vous pouvez mettre cette application pour vous et la déployer avec:

 npm i -D
 npm start

Ensuite, nous avons une occasion incroyable de jouer et de créer nos propres affaires. Cependant, toutes les fonctionnalités de cette application permettent de sauvegarder les choses en état . Je n'ai fait aucune jarretière au serveur ou au moins à localStorage , le but de cet article n'est pas celui-ci. Supposons que je suis très paranoïaque et que je vais enregistrer mes affaires dans une seule inclusion de l'onglet du navigateur.

Créez votre favicon

Pourquoi avons-nous même besoin d'un serveur Node.js s'il n'y a pas de travail avec la base de données? En utilisant le serveur, nous donnerons un favicon et tout le reste du code. Dans notre application React , accédez au dossier public et supprimez le modèle favicon.ico à partir de là. Je vais prendre l'icône d'ici et la transférer dans le dossier public.

Créez votre serveur Express

Ensuite, nous créons notre serveur Express pour gérer la build. Directement dans le dossier de l'application, créez un fichier server.jsdans lequel se déroulera le travail de notre backend.

Nous y écrivons ce qui suit:

 const express = require('express');
 const favicon = require('express-favicon');
 const path = require('path');
 const port = process.env.PORT || 8080;
 
 //           
 const app = express();
 app.use(favicon(__dirname + '/build/favicon.png')); 
 
 //    
 app.use(express.static(__dirname));
 app.use(express.static(path.join(__dirname, 'build')));
 
 //  
 app.get('/ping', function (req, res) {
  return res.send('pong');
 });
 
 // html
 app.get('/*', function (req, res) {
 res.sendFile(path.join(__dirname, 'build', 'index.html'));
 });
 app.listen(port);

Puisque nous utilisons des packages express , express-favicon et path , nous devons les installer:

 yarn add express express-favicon path -D

Dans nous package.jsonchangeons la commande de démarrage comme suit:

 "start": "node server.js",

Exécuter la génération

Ensuite, nous devons créer l'application à l'aide de la commande suivante:

 yarn build

Ce serait bien de tester que notre application fonctionne correctement. Pour ce faire, nous recrutons yarn startet évaluons son bon fonctionnement.

Masquer le sourcemap

Peut-être que vous ne voulez pas que quiconque puisse accéder à votre code source. Dans ce cas, vous devez supprimer l'accès au vôtre sourcemap. Pour ce faire, créez un fichier dans le référentiel .envet interdisez la génération de cartes dans celui-ci:

 GENERATE_SOURCEMAP=false

Remarque utile

Source map ( , , , , - ). — source map, , .

Déployer directement

Si vous n'avez pas encore de compte sur heroku , vous devez vous inscrire ici . Pour le déploiement, vous devrez également installer Heroku CLI à partir d'ici . Testez son fonctionnement en écrivant la connexion heroku sur la ligne de commande. Ensuite, vous trouverez une redirection vers le site Web Heroku, où vous devez vous connecter.

Saisissez ensuite le nom de votre application. Dans mon cas, ce sera todoisakura313 , car vous ne pouvez pas utiliser de caractères spéciaux ni de soulignements dans le nom de l'application:

 heroku create todoisakura313

Ensuite, nous enverrons notre build en utilisant les commandes suivantes:

 npm install
 git add --all
 git commit -m "first commit"
 git push heroku master

Ces commandes vous permettront d'ajouter des dépendances, d'initialiser gitet de télécharger l'application elle-même.

Bien! En général, tout est prêt, maintenant l'application doit déjà apparaître à l'adresse https://< >.herokuapp.com/. Vous pouvez ouvrir l'application en tapant les commandes suivantes dans la console:

heroku open

En cas de problème, découvrez ce qui ne va pas avec l'équipe heroku logs --tail. Cependant, en général, si vous ne vous êtes pas écarté des instructions de cet article, vous auriez dû réussir.

C'est tout! Merci pour l'attention. Une application qui fonctionne peut être trouvée ici , et avec son code fini - ici .

Et ceux qui ont lu jusqu'à la fin, nous vous invitons à un autre webinaire gratuit , dans le cadre duquel vous apprendrez les forces et les faiblesses des frameworks JS les plus populaires pour le développement Frontend, comprendre pour quelles tâches quel framework est le mieux adapté et vous pouvez décider lequel est le meilleur étudier.

Heroku et React: déployez votre première application