Как запустить html файл с локального сервера

Обновлено: 06.07.2024

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

Давайте придерживаться того же приложения, добавив фреймворк Express с выдачей HTML-файла. Нам понадобятся те же файлы (package.json, server.js) и к ним мы добавим новый файл index.html.

Express: Node-фреймворк

Одним из самых больших преимуществ Node является то, что он содержит поддержку множества пакетов. Сообщество отправляет много пакетов в npm и на момент написания в нём хранится 129257 пакетов, которые загрузили свыше 17694831 раз за последний день. Это большое достижение!

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

Вы, возможно, слышали о Grunt, Gulp или даже препроцессорах CSS вроде Less — всё это может быть пакетом.

Express — лёгкая платформа для создания веб-приложений с использованием Node.js. Express помогает организовать веб-приложение на стороне сервера. Сайт ExpressJS описывает его как «минимальной и гибкий Node-фреймворк для веб-приложений».

Express скрывает много внутренней работы Node, которая позволяет вам погрузиться в код приложения, получать всякие штуки и работать намного быстрее. Он прост для изучения и ещё даёт вам немного гибкости с его структурой.

Существует причина, почему в настоящее время это самый популярный фреймворк для Node. Вот несколько больших имён использующих Express:

Для просмотра полного списка зайдите на эту страницу.

Express поставляется с несколькими замечательными возможностями, которые добавят лёгкости в вашу разработку:

• маршрутизация;
• обработка запросов;
• настройки приложения;
• связующее программное обеспечение.

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

Установка Express

Пакеты для конкретного приложения Node определяются в package.json. Для получения установленных пакетов вы можете использовать один из двух методов:

• Метод 1: Написать пакет в package.json.
• Метод 2: В командной строке использовать npm install.

Мы собираемся использовать второй метод. Перейдите в командную строку и наберите:

Модификатор --save сообщает npm, что он должен записать этот пакет в ваш файл package.json. Если вы выполните эту команду и посмотрите файл package.json, то заметите, что пакет появился в разделе dependencies. Вы также заметите, что была создана новая папка с именем node_modules. В ней Node хранит пакеты для конкретного проекта.

Меняться проектами между разработчиками и сотрудниками очень легко. Просто отправьте другим пользователям ваш проект и они запустят npm install чтобы установить всё из раздела dependencies.

Начнём с лёгкой части на нашем пути — с HTML-файла. В проекте создайте новый файл index.html и поместите внутрь следующее:

Мы будем ссылаться на CSS из фреймворка Bootstrap через Bootstrap CDN, это поможет нам быстро сделать стилизацию для этой демонстрации.

При создании маршрутов, мы всегда будем иметь доступ к req (запрос) и res (ответ). Запрос содержит информацию из браузера. Ответ — это то, что мы отправим обратно пользователю. Мы используем sendfile() , но гораздо больше вещей можно сделать, отправляя данные обратно в формате JSON с помощью res.json() .

Сервер запускается через app.listen() и туда же передаётся желаемый порт 8080.

Чтобы убедиться что всё работает, перейдите в командную строку, чтобы обработать этот файл и запустить сервер.

Отлично! Мы уже много сделали с Node:

Давайте сделаем следующий шаг и создадим приложение, которое на самом деле показывает соответствующие данные.

Для того, чтобы написать код, сгодится вообще любой текстовый редактор. Подойдёт даже «Блокнот» на вашем компьютере (но в нём очень неудобно всё делать). Мы скачаем и установим хороший редактор, заточенный под веб-разработку. Покажем всё на примере Visual Studio Code.

Установка пройдёт как обычно — нужно запустить файл VSCodeUserSetup, много раз нажать «Далее» и поставить пару галочек.

Шаг 2. Запускаем редактор и осматриваемся

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

Хорошо бы, чтобы во время работы все нужные файлы лежали в одной папке (пока проект маленький, так можно делать). Для этого добавим рабочую папку, чтобы VS Code показывал нам только её содержимое.

По шагам на скриншоте:

1. Add workspace folder — открывает меню выбора папки.
2. Создадим новую папку personal_page в любом удобном месте и зайдём в неё.
3. Нажмём Add.

