Как запустить веб приложение локально

Обновлено: 03.01.2025

WAMP объединяет программные продукты, предназначенные для разработки и тестирования локальных сайтов и приложений, то есть на компьютере с ОС Windows и без выхода в Интернет. При этом настройка и наполнение веб-ресурса осуществляется без аренды платных серверов. В данную платформу также входят открытое ПО Apache, СУБД MySQL, интерпретатор PHP для работы с языками программирования, автоматический установщик расширений.

Зачем нужен WAMP-сервер?

Программист обычно разрабатывает сайт на своем компьютере, а затем переносит его на хостинг. Но чтобы PHP-скрипты выполнялись правильно, на ПК должны быть те же программы, что и на хостинге. Устанавливать и настраивать каждую по отдельности долго и неудобно, поэтому необходима WAMP-платформа, которая уже включает требуемое для веб-разработки ПО.

Во время проверки сайта в браузере запускается специальный адрес localhost, и идет обращение к локальному серверу. Запрос обрабатывается, а результат передается обратно в браузер. Благодаря этому сайт выглядит так, будто загружен на хостинг.

WAMP позволяет в спокойном режиме сделать и протестировать сайт и неспешно выбрать хостинг-провайдера.

Обзор локальных серверов

Ниже представлен ТОП наиболее популярных в 2020 году платформ. Список ранжирован не по качеству, а в произвольном порядке.

Open Server

Open Server является полноценным профессиональным инструментом, самым востребованным среди разработчиков. Имеет простой и понятный интерфейс и навигацию, удобную управляющую программу. Отличается большим выбором подключаемых компонентов.

В полную версию включен необходимый набор программ для моментального старта: Opera, Sublime, WinSCP, Simplewall, Jcpicker, Bright Master. Сервер регулярно обновляется, что говорит о стабильности его работы.

Установка стационарная и портативная.

Многофункциональность.
Интерфейс мультиязычный.
Есть подробная инструкция по работе с сервером.
Доступ к доменам осуществляется в один клик.
Возможность работы через командную строку.
Быстрота запуска и остановки службы.
Возможность просмотра логов в реальном времени.

Недостаток один – не предусмотрено автообновление сервера.

Denwer

Это – джентльменский набор веб-разработчика, одна из самых первых на IT-рынке программ. Содержит базовые компоненты: Apache, MySQL, PHP, phpMyAdmin, но как таковая управляющая программа отсутствует. Выполняет основные простые задачи.

На официальном сайте можно скачать дополнительные модули и расширения (языки программирования Python и Parser, дистрибутив ActivePerl, СУБД PostgreSQL и FireBird, эмулятор емейл-сервера с протоколом SMTP).

Подходит для начинающих разработчиков и работает на слабых компьютерах.

Установка стационарная и портативная.

Простота функций и навигации.
Легковесность сервера – не нагружает систему.
Возможность работы через командную строку.
При запуске не требует инсталляции внешних библиотек.
Большая база знаний на форуме и самом сайте.
Не придется деинсталлировать через системный инструмент или стороннюю программу – достаточно просто удалить папку.

Не обновляется с 2012 года – в функциональном плане сильно отстает от конкурентов, имеет устаревшую версию PHP-файлов.
Нет удобного интерфейса.
Нет различных компонентов администрирования.

Laragon

Laragon – молодой, но перспективный проект. Является простым и удобным, но при этом многофункциональным сервером, включает базовый набор компонентов (Apache/Nginx, MySQL, PHP, Memcached, Redis). Легко запускается, конфигурируется и работает. Главная отличительная особенность – производительность и стабильность.

Есть возможность быстро переключаться между имеющимися версиями PHP, а также добавлять другие. При создании нового проекта по умолчанию создается локальный домен. Виртуальный хостинг устанавливается автоматически за пару минут.

Подходит для начинающих разработчиков.

Установка стационарная и портативная. Представлен в версии Full и Lite (не включает Node.js 11, npm, yarn, git).

Русскоязычный интерфейс.
Понятный интерфейс и управление.
Работа через командную строку.
Обширная база знаний представлена на форуме.
Быстрый запуск и работа.
Достаточный набор функций.
Наличие фреймворка Laravel.

Нет phpMyAdmin из коробки.
Сайт и форум на английском языке.

XAMPP

