Я хочу запустить очень простой HTTP-сервер. Каждый запрос GET example.com
должен обрабатываться index.html
как обычная HTML-страница (т. Е. То же, что и при чтении обычных веб-страниц).
Используя код ниже, я могу прочитать содержание index.html
. Как мне служить index.html
обычной веб-страницей?
var http = require('http');
var fs = require('fs');
var index = fs.readFileSync('index.html');
http.createServer(function (req, res) {
res.writeHead(200, {'Content-Type': 'text/plain'});
res.end(index);
}).listen(9615);
Одно из предложений ниже является сложным и требует, чтобы я написал get
строку для каждого файла ресурсов (CSS, JavaScript, изображения), который я хочу использовать.
Как я могу обслуживать одну HTML-страницу с некоторыми изображениями, CSS и JavaScript?
Ответы:
Самый простой сервер Node.js это просто:
Теперь вы можете запустить сервер с помощью следующих команд:
Если вы используете NPM 5.2.0 или новее, вы можете использовать его
http-server
без установкиnpx
. Это не рекомендуется для использования в производстве, но это отличный способ быстро запустить сервер на локальном хосте.Или вы можете попробовать это, чтобы открыть ваш веб-браузер и включить запросы CORS:
Для получения дополнительных опций ознакомьтесь с документацией
http-server
по GitHub или запустите:Множество других приятных функций и простое развертывание в NodeJitsu.
Feature Forks
Конечно, вы можете легко дополнить функции своей вилкой. Вы можете обнаружить, что это уже было сделано в одном из существующих 800+ форков этого проекта:
Light Server: альтернатива автообновлению
Хорошая альтернатива
http-server
естьlight-server
. Он поддерживает просмотр файлов и автообновление и многие другие функции.Добавить в свой каталог контекстное меню в проводнике Windows
Простой JSON REST сервер
Если вам нужно создать простой REST-сервер для прототипа проекта, тогда вам может подойти json-server .
Редакторы автообновления
Большинство редакторов веб-страниц и инструментов IDE теперь включают веб-сервер, который будет следить за вашими исходными файлами и автоматически обновлять веб-страницу при их изменении.
Я использую Live Server с кодом Visual Studio.
В открытой исходном текстовом редакторе Кронштейны также включает в себя NodeJS статического веб - сервер. Просто откройте любой HTML-файл в скобках, нажмите « Live Preview », и он запустит статический сервер и откроет ваш браузер на странице. Браузер ** автоматически обновляется каждый раз, когда вы редактируете и сохраняете файл HTML. Это особенно полезно при тестировании адаптивных веб-сайтов. Откройте HTML-страницу в нескольких браузерах / размерах окон / устройствах. Сохраните HTML-страницу и сразу посмотрите, работает ли ваш адаптивный материал, поскольку все они автоматически обновляются.
Разработчики PhoneGap
Если вы пишете гибридное мобильное приложение , вам может быть интересно узнать, что команда PhoneGap приняла эту концепцию автоматического обновления вместе со своим новым приложением PhoneGap . Это универсальное мобильное приложение, которое может загружать файлы HTML5 с сервера во время разработки. Это очень хитрый трюк, поскольку теперь вы можете пропустить медленные этапы компиляции / развертывания в цикле разработки для гибридных мобильных приложений, если вы изменяете файлы JS / CSS / HTML - это то, что вы делаете большую часть времени. Они также предоставляют статический веб-сервер NodeJS (запуск
phonegap serve
), который обнаруживает изменения файла.Разработчики PhoneGap + Sencha Touch
Сейчас я широко адаптировал статический сервер PhoneGap и приложение PhoneGap Developer для разработчиков Sencha Touch и jQuery Mobile. Проверьте это на Sencha Touch Live . Поддерживает --qr QR-коды и --localtunnel, который проксирует ваш статический сервер с вашего настольного компьютера по URL-адресу за пределами вашего брандмауэра! Тонны использования. Массовое ускорение для гибридных мобильных разработчиков.
Cordova + Ionic Framework Разработчики
Локальный сервер и функции автоматического обновления встроены в
ionic
инструмент. Просто запуститеionic serve
из папки вашего приложения. Еще лучше ...ionic serve --lab
просматривать автообновление рядом с iOS и Android.источник
npm install live-server -g
если вы хотите то же самое, но с автоматической перезагрузкой при обнаружении изменения файлаhttp-server -a localhost
Для этого вы можете использовать Connect и ServeStatic с Node.js:
Установить соединение и служить статические с NPM
Создайте файл server.js со следующим содержимым:
Запустить с Node.js
Теперь вы можете перейти к
http://localhost:8080/yourfile.html
источник
Проверьте эту суть . Я воспроизводлю это здесь для справки, но суть регулярно обновляется.
Обновить
Суть действительно обрабатывает файлы CSS и JS. Я использовал это сам. Использование чтения / записи в «бинарном» режиме не проблема. Это просто означает, что файл не интерпретируется как текст библиотекой файлов и не связан с типом содержимого, возвращаемым в ответе.
Проблема с вашим кодом в том, что вы всегда возвращаете контент типа «text / plain». Приведенный выше код не возвращает какой-либо тип содержимого, но если вы просто используете его для HTML, CSS и JS, браузер может сделать вывод, что это нормально. Нет типа контента лучше, чем неправильный.
Обычно тип контента - это конфигурация вашего веб-сервера. Поэтому я извиняюсь, если это не решит вашу проблему, но он работал для меня как простой сервер разработки и думал, что это может помочь другим людям. Если вам нужны правильные типы содержимого в ответе, вам нужно либо явно указать их как joeytwiddle, либо использовать библиотеку типа Connect, которая имеет разумные значения по умолчанию. Хорошая вещь об этом - то, что это просто и автономно (без зависимостей).
Но я чувствую вашу проблему. Итак, вот комбинированное решение.
источник
fs.exists()
также не рекомендуется. Поймайте ошибку,fs.stat()
а не создавайте состояние гонки.Вам не нужно экспресс. Вам не нужно подключаться. Node.js делает http NATIVELY. Все, что вам нужно сделать, это вернуть файл в зависимости от запроса:
Более полный пример, который гарантирует, что запросы не могут получить доступ к файлам в базовом каталоге, и выполняет правильную обработку ошибок:
источник
node thisfile.js
. Он будет работать, прислушиваясь к новым соединениям и возвращая новые результаты, пока либо A. не закроется сигналом, либо B. какая-то сумасшедшая ошибка каким-то образом вызовет завершение программы.Я думаю, что часть, которую вы пропустили прямо сейчас, это то, что вы посылаете:
Если вы хотите, чтобы веб-браузер отображал HTML, вы должны изменить это на:
источник
<style>
тег.Шаг 1 (внутри командной строки [надеюсь, вы перейдете к папке с папкой]):
npm install express
Шаг 2: Создайте файл server.js
Пожалуйста, обратите внимание, вы должны также добавить WATCHFILE (или использовать nodemon). Выше код только для простого сервера подключения.
ШАГ 3:
node server.js
илиnodemon server.js
Теперь есть более простой способ, если вы просто хотите разместить простой HTTP-сервер.
npm install -g http-server
и откройте наш каталог и введите
http-server
https://www.npmjs.org/package/http-server
источник
Быстрый путь:
Твой путь:
источник
Вместо того, чтобы иметь дело с оператором switch, я думаю, что лучше искать тип содержимого из словаря:
источник
Это в основном обновленная версия принятого ответа для Connect версии 3:
Я также добавил опцию по умолчанию, чтобы index.html служил по умолчанию.
источник
Вам не нужно использовать какие-либо модули NPM для запуска простого сервера, для Node есть очень маленькая библиотека под названием « NPM Free Server »:
50 строк кода, вывод, если вы запрашиваете файл или папку, и дает ему красный или зеленый цвет, если он не сработал. Размер менее 1 КБ (минимизированный).
источник
var filename = path.join(process.cwd() + '/dist/', uri);
на сервере из папки dist . Я вставил код,server.js
и он просто работает, когда я печатаюnpm start
если на вашем ПК установлен узел, возможно, у вас есть NPM, если вам не нужны NodeJS, вы можете использовать для этого пакет serve :
1 - Установите пакет на свой компьютер:
2 - Служите вашей статической папке:
Он покажет вам, какой порт обслуживается ваша статическая папка, просто перейдите к хосту, например:
источник
Я нашел интересную библиотеку на npm, которая может быть вам полезна. Он называется mime (
npm install mime
или https://github.com/broofa/node-mime ) и может определять тип mime файла. Вот пример веб-сервера, который я написал, используя его:Это подойдет для любого обычного текстового или графического файла (.html, .css, .js, .pdf, .jpg, .png, .m4a и .mp3 - это расширения, которые я тестировал, но теоретически он должен работать для всех)
Примечания разработчика
Вот пример вывода, который я получил с ним:
Обратите внимание на
unescape
функцию в построении пути. Это позволяет использовать имена файлов с пробелами и закодированными символами.источник
Редактировать:
Пример приложения Node.js Node Chat обладает необходимой вам функциональностью.
В README.textfile
3. Шаг - это то, что вы ищете.
Вот сервер.js
Вот это util.js
источник
.readFileSync
обратного вызова. С node.js мы используем неблокирующий ввод-вывод. Пожалуйста, не рекомендуйтеSync
команды.Я делаю это, прежде всего, для установки статического сервера узла глобально через
затем перейдите в каталог, содержащий ваши HTML-файлы и запустите статический сервер с
static
.Зайдите в браузер и наберите
localhost:8080/"yourHtmlFile"
.источник
Я думаю, что вы ищете это. В вашем index.html просто заполните его обычным html-кодом - что бы вы ни хотели сделать, например:
источник
В основном копирование принятого ответа, но избегание создания файла js.
Нашел это очень удобно.
Обновить
Начиная с последней версии Express, serve-static стал отдельным промежуточным программным обеспечением. Используйте это, чтобы служить:
Установите
serve-static
сначала.источник
от w3schools
довольно просто создать сервер узлов, который будет обслуживать любой запрашиваемый файл, и вам не нужно устанавливать какие-либо пакеты для него
HTTP: // локальный: 8080 / file.html
будет служить file.html с диска
источник
Вы можете просто ввести их в свою оболочку
Репо: https://github.com/zeit/serve .
источник
Я использую приведенный ниже код для запуска простого веб-сервера, который отображает html-файл по умолчанию, если в URL не указан файл.
Он будет отображать все файлы js, css и изображения вместе со всем содержимым html.
Согласитесь с утверждением " Нет типа контента лучше, чем неправильный "
источник
Я не уверен, что это именно то, что вы хотели, однако, вы можете попробовать изменить:
к этому:
Это позволит клиенту браузера отображать файл в формате html вместо простого текста.
источник
источник
Content-Type
Должно бытьtext/html
, так как она определяется таким образом:Content-Type := type "/" subtype *[";" parameter]
.Чуть более подробная версия 4.x, но она предоставляет список каталогов, сжатие, кэширование и регистрацию запросов в минимальном количестве строк.
источник
Сумасшедшее количество сложных ответов здесь. Если вы не собираетесь обрабатывать файлы / базы данных nodeJS, а просто хотите использовать статические html / css / js / images, как подсказывает ваш вопрос, просто установите pushstate-сервер модуль или аналогичный;
Вот «один лайнер», который создаст и запустит мини-сайт. Просто вставьте весь блок в вашем терминале в соответствующую директорию.
Откройте браузер и перейдите по адресу http: // localhost: 3000 . Выполнено.
Сервер будет использовать
app
каталог в качестве корня для обслуживания файлов. Чтобы добавить дополнительные ресурсы, просто поместите их в этот каталог.источник
npm install pushstate-server --save; touch server.js; echo "var server = require('pushstate-server');server.start({ port: 3000, directory: './' });" > server.js; node server.js
Уже есть несколько отличных решений для простого
nodejs server
. Существует еще одно решение, если вам нужно,live-reloading
поскольку вы вносили изменения в свои файлы.перейдите в свой каталог и сделайте
он откроет браузер для вас с живой перезагрузкой.
источник
Экспресс-функция sendFile делает именно то, что вам нужно, и, так как вы хотите, чтобы функциональность веб-сервера от узла, экспресс-контроль становится естественным выбором, и тогда обслуживание статических файлов становится таким же простым, как:
читайте больше здесь: https://expressjs.com/en/api.html#res.sendFile
Небольшой пример с экспресс-веб-сервером для узла:
запустите его и перейдите по адресу http: // localhost: 8080
Чтобы расширить это, чтобы позволить вам обслуживать статические файлы, такие как CSS и изображения, вот еще один пример:
поэтому создайте подпапку с именем css, поместите в нее свой статический контент, и он будет доступен для вашего index.html для удобства, например:
Обратите внимание на относительный путь в href!
вуаля!
источник
Большинство ответов выше очень хорошо описывают, как подается содержимое. То, что я искал как дополнительный, было перечислением каталога, чтобы можно было просмотреть другое содержимое каталога. Вот мое решение для дальнейших читателей:
источник
Это одно из самых быстрых решений, которое я использую для быстрого просмотра веб-страниц.
С этого момента просто введите каталог ваших HTML-файлов и запустите
затем измените устройство на Nexus 7 ландшафт.
источник
Более простая версия, с которой я столкнулся, выглядит следующим образом. Для образовательных целей это лучше, потому что он не использует никаких абстрактных библиотек.
Теперь перейдите в браузер и откройте следующее:
Здесь
image.jpg
должно быть в том же каталоге, что и этот файл. Надеюсь, это поможет кому-то :)источник
Я также могу порекомендовать SugoiJS, он очень прост в настройке и дает возможность начать писать быстро и имеет отличные функции.
Посмотрите здесь, чтобы начать: http://demo.sugoijs.com/ , документация: https://wiki.sugoijs.com/
Он имеет декораторы обработки запросов, декораторы политик запросов и политик авторизации.
Например:
источник
Это очень легко с тоннами библиотек, представленных сегодня. Ответы здесь являются функциональными. Если вы хотите другую версию для запуска быстрее и проще
Конечно, сначала установите node.js. Потом:
Здесь содержимое " https://raw.githubusercontent.com/voxsoftware/kawix-core/master/example/npmrequire/express-static.js " (вам не нужно скачивать его, я написал для понимания, как работает позади)
источник