Création d'un serveur local accessible à partir d'une adresse publique
Je développe des sites Web depuis près de 10 ans et l’un de mes plus gros problèmes a toujours été le développement local et la synchronisation des sites locaux pour des tests en direct. Utiliser un environnement local est un atout, car il est rapide, mais il n’est pas visible de loin et transférer quelque part signifie que la base de données fonctionne, que vous renommez des tables, des valeurs, etc..
Dans cet article, je vais vous montrer un moyen facile de exécuter un serveur local que vous pouvez accès depuis votre téléphone et d'autres appareils mobiles en mode natif, et également diffusé sur Internet, ce qui signifie partager votre travail avec vos clients, sans quitter le bon vieux localhost.
Utilisation de vagabond pour créer un environnement local
Il y a peu de temps, j'ai écrit un article sur Hongkiat sur l'utilisation de Vagrant. Je ne ferai que passer en revue les bases ici. Pour plus d'informations, consultez l'article!
Pour commencer, vous devez récupérer et installer VirtualBox et Vagrant. Les deux sont libres et utilisés pour créer une machine virtuelle qui exécutera votre serveur.
Créez maintenant un dossier dans lequel stocker vos sites Web. Utilisons un répertoire nommé “Sites Internet” dans notre répertoire utilisateur principal. Ce serait / Utilisateurs / [nom d'utilisateur] / Sites Web sur OS X et C: / Utilisateurs / [nom d'utilisateur] / Sites Web sous Windows.
Créez un nouveau dossier nommé wordpress. C'est ici que je créerai la machine virtuelle. L'idée est que chaque dossier dans Sites Internet abrite une machine virtuelle distincte. Pendant que tu pouvez mettez autant de sites Web que vous le souhaitez sur une même machine virtuelle, j'aime bien les regrouper par plate-forme - par exemple: WordPress, Laravel, Custom
Aux fins de ce tutoriel, je vais créer un site Web WordPress.
À l'intérieur de WordPress dossier nous aurons besoin de créer deux fichiers, Vagrantfile et install.sh. Celles-ci seront utilisées pour configurer nos machines virtuelles. Jeffrey Way a créé deux grands fichiers de démarrage; vous pouvez récupérer ses fichiers Vagrantfile et install.sh.
Ensuite, en utilisant le terminal, naviguez vers le WordPress répertoire et type vagabond. Cela prendra un certain temps, car la boîte doit être téléchargée puis installée. Prenez une tasse de café et consultez ce post sur 50 astuces WordPress pendant que vous attendez..
Une fois le processus terminé, vous devriez pouvoir aller à 192.168.33.21 et voir une page correctement servie. Votre dossier de contenu doit être le dossier html du répertoire WordPress. Vous pouvez maintenant commencer à ajouter des fichiers, installer WordPress ou tout autre outil de votre choix..
N'oubliez pas de lire le guide complet Vagrant pour plus d'informations sur la création d'hôtes virtuels, les domaines de mappage tels que mytest.dev etc.
Ouverture de sites locaux sur le même réseau à l'aide de Gulp
Tout en construisant un site, vous devriez penser à la réactivité. Les petits écrans peuvent être émulés dans une certaine mesure en réduisant la fenêtre du navigateur, mais ce n'est tout simplement pas la même expérience, surtout si vous ajoutez des écrans de rétine dans le mix.
Idéalement, vous voudrez ouvrir votre site Web local sur vos appareils mobiles. Ce n'est pas trop difficile à faire, à condition que vos appareils soient sur le même réseau.
Pour ce faire, nous utiliserons Gulp et Browsersync. Gulp est un outil d’automatisation du développement, Browsersync est un excellent outil qui permet non seulement de créer un serveur local, mais également de synchroniser le défilement, les clics, les formulaires, etc., entre différents périphériques..
Installer Gulp
L'installation de Gulp est très facile. Rendez-vous sur la page Mise en route pour les instructions. Un pré-requis est NPM (Node Package Manager). Le moyen le plus simple d'obtenir ceci consiste à installer Node lui-même. Rendez-vous sur le site Web du nœud pour obtenir des instructions..
Une fois que vous avez utilisé le npm installer --global gulp Pour installer gulp globalement, vous devez l’ajouter à votre projet. La façon de faire est de courir npm installer --save-dev gulp dans le dossier racine de votre projet, puis ajoutez un gulpfile.js déposer là.
Pour le moment, ajoutons une seule ligne de code à l'intérieur de ce fichier, ce qui indique que nous utiliserons Gulp lui-même..
var gulp = require ('gulp'); Si vous êtes intéressé par toutes les choses intéressantes que Gulp peut faire comme concaténer des scripts, compiler Sass et LESS, optimiser les images, etc., lisez notre Guide de Gulp. Dans cet article, nous allons nous concentrer sur la création d'un serveur..
Utilisation de Browsersync
Browsersync a une extension Gulp que nous pouvons installer en deux étapes. Tout d'abord, utilisons npm pour le télécharger, puis nous l'ajouterons à notre fichier Gulp..
Émettre le npm installer navigateur-sync gulp --save-dev commande dans la racine du projet dans le terminal; cela téléchargera l'extension. Ensuite, ouvrez le fichier Gulpfile et ajoutez-y la ligne suivante:
var browserSync = require ('browser-sync'). create (); Cela permet à Gulp de savoir que nous utiliserons Browsersync. Ensuite, nous définirons une tâche qui contrôle le fonctionnement de Browsersync..
gulp.task ('browser-sync', function () browserSync.init (proxy: "192.168.33.21");); Une fois ajouté, vous pouvez taper gulp navigateur-sync dans le terminal pour démarrer un serveur. Vous devriez voir quelque chose comme l'image ci-dessous.
Il y a quatre URL distinctes ici, voici ce qu'elles veulent dire:
- Local: L'URL locale est l'endroit où vous pouvez atteindre le serveur sur la machine sur laquelle vous l'exécutez. Dans nos cas, vous pouvez utiliser
192.168.33.21ou vous pouvez utiliser celui fourni par Borwsersync. - Externe: Il s’agit de l’URL que vous pouvez utiliser sur n’importe quel appareil connecté au réseau pour accéder au site Web. Cela fonctionnera sur votre machine locale, votre téléphone, votre tablette, etc..
- UI: Cette URL pointe vers les options du serveur en cours d'exécution. Vous pouvez voir les connexions, configurer la régulation du réseau, afficher l'historique ou les options de synchronisation.
- Interface utilisateur externe: Identique à l'interface utilisateur, mais accessible depuis n'importe quel périphérique du réseau.
Pourquoi utiliser Browsersync?
Maintenant que nous en avons terminé avec cette phase, vous vous demandez peut-être pourquoi utiliser Browsersync. L’URL 192.168.33.21 est également accessible à partir de n’importe quel appareil. Dans ce cas, vous devrez installer WordPress à cette URL..
J'utilise généralement virtualhosts et j'ai des domaines comme wordpress.local ou myproject.dev. Ceux-ci sont résolus localement afin que vous ne puissiez pas visiter wordpress.local sur votre téléphone mobile et que vous obteniez le même résultat que sur votre ordinateur local..
Jusqu'ici tout va bien, nous avons maintenant un site de test auquel on peut accéder depuis n'importe quel appareil du réseau. Il est maintenant temps de passer à l'échelle mondiale et de diffuser notre travail sur Internet.
Utiliser ngrok pour partager notre hôte local
ngrok est un outil que vous pouvez utiliser pour créer des tunnels sécurisés pour votre hôte local. Si vous vous inscrivez (toujours gratuit), vous obtenez des tunnels protégés par mot de passe, TCP et plusieurs tunnels simultanés.
Installer ngrok
Allez sur la page de téléchargement de ngrok et récupérez la version dont vous avez besoin. Vous pouvez l'exécuter à partir du dossier dans lequel il se trouve ou le déplacer vers un emplacement vous permettant de l'exécuter n'importe où. Sur Mac / Linux, vous pouvez exécuter la commande suivante:
sudo mv ngrok / usr / local / bin / ngrok
Si vous obtenez une erreur indiquant que cet emplacement n'existe pas, créez simplement les dossiers manquants..
Utiliser ngrok
Heureusement, cette partie est extrêmement simple. Une fois que vous exécutez votre serveur via Gulp, examinez le port utilisé. Dans l'exemple ci-dessus, le serveur local s'exécute à http: // localhost: 3000 ce qui signifie qu'il utilise le port 3000. Dans un nouvel onglet de terminal, exécutez la commande suivante:
ngrok http 3000
Cela créera un tunnel accessible vers votre hôte local, le résultat devrait ressembler à ceci:
L'URL que vous voyez à côté de “Expéditeur” est ce que vous pouvez utiliser pour accéder à votre site web depuis n'importe où.
Conclusion
À la fin de la journée, nous pouvons maintenant faire trois choses:
- Voir et travailler sur notre projet localement
- Consultez notre site Web via n'importe quel appareil du réseau.
- Laissez les autres voir notre travail n'importe où avec un simple lien
Cela vous permettra de vous concentrer sur le développement plutôt que sur la course pour maintenir la synchronisation des serveurs locaux et des serveurs de test, la migration des bases de données et d'autres tâches inquiétantes..
Si vous utilisez une méthode différente pour travailler localement et partager le résultat, laissez-nous savoir.!