Универсальный сервер, который можно использовать на Windows (но не на 2003 и XP), Mac (10.6 и выше) и Linux (многие дистрибутивы). Кроме стандартных компонентов Apache и PHP включает также СУБД MariaDB, Perl, OpenSSL, расширения и темы. Среда XAMPP очень удобна в использовании: внутри папки с рабочим окружением htdocs хранятся все локальные сайты.

При правильной настройке работает как полноценный интернет-сервер. Защита компонентов настроена, поэтому может функционировать в общественной сети.

Многофункциональность.
Простой запуск, не требующий настройки.
Быстрая остановка модулей.
Большое активное комьюнити.
Постоянные обновления.
Возможность запуска разных процессов по отдельности.

Англоязычный интерфейс.
Малополезная панель управления (есть только старт и стоп).
Ручная настройка рабочего окружения.

WampServer

Классическая платформа WAMP, включающая последние версии Apache, MySQL и PHP. Совместима со всеми версиями Windows, кроме XP, Server 2003, SP3. Работает только на файловой системе NTFS. Отличается производительностью и стабильностью.

Поддерживает большое количество языков и разные версии модулей. Конфигурация сервера легко настраивается через интерфейс.

Русскоязычный интерфейс.
Инсталляция в несколько кликов.
Управление из трея Windows.
Простая структура файлов.
Понятное меню и навигация.
Активное сообщество.

Требует инсталляцию библиотек Microsoft C/C++.
Во время инсталляции программы необходимо выйти из Скайпа.
Неудобная управляющая программа.

UwAmp

UwAmp – удобный инструмент для разработки. Помимо базовых компонентов включает СУБД SQLite и панель phpMyAdmin, поддерживает несколько версий PHP и UNICODE, контролирует использование процессора. Интерфейс оснащен удобным меню с различными конфигурациями и командами.

Установка стационарная и портативная.

Инсталляция в несколько кликов.
Простота использования (быстрый запуск и завершение работы).
Удобное меню и навигация.

Недостаток – англоязычный интерфейс.

AMPPS

Представляет собой не просто сборку, а мощную платформу для создания веб-ресурсов с полноценной библиотекой приложений. Поддерживает распространенные CMS, блоги, форумы, доски объявлений, фотогалереи и т.д. Включает Apache, СУБД MySQL и MongoDB, PHP, Perl, Python. AMPPS – отличный инструмент изучения CMS, форумов и других скриптов для создания сайтов.

Подходит для начинающих разработчиков.

Минимальное участие в инсталляции.
Простота использования без знаний программирования.
Частые обновления программы и компонентов.
Удобная панель задач и простая навигация.
Наличие Softaculous – автоматического установщика ПО.
Возможность подключения FTP-сервера.

Англоязычный интерфейс.
Требует установку Microsoft Visual C++.

Winginx

Интересная сборка с управляющей программой и обширным базовым комплектом, куда входят Nginx, MongoDB и Node.js. Дополнительное ПО можно загрузить из магазина, включая популярные CMS и фреймворки. Есть возможность выбирать между СУБД MySQL, MongoDB и Redis. Работает с разными версиями PHP. Благодаря встроенному Центру обновления пользователь сможет проверять актуальность установленных компонентов.

Подходит для начинающих разработчиков.

Установка стационарная и портативная.

Интерфейс на русском языке.
Простая инсталляция и быстрый запуск.
Удобное трей-меню и раздел настроек.
Функция автоматической установки скриптов.
Управление задачами проекта.
Контроль рабочего времени
Просмотр локальной почты сервера.
Бесплатный сервис для конвертации htaccess-файлов (на сайте).
Автообновления.

Недостаток – сложность работы с логами.

Vertrigo

Функциональный сервер с обычным WAMP-комплектом, также включает SQLite, SQLiteManager и PhpMyAdmin. Благодаря наличию опции Zend Optimizer увеличивается производительность запущенных процессов на 40%. Предоставляет хорошие возможности по настройке PHP и Apache.

В этой статье описано, как настроить статическое веб-приложение и API для проверки подлинности пользователей в клиентском приложении и API Azure Functions с помощью пакета SDK для MSAL.js.

Вот что нужно будет сделать согласно инструкциям в этой статье:

Клонировать весь пример с клиентом и API.
Настроить конфигурацию MSAL, указав значения, полученные при регистрации приложения платформы Microsoft Identity.
Локально запустить приложение.