После этого слева появится панель Explorer с пустым рабочим пространством Untitled (Workspace). Мы создали папку, давайте её наполним.

Шаг 3. Добавляем файлы

После создания папка пустая. Щёлкнем правой кнопкой по заголовку personal_page и добавим три файла, которые понадобятся в работе — index.html, style.css и script.js. Для начала этого хватит.

Шаг 4. Делаем работу удобнее

Сейчас все три файла открыты во вкладках, и между ними не всегда удобно переключаться. Чтобы было удобнее, код со стилями можно перенести в другую часть окна, например, вниз. Для этого нажмите правой кнопкой по вкладке со style.css и выберите split down,чтобы увидеть результат.

Шаг 5. Добавляем код

Пока отредактируем только index.html (файл с разметкой) и style.css (файл со стилями), а script.js оставим на будущее. Если у вас уже есть какой-нибудь код, напишите его, или используйте готовый — мы, например, возьмём код из интерактивных курсов.

Шаг 6. Запускаем код и смотрим на результат

Самый простой способ — открыть папку с файлами через проводник и запустить файл index.html. Вы увидите результат вёрстки в браузере, но это не слишком удобно — при любых изменениях придётся переходить в браузер и обновлять страницу.

Давайте настроим всё так, чтобы наша страничка открывалась сама и обновлялась, если вы что-то изменили в разметке или стилях.

Для этого нам понадобится расширение Live Server. Найти его можно прямо в VS Code (пятая иконка в меню слева) — введите название и нажмите Install. Другой способ — скачать Live Server из магазина расширений, но это менее удобно.

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

Чтобы запустить код, нажмите кнопку Go Live на нижней панели.

Результат выглядит так. Слева — редактор, справа — браузер. Теперь измените код в редакторе и сохраните его, а он автоматически изменится и в окне браузера.

Что мы сделали

1. Установили и настроили редактор кода.
2. Создали рабочую папку и добавили туда файлы нашего проекта.
3. Научились редактировать и сохранять файлы с кодом.
4. Установили расширение, чтобы сразу видеть результат вёрстки.

В следующих частях — о добавлении и проверке кода на JavaScript, и о том, как сделать работу с кодом ещё удобнее. Подпишитесь на нашу рассылку, чтобы не пропустить следующие выпуски.

Эта статья объясняет как установить простой локальный тестовый сервер на вашем компьютере, а так же основы его использования.

Вы научитесь как устанавливать локальный тестовый сервер.

Локальные и удалённые файлы

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

Проблемы тестирования локальных файлов

Некоторые примеры могут не запуститься, если вы попробуете открыть их как локальные файлы. Это может произойти по нескольким причинам, самые распространённые из которых:

• Они содержат асинхронные запросы. Некоторые браузеры (включая Chrome) не будут запускать асинхронные запросы (см. Fetching data from the server), если вы просто запускаете пример из локального файла. Это связано с ограничениями безопасности (для получения дополнительной информации о безопасности в Интернете, ознакомьтесь с Website security).
• Они имеют серверный язык. Серверные языки (например, PHP или Python) требуют специального сервера для интерпретации кода и предоставления результатов.

Для этого нужно:

Установить Python. Если вы пользуетесь Linux или Mac OS X, всё уже готово в вашей системе. Если вы пользователь Windows, вы можете скачать установочный файл с домашней страницы Python:

• Зайдите на python.org
• В секции загрузок, выберите линк для Python "3.xxx".
• Внизу страницы выберите Windows x86 executable installer и скачайте его.
• После загрузки файла запустите его.
• На первой странице инсталлятора выберите чекбокс "Add Python 3.xxx to PATH".
• Нажмите Install, затем нажмите Close когда установка закончится.

Откройте командную строку (Windows)/ (OS X/Linux). Для проверки установки Python введите следующую команду:

Система вернёт вам номер версии установленной программы. В случае успешного выполнения команды python -V нужно перейти в директорию с вашим проектом, используя команду cd :

Введите команду для запуска сервера в том каталоге:

По умолчанию это приведёт к запуску содержимого каталога на локальном веб-сервере на порту 8000. Вы можете перейти на этот сервер, перейдя на URL-адрес localhost: 8000 в своём веб-браузере. Здесь вы увидите содержимое указанного каталога - щёлкните файл HTML, который вы хотите запустить.

Эта статья о том, как создать веб-страницу и разместить ее на виртуальном хосте локального веб-сервера.

А, понадобится нам для этого, как показано на картинке: локальный веб-сервер, текстовый редактор, язык описания структуры веб-страниц HTML и язык стилей CSS.

Содержание

• Создание виртуального хоста на локальном веб-сервере
• Создание файла веб-страницы с проверкой работы локального веб-сервера
• Составление каркаса HTML-страницы
• Исходные файлы сайта

Создание виртуального хоста на локальном веб-сервере

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

Здесь, будет рассматриваться работа с локальным веб-сервером на примере сборки программ Denwer (Денвер). Но, это не принципиально, так как все это можно делать и на других аналогичных программных продуктах.

О том, какие существуют варианты веб-сервера, а также, для чего он нужен и как его установить на компьютер, ранее рассказывалось здесь.

После установки Денвера в директории "WebServers/home/" уже имеются сконфигурированные виртуальные хосты, такие как, "localhost", "test1.ru", "custom". Создадим для нашего сайта новый хост и назовем его, к примеру, "newsite.local", подразумевая под этим именем то, что это новый сайт и размещен он на локальном сервере (не стоит из-за возможной путаницы в дальнейшем, присваивать именам хоста реальные доменной зоны, такие как "ru", "com" и т.п.

В этой папке "newsite.local" создадим новую папку "www", в которой и будем размещать файлы сайта, а также, скопируем сюда же из существующих хостов, вспомогательные папки "subdomain" и "cgi".

После проделанных операций, необходимо перезапустить сервер для того, чтобы он внес в свою работу соответствующие изменения. Это можно сделать через ярлык "Restart Denwer", который может быть создан при установке Денвера, либо (если его не оказалось) через специальный файл Restart.exe в папке "denwer".

Создание файла веб-страницы с проверкой работы локального веб-сервера

Ну, а теперь перейдем к созданию веб-страницы. Для этого, в первую очередь, с помощью текстового редактора Notepad++ создадим файл "index.html", в котором будет находиться код нашей главной страницы. Как установить текстовый редактор можно посмотреть здесь.

Следует отметить, что при открытии сайта с адресом, в котором указано доменное имя, без каких-либо других директорий, браузеры всегда открывают файл, находящийся в корневом каталоге под именем "index". Поэтому, мы и начнем создавать страницы нашего сайта с этого файла. В данном случае он будет иметь расширение "html", так как его код будет основан на HTML.

Но, перед этим, для того, чтобы избежать в дальнейшем лишних недоразумений с отображением HTML-страниц, желательно, в самом начале проверить кодировку, которая установлена в редакторе Notepad++ при открытии новых документов.

Это можно сделать следующим образом: через меню "Опции" открыть окно "Настройки" и в параметрах "Новый документ" проверить, чтобы была установлена универсальная кодировка "UTF-8 без метки BOM", как показано ниже.

Теперь создадим новый файл через меню "Файл", нажав на кнопку "Новый". В открывшейся новой вкладке для проверки работы веб-сервера и правильности установок кодировки, напишем какую-нибудь фразу, к примеру, "Проверка" (такая проверка не является необходимой при создании HTML-страницы и приводится здесь только лишь для лучшего понимания выполняемых действий).

Теперь сохраним этот файл в папке "www" вновь созданного хоста "newsite.local". Для этого, через меню "Файл" выберем "Сохранить как", введем имя файла "index.html", укажем нужную папку и нажмем "Сохранить".

Далее, проверим, как отображается наша страница. Для этого, обновим браузер, введя в его адресное поле имя нашего хоста "newsite.local". Если все сделано правильно, на экране должна появиться надпись с какими-то иероглифами, как показано на скриншоте (еще раз отмечу, что такие подробности здесь рассматриваются только для тех, кто это делает в первый раз, чтобы наглядно показать, что обычно получается при неправильном соответствии кодировок. А вообще, эту проверку можно пропустить и сразу перейти к следующему шагу).

Такие непонятные знаки появились из-за несоответствия кодировок браузера и отображаемой страницы. Для того, чтобы впредь такого не происходило, необходимо в дополнительном конфигурационном файле ".htaccess" веб-сервера указать нужную кодировку.

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

Для того, чтобы это сделать, надо аналогичным образом, как и с "index.html", в редакторе Notepad++ создать новый файл и сохранить его в той же папке под именем ".htaccess". При этом в самом файле необходимо написать следующую строку "AddDefaultCharset UTF-8", как показано на скриншоте.

Ну, а теперь, если снова обновить браузер с адресом нашего хоста "newsite.local", то можно убедиться в появлении на странице того текста, который изначально был написан нами в файле "index.html".

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

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

Составление каркаса HTML-страницы

После того, как мы убедились в работоспособности локального веб-сервера и в правильном отображении нашей веб-страницы, перейдем к наполнению ее кодом HTML.

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

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

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

Это в полной мере относится к написанию HTML-страниц, ведь не будешь по каждому, а тем более не значительному вопросу, прокручивать видеозапись в поисках нужной информации.

Поэтому, при создании веб-страниц удобно пользоваться справочниками. Какими? Очень сложно однозначно ответить на этот вопрос. Наверное, у каждого имеются свои предпочтения, тем более, что в сети интернет их имеется большое множество.

Также, можно отметить справочный интернет-ресурс WebReference, в котором имеется довольно полная информация по современным версиям HTML5 и CSS3, куда также включены учебные курсы по веб-технологиям.

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

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

<meta charset = "utf-8" />

<title> Заголовок страницы </title>

<meta name = "Description" content = "Краткое описание содержания страницы" >

<header> Шапка </header>

<section> Ротатор </section>

<main> Основное содержание </main>

<aside"> Сайдбар </aside>

<footer> Подвал </footer>

Для того, чтобы записать HTML-код каркаса в файл "index.html", его нужно открыть в текстовом редакторе Notepad++ и набрать код, пользуясь приведенным примером, либо его туда скопировать.

Кроме того, в конце каждой статьи, начиная с этой, будет прилагаться архив исходных файлов папки "www", создаваемого сайта на текущее состояние. Поэтому, можно просто воспользоваться этими дополнительными материалами и скачать файл "index.html" по ссылке, приведенной в конце этой статьи.

Вот так должен выглядеть HTML-код файла "index.html" в текстовом редакторе Notepad++, составленный в соответствии с приведенным примером.

Рассмотрим, более подробно то, что изображено на рисунке.

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

Поэтому, если не будет такого указания, то браузер, попросту "запутается" при обработке страницы. В данной строке, в частности указано, что документ создан на языке html версии 5.

Более подробно об элементе <!DOCTYPE> можно посмотреть в справочнике htmlbook.ru по ссылке "http://htmlbook.ru/html/!doctype" .

Далее, идут элементы, называемые "тегами" - символы, заключенные в угловые скобки. Эти элементы, в своем роде являются конструкцией языка, указывающей браузеру, что нужно делать, и по существу, являются основой языка HTML.

Теги бывают форматирующие и специальные. Форматирующие теги отвечают за создание элементов видимой части страниц, таких как абзацы, заголовки, ссылки, картинки и т.д.

Кроме того, теги подразделяются на одинарные и парные. Парные теги всегда состоят из двух частей, в первой части они открываются, во второй, обозначенной символом слэш "/", закрываются (открывающийся и закрывающийся теги). То, что находиться между ними и будет обрабатываться в соответствии с правилами использования этого элемента.

Таким образом, во 2-ой и 17-ой строках указан тег "html", который, по существу представляет контейнер со всем содержимым страницы. Этот тег всегда указывается в таком порядке, что любой HTML-код должен быть внутри этого контейнера.

Следующая часть каркаса представляет собой область "head", в который размещаются все специальные теги. Эта область охватывает строки с 3 по 7. Содержащаяся в этой области информация является вспомогательной, и не отображается браузером, за исключением заголовка "title", который показывается на вкладке браузера.

В качестве таких специальных тегов в строке 4 размещен метатег с атрибутом "charset", указывающий на кодировку "utf-8", в строке 5 - тег "title", определяющий заголовок документа, а в 6-ой строке - метатег с атрибутами "name" и "content", предназначенный для краткого описания содержания страницы.

В дальнейшем, по мере выполнения верстки, область "head" будет дополнена и другими специальными элементами.

Следующая область "body", охватывающая строки с 8 по 16, предназначена для размещения форматирующих элементов, отвечающих за создание видимой части веб-страниц.

В соответствии с дизайн-макетом, в нашем случае, область "body" состоит из пяти основных блоков: "Шапка", "Ротатор", "Основное содержание", "Сайдбар" и "Подвал", где:

• в 10-ой строке содержится блок "Шапка" (элемент "header");
• в 11-ой строке - блок "Ротатор" (эл-т "section");
• в 12-ой строке - блок "Основное содержание" (эл-т "main");
• в 13-ой строке - блок "Сайдбар" (эл-т "aside");
• в 14-ой строке - блок "Подвал" (эл-т "footer");

При этом, размещенные здесь блоки показаны в очень укрупненном виде. Например, "header" и "footer" будут включать в себя также (в соответствии с дизан-макетом) навигационное меню, а "main", в свою очередь, будет разбиваться на блоки, содержащие статьи и комментарии. И такое деление на более мелкие блоки будет продолжаться до тех пор, пока полностью не будет выполнена вся разметка HTML-страницы.

Что касается парного тега <div>, находящегося в 9 и 15 строках, то он здесь выполняет функцию блока "обвертки" для задания минимальной и максимальной ширины страницы в заданных пределах резиновой верстки. Этому тегу присвоен атрибут класса "wrapper" для возможности в дальнейшем назначать ему соответствующие стили CSS.

Следует обратить внимание на то, что раньше, до появления 5-ой версии HTML, для создания каркаса обычно использовались блочные элементы "div". Можно и сейчас использовать их для этих целей, в таком виде сайты по-прежнему смогут нормально работать.

Но следует учесть, что с целью придания элементам языка смыслового значения HTML5 дополнен новыми тегами, такими, как "header", "section", "footer" и др. И, следовательно, использования этих новых элементов, будет давать некоторые преимущества по сравнению со старыми версиями языка, так как позволяет лучше понимать структуру веб-страниц. (Более подробно об особенностях семантической верстки можно посмотреть в статье Определяем способ верстки).

Поэтому, сейчас, когда HTML5 полноправно занял основное место при разработке сайтов, постараемся с самого начала шагать в ногу со временем, и по возможности, использовать новые элементы этого языка.

Если сейчас в браузере открыть созданную страницу, то можно увидеть только слова, которые содержатся в тегах, размещенных в контейнере "body". Текст же, находящийся в области "head", как было отмечено выше, отображаться не будет. Исключением является заголовок "title" (в нашем случае "Заголовок страницы"), который будет виден на вкладке браузера.

На этом, мы завершим этот этап создания сайта, и в следующей статье сделаем разметку веб-страницы в соответствии с созданным ранее дизайн-макетом.

Исходные файлы сайта

Исходные файлы сайта с обновлениями, которые были сделаны в данной статье, можно скачать из прилагаемых дополнительных материалов .

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

Несколько дней назад меня очередной раз посетила Мысль. Мысль была не нова и довольна навязчива: «давай перейдем на Windows8. Ну пожааалуйста». И так как отогнать её никак не получалось, я запаслась чаем и печеньками и приступила.

На установку системы и всех необходимых программ ушло не более двух часов, но затем наступил самый интересный момент: мне нужно было развернуть рабочее окружение, а именно — GIT + локальный сервер (Apache, MySQL, PHP, nginx, memcached, mongodb). Помятуя об опыте предыдущих установок, на этот раз я решила весь процесс задокументировать и сохранить для потомков.

Дисклаймер номер раз: «я не программист» (с), а дизайнер интерфейсов и фронтенд-технолог (но в некоторых случаях могу помочь коллегам и накодить что-нибудь этакое, и меня даже потом за это не побьют)

Дисклаймер номер два: да, я прекрасно представляю, что в Ubuntu всё это делается в разы быстрее. Но я работаю на Windows, так исторически сложилось.

Итак, приступим.

Наш план работ включает установку следующих продуктов:

1. PuTTY
2. GIT
3. Denwer (Apache, MySQL, PHP)
4. Nginx
5. Memcached
6. MongoDB

1. PuTTY

PuTTY — свободно распространяемый клиент для различных протоколов удалённого доступа, включая SSH, Telnet, rlogin.

В состав PuTTY входит несколько утилит, но мне в работе нужны только он сам и Pegeant (агент SSH-аутентификации, в котором хранятся ключи от git-репозиториев).
Офсайт: перейти
Если вам не нужны никакие SSH-и, забудьте об этом пункте и идём дальше.

2. GIT

Для работы с git я уже не первый год использую TortoiseGit, который стабилен, гуёв и на 146% закрывает все мои потребности. Вобщем, рекомендую.

Офсайт: перейти

2.1 Для работы TortoiseGit требуется git для Windows, который можно забрать на гуглекоде;
2.2 сам TortoiseGit устанавливаем отсюда

3. Denwer

Денвер — Джентльменский набор Web-разработчика («Д.н.w.р», читается «Денвер») — проект Дмитрия Котерова, набор дистрибутивов (Apache, PHP, MySQL, Perl и т.д.) и программная оболочка, используемые Web-разработчиками для разработки сайтов на «домашней» (локальной) Windows-машине.
Офсайт: перейти

3.1 Установка

Нам потребуется скачать базовый комплект и дополнительные модули PHP5.

Лирическое отступление:

Обычно установка денвера проходит быстро и безболезненно, но на Windows8 на меня напала ошибка, которая ругалась на отсутствующую библиотеку msvcr71.dll. Библиотеку можно забрать здесь и положить в папку "\Windows\System32\" (x32) или "\Windows\SysWOW64\" (x64). После того, как файл улегся в папку, откройте его свойства и нажмите кнопку «Разблокировать».

3.2 Проверка работоспособности

После установки Денвера, создадим тестовый скрипт, на котором будем проверять работоспособность всего того, что мы установим впоследствии.
Идем в Z:\home и добавляем новый сайт: создаем папку test.local, в ней папку «www», в которую добавляем файл index.php с невероятно креативным текстом:

4. Memcached

Memcached — связующее программное обеспечение, реализующее сервис кэширования данных в оперативной памяти на основе парадигмы хеш-таблицы.

Memcache — расширение для php, предоставляет удобный процедурный и объектно-ориентированный интерфейс к memcached, высокоэффективному кеширующему демону, который был специально разработан для снижения нагрузки на базу данных в динамических веб приложениях.

4.1 Установка memcached

А. скачиваем архив с бинарником: Memcached 1.4.5 for Windows отсюда
В. распаковываем содержимое архива в \usr\local\memcached

4.2 Установка memcache

А. скачиваем архив с библиотекой отсюда
В. распаковываем содержимое архива в \usr\local\php5\ext\
С. открываем файл php.ini (\usr\local\php5\php.ini) и подключаем расширение:
extension=php_memcache.dll

4.3 Настраиваем запуск Memcached вместе с запуском Denwer

1. написать скрипт, содержащий команды запуска и останова приложения/ сервиса и положить его в папку\denwer\scripts\init.d
2. создать ссылку на этот скрипт в папке конфигурации запуски/останова \denwer\scripts\main\

А. создаём файл с именем «memcached.pl» в директории \denwer\scripts\init.d\

• \denwer\scripts\main\start
• \denwer\scripts\main\stop
• \denwer\scripts\main\restart

4.4 Проверяем результат

В наш тестовый скрипт (index.php) добавляем:

Перезапускаем Денвер и смотрим, что получилось

5. Nginx

Nginx — простой, быстрый и надёжный сервер, не перегруженный функциями.

Офсайт: перейти

5.1 Настройка Nginx

A. скачиваем с офсайта Windows-версию и распаковываем в \usr\local\nginx
B. настраиваем виртуальный хост для нашего тестового сайта. Для этого открываем \usr\local\nginx\conf\nginx.conf и добавляем туда

Это пример настроек из реального проекта, ваши настройки, очевидно, могут отличаться.

5.2 Настройка Apache

5.3 Настраиваем запуск Nginx вместе с запуском Denwer

A. создаём файл с именем «nginx.pl» в директории \denwer\scripts\init.d\

• \denwer\scripts\main\start
• \denwer\scripts\main\stop
• \denwer\scripts\main\restart

5.4 Проверяем результат

Положим рядом со скриптом файл style.css с содержанием

И облагородим наш index.php:

Теперь перезапускаем Денвер и любуемся результатом. Если CSS-файл подключился – Nginx работает нормально.

6. MongoDB

MongoDB — документо-ориентированная система управления базами данных (СУБД) с открытым исходным кодом, не требующая описания схемы таблиц.

Офсайт: перейти

6.1 PHP-driver

А. Скачиваем библиотеку php_mongo.dll с этого сайта: и закидываем в папку \usr\local\php5\ext\
Методом проб и ошибок было установлено, что подходящий драйвер содержится в архиве mongo-1.2.5.zip/mongo-1.2.5-php5.3vc9ts.zip. Если у вас по какой-то причине не заведётся, попробуйте другие версии.

B. подключаем расширение в php.ini
extension=php_mongo.dll

6.2 Установка Mongo

B. устанавливаем службу
> cd C:\WebServers\usr\local\mongodb\bin\
> mongod.exe --install --dbpath=C:\WebServers\usr\local\mongodb\db\ --logpath=C:\WebServers\usr\local\mongodb\logs\

6.3 Настраиваем запуск MongoDB совместно с денвером

A. создаём файл с именем «mongod.pl» в директории \denwer\scripts\init.d\

• \denwer\scripts\main\start
• \denwer\scripts\main\stop
• \denwer\scripts\main\restart

6.4 Проверяем результат

Запустим консольный интерфейс mongo
> Z:\usr\local\mongodb\bin\mongo.exe

и выполним вставку и вывод тестового значения в базу “test”
> db.test.save( < name: “Habr!” >)
> db.test.find()

В результате должно получиться следующее:

6.5. Установка интерфейса управления Mongo-базами

На офсайте MongoDB есть список и краткие обзоры админок, так что можно выбрать по вкусу.
Я для себя выбрала RockMongo, поэтому именно с её помощью мы окончательно удостоверимся, что у нас всё работает и никуда не падает.

А. скачиваем архив с админкой с этой страницы. Выбираем, естественно, версию для Windows. На момент написания статьи это RockMongo-on-Windows v0.0.4

B. из архива берём папку \rockmongo-on-windows\web\rockmongo и копируем её в директорию нашего тестового сайта
Открываем config.php и меняем значение параметра

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

Бонус №1. Работа с php из консоли Windows

Возможно, кому-то пригодится. Мне вот пригодилось, когда наш злобный техлид решил, что «SQL-файлы – это ващепрошлыйвек, давайте юзать миграции». Я, конечно, для приличия попыталась изобразить полное непонимание и даже пустить слезу, но была разоблачена и отправлена разбираться с тем, как это работает на Windows.
Оказалось, что всё что нужно для счастья – это прописать PHP директорию в PATH.

Нажимаем на «Изменить» и добавляем в конец строки
;Z:\usr\local\php5

Теперь проверим, что всё заработало.
В директории тестового сайта создадим файл console.php

Открываем консоль (можно прям из этой же папки – щелкаем правой кнопкой мыши с зажатым SHIFT-ом на пустом месте и выбираем пункт «Открыть окно команд»).
Вводим:
> php console.php “UserName”

Консоль отвечает:
> “Hello, UserName!”

PHP побеждён, всеобщее ликование, апплодисменты, занавес.

Бонус №2.

Все файлы и примеры, упомянутые в статье одним архивом бесплатно без смс: на гитхабе

Надеюсь, что данный материал окажется полезен.
Буду благодарна за замечания и предложения.

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

  
• Есть ли на xbox тусовка
  
• Какой флюс для пайки разъемов микро usb
  
• Pfsense dns resolver настройка
  
• Есть ли лига чемпионов в фифа 19 на xbox 360
  
• Как включить куки в гугл хром