Створення локального сервера, доступного з публічної адреси

Я розробляв сайти протягом більшої частини 10 років, і одним з моїх найбільших проблем завжди був локальний розвиток і синхронізація місцевих сайтів для тестів. Використання локального середовища є прекрасним, оскільки воно є швидким, але його не можна переглядати здалеку і переносити кудись означає роботу бази даних, перейменування таблиць, значень тощо.

У цій статті я покажу вам простий шлях запустити локальний сервер які ви можете доступ з телефону та інших мобільних пристроїв по-перше, а також мовлення через Інтернет, що означає обмін вашою роботою з клієнтами, не залишаючи гарного місцевого хосту.

Використання Vagrant для створення місцевого середовища

Невдовзі я написав тут статтю на Hongkiat про використання Vagrant, тому я перейду лише основи тут. Для отримання додаткової інформації зверніться до статті!

Щоб розпочати роботу, потрібно занурити та встановити VirtualBox та Vagrant. Обидва є безкоштовними і використовуються для створення віртуальної машини, яка буде запускати ваш сервер.

Тепер створіть папку для зберігання веб-сайтів. Використовуйте каталог з назвою “Веб-сайти” в нашому головному каталозі користувачів. Це було б / Користувачі / [ім'я користувача] / Веб-сайти на OS X і C: / Users / [ім'я користувача] / Веб-сайти на Windows.

Створіть назву нової папки wordpress. Саме тут я буду створювати віртуальну машину. Ідея полягає в тому, що кожна папка всередині Веб-сайти містить окрему віртуальну машину. Поки ви може покласти стільки веб-сайтів на одну віртуальну машину, скільки хочеш, мені подобається групувати їх по платформах - наприклад, WordPress, Laravel, Custom

Для цілей цього підручника я буду створювати веб-сайт WordPress.

Всередині WordPress папці нам потрібно створити два файли, Vagrantfile і install.sh. Вони будуть використані для налаштування віртуальних машин. Jeffrey Way створив два великі файли для запуску; Ви можете захопити його файли Vagrantfile і install.sh.

Далі, використовуючи термінал, перейдіть до WordPress каталог і тип бродяча вгору. Це займе деякий час, оскільки коробка повинна бути завантажена, а потім встановлена. Візьміть чашку кави і перевірте цей пост на 50 WordPress підказок, поки ви чекаєте.

Після завершення процесу ви маєте можливість перейти 192.168.33.21 і перегляньте правильно відправлену сторінку. Папка вмісту повинна бути папкою html у каталозі WordPress. Тепер ви можете почати додавати файли, встановлювати WordPress або що-небудь ще.

Не забудьте прочитати повний посібник Vagrant для отримання додаткової інформації про створення віртуальних хостів, подібних доменів mytest.dev і так далі.

Відкриття локальних сайтів на одній і тій же мережі за допомогою Gulp

Під час створення сайту ви повинні думати про чуйність. Невеликі екрани можна емулювати до певної міри шляхом звуження вікна браузера, але це просто не той самий досвід, особливо якщо ви кидаєте екрани сітківки в суміші.

В ідеалі потрібно відкрити місцевий веб-сайт на мобільних пристроях. Це зробити не надто складно, якщо ваші пристрої знаходяться в одній мережі.

Для цього ми скористаємося Gulp та Browsersync. Gulp - це інструмент для автоматизації розробки, Browsersync - чудовий інструмент, який може не тільки створити локальний сервер, але й синхронізувати прокручування, кліки, форми та багато іншого між пристроями.

Встановлення Gulp

Установка Gulp дуже проста. Зверніться до сторінки Початок роботи для отримання інструкцій. Одним з передумов є NPM (Node Package Manager). Найпростіший спосіб отримати це - встановити сам Node. Надайте інструкції на веб-сайті Node.

Після використання npm install --global gulp команду встановити глотка глобально, потрібно додати його до вашого проекту. Для цього потрібно запустити npm install --save-dev gulp у кореневій папці вашого проекту, потім додайте a gulpfile.js файл там.

На даний момент ми додамо один рядок коду всередині цього файлу, який вказує, що ми будемо використовувати сам Gulp.

var gulp = require ('gulp');

Якщо ви зацікавлені у всіх прохолодних речах, Gulp може робити як конкатенація сценаріїв, компіляція Sass і LESS, оптимізація зображень і так далі, читайте наш путівник по ковтанку. У цій статті ми зупинимося на створенні сервера.

Використання браузера

Browsersync має розширення Gulp, яке можна встановити у два етапи. По-перше, давайте скористаємося npm для завантаження, потім додамо його до нашого Gulpfile.

Випустіть npm install gulp --save-dev команда в корені проекту в терміналі; це дозволить завантажити розширення. Потім відкрийте файл Gulp і додайте до нього наступний рядок:

var browserSync = require ('browser-sync'). create ();

Це дозволяє Gulp знати, що ми будемо використовувати Browsersync. Далі ми визначимо завдання, яке контролює роботу Browsersync.

gulp.task ('browser-sync', функція () 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-адресу.

Зазвичай я використовую virtualhosts і маю домени, такі як wordpress.local або myproject.dev. Вони вирішуються локально, тому ви не можете відвідати wordpress.local на своєму мобільному телефоні та побачити той самий результат, що і на локальному комп'ютері.

Поки що добре, тепер у нас є тестовий сайт, до якого можна отримати доступ з будь-якого пристрою в мережі. Тепер прийшов час виходити глобально і транслювати нашу роботу через Інтернет.

Використання ngrok для спільного використання нашого Localhost

ngrok - інструмент, який можна використовувати для створення безпечних тунелів для вашого локального хоста. Якщо ви зареєструвалися (все ще безкоштовно), ви отримаєте захищені паролем тунелі, TCP і кілька одночасних тунелів.

Встановлення ngrok

Перейдіть на сторінку завантаження ngrok і захопіть потрібну версію. Ви можете запустити його з папки, в якій він знаходиться, або перемістити її до місця, де ви можете запускати його з будь-якого місця. На Mac / Linux можна запустити таку команду:

sudo mv ngrok / usr / local / bin / ngrok

Якщо ви отримали помилку, що це місце не існує, просто створіть відсутні папки.

Використання ngrok

На щастя, ця частина надзвичайно проста. Після запуску сервера через Gulp, погляньте на порт, який він використовує. У наведеному вище прикладі локальний сервер працює http: // localhost: 3000 це означає, що він використовує порт 3000. У новій вкладці терміналу виконайте таку команду:

ngrok http 3000

Це дозволить створити доступний тунель до вашого локального хоста, результат має бути приблизно таким:

URL, який ви бачите поруч “Пересилання” це те, що можна використовувати для доступу до свого веб-сайту з будь-якого місця.

Висновок

Наприкінці дня ми можемо зробити три речі:

• Переглянути та працювати над нашим проектом локально
• Перегляньте наш веб-сайт через будь-який пристрій у мережі
• Дозвольте іншим переглядати нашу роботу в будь-якому місці за допомогою простого посилання

Це дозволить вам зосередитися на розробках, а не на гонках, щоб підтримувати синхронізацію локальних і тестових серверів, міграцію баз даних та інші тривожні завдання.

Якщо у вас є інший спосіб роботи на місцевому рівні та обмін результатами, повідомте нам про це!