Приложение React передает в API Функций маркер доступа для пользователя, прошедшего проверку подлинности, чтобы этот API мог выполнять действия от имени этого пользователя. Этот API вызывает Microsoft Graph, как пример вызова службы Azure.

Клонируйте пример проекта из репозитория GitHub

Код этого примера является частью репозитория с несколькими примерами. Хотя при клонировании репозиторий копируется полностью, вы будете работать с одним примером в каталоге \4-Deployment\2-deploy-static\App .

Создайте вилку репозитория в своей учетной записи, выбрав Fork (Создать вилку).

В терминале Bash на локальном компьютере клонируйте вилку. Замените YOUR-ACCOUNT именем своей учетной записи.

В терминале Bash перейдите к примеру для этой статьи в каталоге \4-Deployment\2-deploy-static\App и установите зависимости.

Откройте проект в VS Code.

Настройте параметры и секреты

Для клиента React и Azure Functions требуются параметры конфигурации, чтобы предоставить пакету SDK для MSAL доступ к вашему приложению удостоверений.

В предыдущей статье этой серии описано, как собрать следующие данные:

Идентификатор приложения (клиента)
Идентификатор каталога (клиента)
Секрет клиента
Универсальный код ресурса идентификатора приложения

Создайте файл параметров среды React ./.env для локальной разработки и добавьте в него следующие поля:

Задайте следующие значения:

URI перенаправления и URI области функции используются в клиенте React, а не в API функции.

Откройте файл API Функций с именем ./api/local.settings.json и задайте в нем следующие значения:

Свойство	Значение	Описание
CLIENT_ID	Идентификатор приложения (клиента)	Введите значение в виде строки в кавычках.
CLIENT_SECRET	Секрет клиента	Введите значение в виде строки в кавычках.
TENANT_INFO	Идентификатор каталога (клиента)	Введите значение в виде строки в кавычках.

Секрет клиента используется в функции Azure, а не в клиенте React.

Замените файл ./src/authConfig.js кодом ниже, чтобы использовать файл ./.env .

Важно, заменить все параметры среды, используемые при сборке статического веб-сайта, которые прописаны в коде, переменными среды. Так действие GitHub сможет добавить эти параметры в сборку в рамках процесса развертывания в Azure.

Если оставить секреты в исходном коде, вы:

допустите утечку секретов в репозиторий кода;
инициируете новый запрос на вытягивание, чтобы изменить их в развернутом сайте.

Настройка локального прокси-сервера

Но для разработки в локальной среде нужно настроить прокси-сервер. Откройте файл ./src/package.json и добавьте в корень следующий объект свойства.

При развертывании в качестве статического веб-приложения Azure все вызовы к /api/hello от клиента React передаются в приложение Функций Azure. Настраивать прокси-сервер при этом не нужно.

Локальный запуск приложения

В интерактивном терминале Bash в VSCode скомпилируйте приложение клиента React.

В интерактивном терминале Bash в VSCode скомпилируйте API Функций.

При первом входе в это приложение вам как пользователю нужно предоставить приложению платформы Microsoft Identity (которое вы создали на портале Azure) разрешение на доступ к данным. Это то же разрешение API, которое создается в приложении платформы Microsoft Identity:

Microsoft Graph — User.Read;
Ваш API — access_as_user.

После входа отобразится домашняя страница.

Выберите пункт меню Profile (Профиль), чтобы открыть API Graph из клиента React.

Выберите пункт меню Function API (API Функций), чтобы открыть API Graph из API Функций.

Завершив работу с приложением, закройте оба интерактивных терминала VS Code, чтобы остановить работу приложения.

Просмотр входов пользователей на портале Azure

Вам как администратору приложения для проверки подлинности может понадобиться просмотреть журналы входов и ошибок.

Локальные серверы позволяют запускать свой сайт без использования хостинга, прямо на домашнем компьютере. Это может пригодиться для детального тестирования, а также в процессе разработки. Ничего не помешает накатить туда CMS и взаимодействовать с базами данных. Вся сложность заключается в выборе самой программы, которая и выполняет роль локального сервера. Подходящих вариантов существует огромное количество, и каждый из них обладает своими особенностями, так что сказать, какой локальный сервер лучше других, достаточно сложно.

