One place for hosting & domains

      Comment créer un nouvel utilisateur et octroyer des autorisations dans MySQL


      Introduction

      MySQL est un logiciel de gestion de base de données open-source qui aide les utilisateurs à stocker, organiser et récupérer des données. Un vaste éventail d’options est disponible pour octroyer les autorisations adaptées à des utilisateurs spécifiques dans les tables et les bases de données. Ce tutoriel vous donnera un bref aperçu de quelques-unes des nombreuses options disponibles.

      Qu’est-ce que Highlights signifie ?

      Au cours de ce tutoriel, toutes les lignes que l’utilisateur devra saisir ou personnaliser seront highlighted (mises en surbrillance) ! Le reste devra essentiellement être saisi via du copier-coller.

      Dans la partie 1 du tutoriel MySQL, nous avons procédé à des modifications dans MySQL en tant que root user avec un accès complet à toutes les bases de données. Cependant, dans les cas où vous auriez besoin de configurer des restrictions supplémentaires , il existe des moyens de créer des utilisateurs avec des autorisations personnalisées.

      Commençons par créer un nouvel utilisateur dans le shell MySQL :

      • CREATE USER 'newuser'@'localhost' IDENTIFIED BY 'password';

      Remarque : lorsque nous ajouterons des utilisateurs dans le shell MySQL au cours de ce tutoriel, nous indiquerons que l’hôte de l’utilisateur est localhost et non l’adresse IP du serveur. localhost est un nom d’hôte qui signifie « cet ordinateur ». MySQL traite tout particulièrement ce nom d’hôte spécifique : lorsqu’un utilisateur avec cet hôte se connecte sur MySQL, il tentera de se connecter au serveur local en utilisant un fichier de socket Unix. Par conséquent, de manière générale, vous pouvez utiliser localhost si vous prévoyez de vous connecter à votre serveur en SSH ou exécuter le client mysql local pour vous connecter au serveur MySQL local.

      À ce stade, newuser n’a aucune autorisation et ne peut rien faire sur les bases de données. En effet, même si newuser tente de se connecter (avec le mot de passe password), il ne pourra pas atteindre le shell MySQL.

      Par conséquent, la première chose à faire consiste à donner accès à l’utilisateur aux informations dont il a besoin.

      • GRANT ALL PRIVILEGES ON * . * TO 'newuser'@'localhost';

      Les astérisques de cette commande renvoient à la base de données et à la table (respectivement) auxquelles ils peuvent accéder. Cette commande spécifique permet à l’utilisateur de lire, modifier, exécuter et effectuer toutes tâches sur l’intégralité des bases de données et des tables.

      Notez que, dans cet exemple, nous accordons à newuser un total accès root à tout ce qui se trouve dans notre base de données. Bien que cela soit utile pour expliquer certains concepts MySQL, il se peut que cette méthode soit impraticable sur la plupart des cas d’utilisation et expose votre base de données à d’importants risques de sécurité.

      Une fois que vous en aurez fini avec les autorisations que vous souhaitez configurer pour vos nouveaux utilisateurs, veillez à toujours recharger tous les privilèges.

      Maintenant, vos modifications ont pris effet.

      Voici une courte liste des autres autorisations possibles couramment utilisées que vous pouvez octroyer aux utilisateurs.

      • ALL PRIVILEGES : comme nous l'avons vu précédemment, cela donne à l'utilisateur de MySQL un total accès à une base de données désignée (ou un accès global à l'ensemble du système si aucune base de données n'est sélectionnée)
      • CREATE : permet de créer de nouvelles tables ou bases de données
      • DROP :permet de supprimer des tables ou des bases de données
      • DELETE : permet de supprimer des lignes des tables
      • INSERT : permet d'insérer des lignes dans les tables
      • SELECT :permet d'utiliser la commande SELECT pour lire des bases de données
      • UPDATE : permet de mettre à jour les lignes d'une table
      • GRANT OPTION : permet d'accorder ou de supprimer les privilèges des autres utilisateurs

      Pour donner une autorisation à un utilisateur spécifique, vous pouvez utiliser le framework suivant :

      • GRANT type_of_permission ON database_name.table_name TO 'username'@'localhost';

      Si vous souhaitez lui donner accès à l'une des bases de données ou des tables, veillez à bien remplacer le nom de la base de données ou de la table par un astérisque (*).

      À chaque fois que vous mettez à jour ou modifiez une autorisation, veillez à bien utiliser la commande Flush Privileges.

      Pour révoquer une autorisation, la structure est pratiquement identique à celle de l'octroi d'autorisation :

      • REVOKE type_of_permission ON database_name.table_name FROM 'username'@'localhost';

      Notez que, lorsque vous révoquez des autorisations, vous devez utiliser la syntaxe FROM à la place du TO que nous avons utilisé pour accorder des autorisations.

      Vous pouvez contrôler les autorisations actuellement octroyées à un utilisateur en exécutant la commande suivante :

      • SHOW GRANTS FOR 'username'@'localhost';

      De la même manière que vous pouvez supprimer des bases de données avec DROP, vous pouvez utiliser DROP pour supprimer complètement un utilisateur :

      • DROP USER 'username'@'localhost';

      Pour tester votre nouvel utilisateur, déconnectez-vous en saisissant :

      et reconnectez-vous en utilisant la commande suivante dans le terminal :

      Conclusion

      Une fois ce tutoriel terminé, vous devriez avoir une meilleure idée sur la manière d'ajouter de nouveaux utilisateurs et de leur octroyer différentes autorisations dans une base de données MySQL. De là, vous pouvez continuer d'explorer et d'expérimenter les différents paramètres d'autorisation qui existent pour votre base de données ou en apprendre plus sur certaines configurations MySQL de niveau supérieur.

      Pour de plus amples informations sur les bases de MySQL, nous vous encourageons à consulter les tutoriels suivants :



      Source link

      Comment utiliser SFTP pour transférer des fichiers en toute sécurité avec un serveur distant


      Introduction

      FTP, ou « File Transfer Protocol » (protocole de transfert de fichiers) était une méthode non cryptée populaire utilisée pour transérer des fichiers entre deux systèmes distants.

      SFTP, qui signifie SSH File Transfer Protocol (protocole de transfert de fichiers SSH ou protocole de transfert de fichiers sécurisé) est un protocole distinct intégrant SSH, qui fonctionne de manière similaire mais via une connexion sécurisée. Il présente l’avantage de pouvoir tirer parti d’une connexion sécurisée pour transférer des fichiers et traverser le système de fichiers à la fois sur le système local et sur le système distant.

      Dans la plupart des cas, il est préférable d’utiliser le SFTP au lieu du FTP, en raison de ses fonctionnalités de sécurité sous-jacentes et de sa capacité à se greffer sur une connexion SSH. FTP est un protocole non sécurisé qui ne doit être utilisé que dans certains cas ou sur des réseaux de confiance.

      Bien que le SFTP soit intégré à de nombreux outils graphiques, ce guide vous expliquera de quelle manière l’utiliser via son interface de ligne de commande interactive.

      SFTP utilise le protocole SSH par défaut pour s’authentifier et établir une connexion sécurisée. Pour cette raison, les mêmes méthodes d’authentification que celles présentes dans SSH sont mises à disposition.

      Bien que les mots de passe soient faciles à utiliser et configurés par défaut, nous vous recommandons de créer des clés SSH et de transférer votre clé publique à tous les systèmes auxquels vous devez accéder. Cette méthode est bien plus sécurisée et vous permet de gagner du temps sur le long terme.

      Veuillez vous reporter à ce guide pour configurer des clés SSH et accéder ainsi à votre serveur, si vous ne l’avez pas encore fait.

      Si vous arrivez à vous connecter à la machine en utilisant SSH, cela signifie que vous avez rempli toutes les conditions requises pour gérer les fichiers à l’aide de SFTP. Testez l’accès à SSH à l’aide de la commande suivante :

      • ssh sammy@your_server_ip_or_remote_hostname

      Si cela fonctionne, ressortez en saisissant :

      Désormais, nous pouvons établir une session SFTP en émettant la commande suivante :

      • sftp sammy@your_server_ip_or_remote_hostname

      Votre connexion au système distant sera établie et votre invite se transformera en une invite SFTP.

      Si vous travaillez sur un port SSH personnalisé (et non pas sur le port 22 par défaut), vous pouvez alors ouvrir une session SFTP de la manière suivante  :

      • sftp -oPort=custom_port sammy@your_server_ip_or_remote_hostname

      Ceci établira votre connexion au système distant via le port que vous avez spécifié.

      Obtenir de l'aide dans SFTP

      La commande la plus utile que vous devez apprendre à utiliser en premier est la commande d'aide. Elle vous permet d'accéder à un résumé de l'aide de SFTP. Vous pouvez l'appeler en saisissant l'une ou l'autre des options suivantes dans l'invite :

      ou

      Une liste des commandes disponibles s'affichera :

      Output

      Available commands: bye Quit sftp cd path Change remote directory to 'path' chgrp grp path Change group of file 'path' to 'grp' chmod mode path Change permissions of file 'path' to 'mode' chown own path Change owner of file 'path' to 'own' df [-hi] [path] Display statistics for current directory or filesystem containing 'path' exit Quit sftp get [-Ppr] remote [local] Download file help Display this help text lcd path Change local directory to 'path' . . .

      Nous allons explorer certaines des commandes que vous allez aborder dans les sections suivantes.

      Un certain nombre de commandes qui fonctionnement de la même manière que leurs homologues shell nous permettent de naviguer dans la hiérarchie de fichiers du système distant.

      Tout d'abord, cherchons à savoir dans quel répertoire du système distant nous nous trouvons actuellement. Tout comme dans une session shell type, nous pouvons saisir ce qui suit pour obtenir le répertoire actuel :

      Output

      Remote working directory: /home/demouser

      Nous pouvons consulter le contenu du répertoire actuel du système distant à l'aide d'une autre commande commune :

      Output

      Summary.txt info.html temp.txt testDirectory

      Notez que les commandes de l'interface SFTP ne sont pas similaires aux commandes shell normales et ne sont pas aussi riches en fonctionnalités. Elles permettent cependant d'implémenter certaines des balises optionnelles les plus importantes :

      Output

      drwxr-xr-x 5 demouser demouser 4096 Aug 13 15:11 . drwxr-xr-x 3 root root 4096 Aug 13 15:02 .. -rw------- 1 demouser demouser 5 Aug 13 15:04 .bash_history -rw-r--r-- 1 demouser demouser 220 Aug 13 15:02 .bash_logout -rw-r--r-- 1 demouser demouser 3486 Aug 13 15:02 .bashrc drwx------ 2 demouser demouser 4096 Aug 13 15:04 .cache -rw-r--r-- 1 demouser demouser 675 Aug 13 15:02 .profile . . .

      Pour accéder à un autre répertoire, nous pouvons lancer la commande suivante :

      Maintenant que nous pouvons traverser le système de fichiers distant, qu'en est-il si nous devons accéder à notre système de fichiers local ? Nous pouvons diriger les commandes vers le système de fichiers local en les faisant précéder d'un l pour local.

      Toutes les commandes abordées jusqu'à maintenant disposent d'équivalents en local. Nous pouvons imprimer le répertoire de travail local :

      Output

      Local working directory: /Users/demouser

      Nous pouvons lister le contenu du répertoire actuel sur la machine locale :

      Output

      Desktop local.txt test.html Documents analysis.rtf zebra.html

      Nous pouvons également changer le répertoire avec lequel nous souhaitons interagir sur le système local :

      Transférer des fichiers avec SFTP

      L'utilité de la navigation dans les systèmes de fichiers distants et locaux reste limitée si nous ne pouvons pas transférer des fichiers entre les deux.

      Transférer des fichiers distants vers le système local

      Pour télécharger des fichiers à partir de notre hébergement local, vous pouvez passer la commande suivante :

      Output

      Fetching /home/demouser/remoteFile to remoteFile /home/demouser/remoteFile 100% 37KB 36.8KB/s 00:01

      Comme vous pouvez le voir, par défaut, la commande get télécharge un fichier distant vers un fichier qui porte le même nom sur le système de fichiers local.

      Nous pouvons copier le fichier distant en utilisant un autre nom, en spécifiant le nom par la suite :

      La commande get prend également en charge quelques balises d'option. Par exemple, nous pouvons copier un répertoire et l'intégralité de son contenu en spécifiant l'option récursive suivante :

      Nous pouvons dire au SFTP de maintenir les autorisations et les temps d'accès appropriés en utilisant la balise -P ou -p :

      Transférer des fichiers locaux vers le système distant

      Il est tout aussi facile de transférer des fichiers vers le système distant en utilisant la commande qui s'appelle, à juste titre, « put » :

      Output

      Uploading localFile to /home/demouser/localFile localFile 100% 7607 7.4KB/s 00:00

      Les mêmes balises que celles qui fonctionnent avec get s'appliquent à put. Donc, si vous souhaitez copier un répertoire local entier, vous pouvez lancer la commande suivante :

      Remarque: il existe actuellement un bogue dans les versions d'OpenSSH intégrant les versions actuelles d'Ubuntu (au moins 14.04 à 15.10), ce qui empêche la commande ci-dessus de fonctionner correctement. Une fois la commande ci-dessus lancée pour transférer le contenu vers un serveur en utilisant la version avec bogue d'OpenSSH, l'erreur suivante apparaîtra : Couldn't canonicalise: No such file or directory (Impossible à canonicaliser : pas de fichier ou de répertoire de ce type).

      Pour résoudre ce problème, créez le répertoire de destination tout d'abord du côté distant en saisissant mkdir localDirectory. Ensuite, la commande ci-dessus devrait s'exécuter sans erreur.

      La commande df est un outil pratique, communément utilisé pour télécharger et envoyer des fichiers. Elle fonctionne de la même manière que la version avec ligne de commande. Grâce à elle, vous pouvez vérifier si vous disposez d'assez d'espace pour procéder aux transferts que vous souhaitez effectuer :

      Output

      Size Used Avail (root) %Capacity 19.9GB 1016MB 17.9GB 18.9GB 4%

      Notez qu'il n'existe pas de variation locale de cette commande, mais nous pouvons contourner cela en émettant la commande ! .

      La commande ! nous amène dans un shell local, où nous pouvons exécuter toute commande disponible sur notre système local. Nous pouvons vérifier l'utilisation du disque en saisissant :

      et puis

      Output

      Filesystem Size Used Avail Capacity Mounted on /dev/disk0s2 595Gi 52Gi 544Gi 9% / devfs 181Ki 181Ki 0Bi 100% /dev map -hosts 0Bi 0Bi 0Bi 100% /net map auto_home 0Bi 0Bi 0Bi 100% /home

      Toute autre commande locale fonctionnera comme prévu. Pour revenir à votre session SFTP, saisissez :

      Maintenant, vous devriez voir apparaître l'invite SFTP.

      Manipulations simples de fichiers avec SFTP

      SFTP vous permet d'effectuer le type de maintenance de base sur les fichiers qui vous est utile lorsque vous travaillez avec des hiérarchies de fichiers.

      Par exemple, vous pouvez modifier le propriétaire d'un fichier sur le système distant en utilisant :

      À la différence de la commande chmod du système, vous remarquerez que la commande SFTP n'accepte pas les noms d'utilisateur, mais utilise des UID à la place. Malheureusement, il n'existe aucun moyen facile de connaître l'UID correspondant à partir de l'interface SFTP.

      Vous pourriez contourner le problème avec :

      • get /etc/passwd
      • !less passwd

      Output

      root:x:0:0:root:/root:/bin/bash daemon:x:1:1:daemon:/usr/sbin:/bin/sh bin:x:2:2:bin:/bin:/bin/sh sys:x:3:3:sys:/dev:/bin/sh sync:x:4:65534:sync:/bin:/bin/sync games:x:5:60:games:/usr/games:/bin/sh man:x:6:12:man:/var/cache/man:/bin/sh . . .

      Notez qu'au lieu d'utiliser la commande ! proprement dite, nous l'avons utilisée comme préfixe pour une commande shell locale. Cette méthode fonctionne pour exécuter toute commande disponible sur notre machine locale, et aurait pu être utilisée avec la commande df locale que nous avons abordée précédemment.

      L'UID se trouvera dans la troisième colonne du fichier, délimitée par des deux-points.

      De la même façon, nous pouvons modifier le propriétaire de groupe d'un fichier en utilisant :

      Encore une fois, il n'existe aucun moyen facile d'obtenir une liste des groupes du système distant. Nous pouvons le faire avec la commande suivante :

      • get /etc/group
      • !less group

      Output

      root:x:0: daemon:x:1: bin:x:2: sys:x:3: adm:x:4: tty:x:5: disk:x:6: lp:x:7: . . .

      La troisième colonne contient l'ID du groupe associé au nom de la première colonne. C'est ce que nous voulons.

      Heureusement, la commande chmod fonctionne comme prévu sur le système de fichiers distant :

      Output

      Changing mode on /home/demouser/publicFile

      Il n'existe aucune commande pour manipuler les autorisations des fichiers locaux, mais vous pouvez configurer l'umask local de manière à ce que tous les fichiers copiés sur le système local disposent des autorisations correspondantes.

      Pour cela, vous pouvez utiliser la commande lumask :

      Output

      Local umask: 022

      Maintenant, tous les fichiers réguliers téléchargés (sous réserve que la balise -p ne soit pas utilisée) auront 644 autorisations.

      SFTP vous permet de créer des répertoires sur des systèmes locaux et distants avec lmkdir et mkdir, respectivement. Ces commandes fonctionnent comme prévu.

      Le reste des commandes de fichier cible uniquement le système de fichiers distant :

      Ces commandes répliquent le comportement de base des versions shell. Si vous devez effectuer ces actions sur le système de fichiers local, n'oubliez pas que vous pouvez vous connecter à un shell en lançant la commande suivante :

      Ou exécutez une seule commande sur le système local en faisant précédant la commande d'un ! comme suit :

      Une fois que vous en aurez terminé avec votre session SFTP, utilisez exit ou bye pour mettre fin à la connexion.

      Conclusion

      Bien que SFTP soit un outil simple, il est très utile pour gérer des serveurs et transférer des fichiers entre eux.

      Par exemple, vous pouvez utiliser SFTP pour permettre à certains utilisateurs de transférer des fichiers sans accès SSH. Pour de plus amples informations sur ce processus, veuillez consulter notre tutoriel How To Enable SFTP Without Shell Access (Comment activer le SFTP sans accès au shell).

      Si vous avez l'habitude d'utiliser FTP ou SCP pour effectuer vos transferts, SFTP est un bon compromis pour pouvoir tirer parti des avantages que les deux ont à offrir. Bien qu'il ne soit pas adapté à toute situation, c'est un outil flexible à avoir dans votre répertoire.



      Source link

      Aktivieren des serverseitige Rendern für eine React-App


      Einführung

      Serverseitiges Rendern (SSR) ist eine beliebte Technik zum Rendern einer Client-seitigen Einzelseitenanwendung (SPA) auf dem Server und zum anschließenden Senden einer vollständig gerenderten Seite an den Client. Dadurch werden dynamische Komponenten als statisches HTML-Markup bereitgestellt.

      Dieser Ansatz kann für die Suchmaschinenoptimierung (SEO) hilfreich sein, wenn die Indizierung JavaScript nicht richtig verarbeitet. Dies kann auch in Situationen von Vorteil sein, in denen das Herunterladen eines großen JavaScript-Bundles durch ein langsames Netzwerk beeinträchtigt wird.

      In diesem Tutorial initialisieren Sie eine React-App mit Create React App und ändern das Projekt, um das serverseitige Rendern zu aktivieren.

      Am Ende dieses Tutorials haben Sie ein Arbeitsprojekt mit einer Client-seitigen React-Anwendung und einer serverseitigen Express-Anwendung.

      Hinweis: Alternativ bietet Next.js einen modernen Ansatz zum Erstellen statischer und vom Server gerenderter Anwendungen, die mit React erstellt wurden.

      Voraussetzungen

      Um diesem Tutorial zu folgen, benötigen Sie:

      Dieses Tutorial wurde mit Node v14.40 und npm v6.14.5 verifiziert.

      Schritt 1 — Erstellen der React-Anwendung und Ändern der App-Komponente

      Zuerst verwenden wir npx, um eine neue React-Anwendung mit der neuesten Version der Create React App zu starten.

      Rufen wir unsere App my-ssr-app auf:

      • npx create-react-app@3.4.1 my-ssr-app

      Dann nehmen wir cd in die neue Anweisung auf:

      cd my-ssr-app
      

      Schließlich starten wir unsere neue Client-seitige App, um die Installation zu verifizieren:

      Sie sollten eine Beispiel-React-App-Anzeige in Ihrem Browser-Fenster sehen.

      Lassen Sie uns nun eine <Home>-Komponente erstellen:

      Fügen Sie als Nächstes den folgenden Code in die Datei Home.js ein:

      src/Home.js

      import React from 'react';
      
      export default props => {
        return <h1>Hello {props.name}!</h1>;
      };
      

      Dadurch wird eine <h1>-Überschrift mit einer "Hello"-Nachricht erstellt, die an einen Namen geleitet wird.

      Als Nächstes rendern wir das <Home> in der <App>-Komponente. Öffnen Sie die Datei App.js:

      Ersetzen Sie dann die vorhandenen Codezeilen durch diese neuen Codezeilen:

      src/App.js

      import React from 'react';
      import Home from './Home';
      
      export default () => {
        return <Home name="Sammy" />;
      };
      

      Dadurch wird ein Name an die <Home>-Komponente übergeben, sodass die Nachricht, die wir erwarten, "Hello Sammy!" lautet.

      In der Datei index.js unserer App verwenden wir die ReactDOM-Hydratmethode anstelle des Renderns, um dem DOM-Renderer anzuzeigen, dass wir die App nach einem serverseitigen Rendern rehydrieren.

      Öffnen wir die Datei index.js:

      Ersetzen Sie dann den Inhalt der Datei index.js durch den folgenden Code:

      index.js

      import React from 'react';
      import ReactDOM from 'react-dom';
      import App from './App';
      
      ReactDOM.hydrate(<App />, document.getElementById('root'));
      

      Damit wird die Einrichtung der Client-Seite abgeschlossen, wir können mit der Einrichtung der Server-Seite fortfahren.

      Schritt 2 — Erstellen eines Express-Servers und Rendern der App-Komponente

      Nachdem wir nun unsere Anwendung eingerichtet haben, richten wir einen Server ein, der eine gerenderte Version übergeben wird. Wir verwenden Express für unseren Server. Fügen wir es dem Projekt hinzu, indem wir den folgenden Befehl in Ihrem Terminalfenster eingeben:

      • npm install express@4.17.1

      Oder mit yarn:

      Erstellen Sie als Nächstes ein Server-Verzeichnis neben dem Verzeichnis src der App:

      Erstellen Sie dann eine neue Datei index.js, die den Express-Servercode enthält:

      Fügen Sie die Importe hinzu, die einige Konstanten benötigen, und definieren Sie diese auch:

      server/index.js

      import path from 'path';
      import fs from 'fs';
      
      import React from 'react';
      import express from 'express';
      import ReactDOMServer from 'react-dom/server';
      
      import App from '../src/App';
      
      const PORT = process.env.PORT || 3006;
      const app = express();
      

      Fügen Sie als Nächstes den Servercode mit einer Fehlerbehandlung hinzu:

      server/index.js

      // ...
      
      app.get('/', (req, res) => {
        const app = ReactDOMServer.renderToString(<App />);
      
        const indexFile = path.resolve('./build/index.html');
        fs.readFile(indexFile, 'utf8', (err, data) => {
          if (err) {
            console.error('Something went wrong:', err);
            return res.status(500).send('Oops, better luck next time!');
          }
      
          return res.send(
            data.replace('<div id="root"></div>', `<div id="root">${app}</div>`)
          );
        });
      });
      
      app.use(express.static('./build'));
      
      app.listen(PORT, () => {
        console.log(`Server is listening on port ${PORT}`);
      });
      

      Wie Sie möglicherweise sehen, können wir unsere <App>-Komponente aus der Client-App direkt vom Server importieren.

      Hier finden drei wichtige Dinge statt:

      • Wir weisen Express an, Inhalte aus dem Verzeichnis build als statische Dateien zu verwenden.
      • Wir verwenden eine Methode von ReactDOMServer, renderToString, um unsere App zu einer statischen HTML-Zeichenfolge zu rendern.
      • Dann lesen wir die statische Datei index.html aus der integrierten Client-App, injizieren den statischen Inhalt unserer App im <div> mit einer ID von "root", und senden dies als Antwort auf die Anfrage.

      Schritt 3 — Konfigurieren von webpack, Babel und npm Scripts

      Damit unser Servercode funktioniert, müssen wir ihn mit webpack und Babel bündeln und transpilieren. Dazu fügen wir dem Projekt die Abhängigkeiten dev hinzu, indem wir den folgenden Befehl in Ihrem Terminalfenster eingeben:

      • npm install webpack@4.42.0 webpack-cli@3.3.12 webpack-node-externals@1.7.2 @babel/core@7.10.4 babel-loader@8.1.0 @babel/preset-env@7.10.4 @babel/preset-react@7.10.4 --save-dev

      Oder mit yarn:

      • yarn add webpack@4.42.0 webpack-cli@3.3.12 webpack-node-externals@1.7.2 @babel/core@7.10.4 babel-loader@8.1.0 @babel/preset-env@7.10.4 @babel/preset-react@7.10.4 --dev

      Hinweis: Eine frühere Version dieses Tutorials installierte babel-core, babel-preset-env und babel-preset-react-app. Diese Pakete wurden seitdem archiviert, und die mono-repo-Versionen werden stattdessen verwendet.

      Erstellen Sie als Nächstes eine Babel-Konfigurationsdatei:

      Fügen Sie dann die Voreinstellungen env und react-app hinzu:

      .babelrc.json

      {
        "presets": [
          "@babel/preset-env",
          "@babel/preset-react"
        ]
      }
      

      Anmerkung: Eine frühere Version dieses Tutorials verwendete eine .babelrc-Datei (keine .json-Dateierweiterung). Dies war eine Konfigurationsdatei für Babel 6, aber dies ist für Babel 7 nicht mehr der Fall.

      Jetzt erstellen wir eine webpack-Konfiguration für den Server, der Babel Loader verwendet, um den Code zu transpilieren. Beginnen Sie mit der Erstellung der Datei:

      Fügen Sie dann die folgenden Konfigurationen in die webpack.server.js-Datei ein:

      webpack.server.js

      const path = require('path');
      const nodeExternals = require('webpack-node-externals');
      
      module.exports = {
        entry: './server/index.js',
      
        target: 'node',
      
        externals: [nodeExternals()],
      
        output: {
          path: path.resolve('server-build'),
          filename: 'index.js'
        },
      
        module: {
          rules: [
            {
              test: /.js$/,
              use: 'babel-loader'
            }
          ]
        }
      };
      

      Mit dieser Konfiguration wird unser transpiliertes Serverbundle an den Ordner server-build in einer Datei namens index.js ausgegeben.

      Beachten Sie die Verwendung von target: 'node' und externals: [nodeExternals()] aus webpack-node-externals, wodurch die Dateien aus node_modules im Bundle versagt werden; der Server kann direkt auf diese Dateien zugreifen.

      Dadurch wird die Abhängigkeit von der Installation und der webpack- und Babel-Konfiguration abgeschlossen.

      Jetzt besuchen wir erneut package.json, um Helfer-npm-Scripts hinzuzufügen:

      Wir fügen der Datei package.json die Scripts dev:build-server, dev:start und dev hinzu, um unsere SSR-Anwendung leicht zu erstellen und zu bedienen:

      package.json

      "scripts": {
        "dev:build-server": "NODE_ENV=development webpack --config webpack.server.js --mode=development -w",
        "dev:start": "nodemon ./server-build/index.js",
        "dev": "npm-run-all --parallel build dev:*",
        ...
      },
      

      Wir verwenden nodemon, um den Server neu zu starten, wenn wir Änderungen daran durchführen. Und wir verwenden npm-run-all, um mehrere Befehle parallel auszuführen.

      Installieren wir diese Pakete nun durch Eingabe der folgenden Befehle in Ihrem Terminalfenster

      • npm install nodemon@2.0.4 npm-run-all@4.1.5 --save-dev

      Oder mit yarn:

      • yarn add nodemon@2.0.4 npm-run-all@4.1.5 --dev

      Damit können Sie Folgendes ausführen, um die Client-seitige App zu erstellen, den Servercode zu bündeln und zu transpilieren, und den Server unter :3006 zu starten:

      Oder mit yarn:

      Unsere Server-Webpack-Konfiguration wir auf Änderungen achten und unser Server wird bei Änderungen neu starten. Für die Client-Anwendung müssen wir sie jedoch derzeit immer noch jedes Mal erstellen, wenn wir Änderungen vornehmen. Dafür gibt es hier ein offenes Problem.

      Öffnen Sie nun http://localhost:3006/ in Ihrem Webbrowser und Sie sehen Ihre App auf der Serverseite gerendered.

      Zuvor hat der Quellcode enthüllt:

      Output

      <div id="root"></div>

      Mit den Änderungen, die Sie vorgenommen haben, enthüllt der Quellcode nun aber:

      Output

      <div id="root"><h1 data-reactroot="">Hello <!-- -->Sammy<!-- -->!</h1></div>

      Das serverseitige Rendering hat die <App>-Komponente erfolgreich in HTML konvertiert.

      Zusammenfassung

      In diesem Tutorial haben Sie eine React-Anwendung initialisiert und das serverseitige Rendering aktiviert.

      In diesem Beitrag haben wir erst einen Bruchteil des Möglichen besprochen. Die Dinge werden etwas komplizierter, wenn Routing, Datenabruf oder Redux ebenfalls Teil einer serverseitig gerenderten App sein müssen.

      Ein Hauptvorteil der Verwendung von SSR besteht darin, dass eine App für ihren Inhalt gecrawlt werden kann, selbst für Crawler, die keinen JavaScript-Code ausführen. Dies kann bei der Suchmaschinenoptimierung (SEO) und der Bereitstellung von Metadaten für Social-Media-Kanäle hilfreich sein.

      SSR kann auch häufig zur Leistungssteigerung beitragen, da bei der ersten Anforderung eine vollständig geladene App vom Server gesendet wird. Bei nicht trivialen Apps kann Ihr Kilometerstand variieren, da für SSR ein Setup erforderlich ist, das etwas kompliziert werden kann und den Server stärker belastet. Ob Sie serverseitiges Rendering für Ihre React-App verwenden, hängt von Ihren spezifischen Anforderungen ab und davon, welche Kompromisse für Ihren Anwendungsfall am sinnvollsten sind.

      Wenn Sie mehr über React erfahren möchten, sehen Sie sich unsere Reihe Codieren in React.js an oder besuchen Sie unsere React-Themenseite für Übungen und Programmierprojekte.



      Source link