Создание локального сервера, доступного с публичного адреса
Я разрабатывал веб-сайты в течение большей части 10 лет, и одной из моих самых больших проблем всегда была локальная разработка и синхронизация локальных сайтов с живыми тестами. Использование локальной среды - это здорово, потому что это быстро, но это не видно издалека, а передача куда-либо означает работу базы данных, переименование таблиц, значений и т. Д..
В этой статье я покажу вам простой способ запустить локальный сервер что вы можете доступ с вашего телефона и других мобильных устройств изначально, а также транслировать через Интернет, что означает разделение вашей работы с клиентами, не оставляя доброго старого.
Использование Vagrant для создания локальной среды
Некоторое время назад я написал здесь статью на Hongkiat об использовании Vagrant, поэтому здесь я лишь рассмотрю основы. Для получения дополнительной информации, посмотрите на статью!
Для начала вам нужно скачать и установить VirtualBox и Vagrant. Оба бесплатны и используются для создания виртуальной машины, которая будет работать на вашем сервере.
Теперь создайте папку для хранения ваших сайтов. Давайте использовать каталог с именем “Веб-сайты” в нашем основном каталоге пользователей. Это было бы / Users / [имя пользователя] / Сайты на OS X и C: / Users / [имя пользователя] / Сайты в Windows.
Создать новую папку с именем WordPress. Здесь я создам виртуальную машину. Идея состоит в том, что каждая папка внутри Веб-сайты Дома отдельная виртуальная машина. Пока ты Можно разместить столько веб-сайтов на одной виртуальной машине, сколько вы хотите, я бы хотел сгруппировать их по платформам - например: WordPress, Laravel, Custom
Для целей этого урока я буду создавать веб-сайт WordPress..
Внутри WordPress папка нам нужно создать два файла, Vagrantfile а также install.sh. Они будут использованы для настройки наших виртуальных машин. Джеффри Уэй создал два великолепных стартовых файла; вы можете взять его Vagrantfile и установить файлы .sh.
Затем, используя терминал, перейдите к WordPress каталог и тип бродячий до. Это займет некоторое время, так как коробку нужно скачать, а затем установить. Возьмите чашку кофе и прочитайте этот пост на 50 советах WordPress, пока вы ждете.
После завершения процесса вы сможете перейти к 192.168.33.21 и увидеть правильно обслуженную страницу. Ваша папка контента должна быть папкой html внутри директории WordPress. Теперь вы можете начать добавлять файлы, устанавливать WordPress или все, что вам нужно.
Не забудьте прочитать полное руководство Vagrant для получения дополнительной информации о создании виртуальных хостов и отображении доменов, таких как mytest.dev и так далее.
Открытие локальных сайтов в одной сети с помощью Gulp
При создании сайта вы должны думать об отзывчивости. Маленькие экраны можно эмулировать до некоторой степени, сужая окно браузера, но это не совсем то же самое, особенно если вы добавляете экраны сетчатки в смесь.
В идеале вы захотите открыть свой локальный веб-сайт на своих мобильных устройствах. Это не так уж сложно сделать, если ваши устройства находятся в одной сети.
Чтобы сделать это, мы будем использовать Gulp и Browsersync. Gulp - это инструмент для автоматизации разработки. Browsersync - это отличный инструмент, который может не только создавать локальный сервер, но и синхронизировать прокрутку, клики, формы и многое другое на разных устройствах..
Установка Gulp
Установка Gulp очень проста. Перейдите на страницу «Начало работы» для получения инструкций. Одним из предварительных условий является NPM (менеджер пакетов узлов). Самый простой способ получить это - установить сам нод. Пройдите на сайт Node для получения инструкций..
Как только вы использовали npm install --global gulp Команда для установки Gulp глобально, вам нужно добавить его в свой проект. Способ сделать это - запустить npm install --save-dev gulp в корневой папке вашего проекта, затем добавьте gulpfile.js файл там.
На данный момент давайте добавим одну строчку кода внутри этого файла, которая указывает, что мы будем использовать сам Gulp.
var gulp = require ('gulp'); Если вам интересны все интересные вещи, которые может делать Gulp, такие как объединение сценариев, компиляция Sass и LESS, оптимизация изображений и так далее, прочитайте наше Руководство по Gulp. В этой статье мы сосредоточимся на создании сервера.
Использование Browsersync
Browsersync имеет расширение Gulp, которое мы можем установить в два этапа. Сначала давайте загрузим его с помощью npm, затем добавим в наш Gulpfile..
Выпустить npm установить браузер-синхронизировать gulp --save-dev команда в корне проекта в терминале; это загрузит расширение. Затем откройте Gulpfile и добавьте в него следующую строку:
var browserSync = require ('browser-sync'). create (); Это позволяет Gulp знать, что мы будем использовать Browsersync. Далее мы определим задачу, которая управляет работой Browsersync..
gulp.task ('browser-sync', function () browserSync.init (proxy: "192.168.33.21");); После добавления вы можете ввести gulp browser-sync в терминал, чтобы запустить сервер. Вы должны увидеть что-то вроде изображения ниже.
Там есть четыре отдельных URL, вот что они означают:
- Местный: Локальный URL-адрес, по которому вы можете связаться с сервером на компьютере, на котором он запущен. В наших случаях вы можете использовать
192.168.33.21или вы можете использовать предоставленный Borwsersync. - внешний: Это URL, который вы можете использовать на любом устройстве, подключенном к сети, чтобы попасть на сайт. Он будет работать на вашем локальном компьютере, телефоне, планшете и т. Д..
- UI: Этот URL-адрес указывает на параметры для текущего запущенного сервера. Вы можете увидеть соединения, настроить регулирование сети, просмотреть историю или параметры синхронизации.
- Внешний интерфейс: Это то же самое, что и пользовательский интерфейс, но доступно с любого устройства в сети.
Зачем использовать Browsersync?
Теперь, когда мы закончили с этим этапом, вы можете подумать: зачем вообще использовать Browsersync? URL 192.168.33.21 также можно получить с любого устройства. Хотя это так, вам нужно будет установить WordPress на этот URL.
Я обычно использую виртуальных хостов и имею домены, такие как wordpress.local или myproject.dev. Они разрешаются локально, поэтому вы не можете зайти на wordpress.local на свой мобильный телефон и увидеть тот же результат, что и на локальном компьютере..
Пока все хорошо, теперь у нас есть тестовый сайт, доступ к которому можно получить с любого устройства в сети. Теперь пришло время выйти на мировой уровень и транслировать нашу работу через Интернет..
Использование ngrok для обмена нашим локальным хостом
ngrok - это инструмент, который вы можете использовать для создания безопасных туннелей к вашему локальному хосту. Если вы зарегистрируетесь (все еще бесплатно), вы получите защищенные паролем туннели, TCP и несколько одновременных туннелей..
Установка нгрок
Перейдите на страницу загрузки ngrok и получите нужную версию. Вы можете запустить его из папки, в которой он находится, или переместить его в место, где вы можете запустить его из любого места. В Mac / Linux вы можете запустить следующую команду:
sudo mv ngrok / usr / local / bin / ngrok
Если вы получаете сообщение об ошибке, что это местоположение не существует, просто создайте отсутствующие папки.
Использование ngrok
К счастью, эта часть чрезвычайно проста. Как только вы запустите свой сервер через Gulp, посмотрите на порт, который он использует. В приведенном выше примере локальный сервер работает на HTTP: // локальный: 3000 это означает, что он использует порт 3000. На новой вкладке терминала выполните следующую команду:
нгрок http 3000
Это создаст доступный туннель для вашего локального хоста, результат должен быть примерно таким:
URL, который вы видите рядом с “экспедиция” это то, что вы можете использовать для доступа к своему сайту из любого места.
Заключение
В конце дня мы можем сделать три вещи:
- Посмотреть и поработать над нашим проектом локально
- Просматривать наш сайт через любое устройство в сети
- Позвольте другим просматривать нашу работу где угодно с помощью простой ссылки
Это позволит вам сосредоточиться на разработке, а не на гонках, чтобы синхронизировать локальные и тестовые серверы, переносить базы данных и выполнять другие сложные задачи..
Если у вас есть другой метод работы локально и обмена результатами, сообщите нам!