Давайте детально разберемся в этом вопросе, рассмотрев несколько самых популярных представителей. Итак, топ лучших локальных серверов.

OpenServer

Начать стоит с программы под названием OpenServer. При ознакомлении сразу же бросается в глаза дружелюбный продуманный интерфейс, который и является одним из главных плюсов этого решения. Среди других преимуществ можно отметить простую установку, удобное управление с добавленными сайтами и отсутствие необходимости долгой настройки, чтобы все работало как надо. OpenServer отлично помещается на обычную флешку и не состоит из множества компонентов, поэтому прекрасно подходит для портативной работы.

Если минусы в OpenServer и есть, то они связаны только с небольшими проблемами во время функционирования сайтов, но решаются за несколько секунд банальным перезапуском программы. В остальном же это один из лучших вариантов для тех, кто давно хотел развернуть локальный сервер на своем компьютере или всегда иметь его под рукой, записав на флешку.

Распространяется OpenServer бесплатно, а разработчики предлагают лишь добровольно поддержать проект. Перейти к скачиванию этой программы для Windows можно на официальном сайте.

Denwer

Denwer – один из самых популярных в свое время локальных серверов, считавшийся монополистом на отечественном рынке, поскольку ни одно из существующих на тот момент решений не смогло составить ему конкуренцию. Этот веб-сервер прост в установке и практически не занимает места на компьютере. С управлением программой разберется даже начинающий пользователь.

Однако проект долгое время не обновлялся, что сказалось на его развитии в дальнейшем. Еще одним недостатком, который может стать решающим для некоторых пользователей, будет отсутствие графического интерфейса, из-за чего приходится все действия выполнять через консоль. Сейчас Denwer можно скачать с официального сайта .

XAMPP полностью бесплатный и простой в установке дистрибутив Apache, содержащий MariaDB, PHP и Perl. XAMPP создан с открытым исходным кодом, чтобы быть невероятно простым в установке и в использовании. Существует версия под Windows, Linux, OS X. Бесплатно.

OpenServer

Open Server — это портативный локальный WAMP/WNMP сервер, имеющий многофункциональную управляющую программу и большой выбор подключаемых компонентов. Представленный пакет программ не является очередной любительской сборкой собранной «на коленке», это первый полноценный профессиональный инструмент, созданный специально для веб-разработчиков с учётом их рекомендаций и пожеланий. Существует версия под Windows. Бесплатно.

Denwer

WampServer

WampServer это платформа для веб-разработки под Windows для динамических веб-приложений с помощью сервера Apache2, интерпретатора скриптов PHP и базы данных MySQL. В него также входит веб-приложение PHPMyAdmin для наиболее простой обработки баз данных.

AMPPS

AMPPS — это набор решений, включающий в себя Apache, MySQL, MongoDB, PHP, Perl & Python для Windows, Linux и Mac. AMPPS поставляется с более 300 готовыми PHP веб-приложениями и с различными версиями PHP. AMPPS был создан компанией Softaculous Ltd, которая была основана в 2009 году и разработала Softaculous Auto installer. AMPPS доступен на платформах WIndows и Macintosh. AMPPS используется для разработки на PHP с использованием MySQL.

Devilbox

В Devilbox все уже настроено, поэтому сразу после установки можно перейти к полноценной разработке и тестированию. Однако недостатком можно считать принцип установки, ведь он немного сложнее, нежели у конкурентов.

Winginx

Laragon

BitNami Application Stacks

Проект BitNami позволяет легко и быстро создавать сайты людям, которые не обладают особыми знаниями языков программирования и не представляют как настраивать сервер.

WordPress 2.3.2 (блог);
Joomla 1.0.13-4 (CMS);
Drupal 5.6; (CMS)
MediaWiki 1.11.0-7(wiki);
phpBB 2.0.22-5 (форум);
и многое другое.

Основные преимущества BitNami перед аналогичными проектами:

Простота установки. Всего несколько щелчков мыши и CMS установлена и настроена;
Мультиплатформенность. Работает в Linux, Windows и Mac OS X;
Интеграция. После установки все компоненты настроены и корректно взаимодействуют;
Отсутствие зависимостей. Для работы BitNami не требуется установки дополнительных программ;
Open source. Пакет распространяется бесплатно, доступны исходные коды.

Читайте также: