Использование node.js в качестве простого веб-сервера

1103

Я хочу запустить очень простой 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?

idophir
источник
21
Посмотрите на модуль npm "подключиться". Он обеспечивает такую ​​базовую функциональность и является основой многих настроек и других пакетов.
Мёрре
5
Вы должны поставить свое решение в качестве ответа и отметить его правильно.
graham.reeds
8
Эрик Б. Соуэлл (Eric B. Sowell) смог найти идеальное решение под названием « Обслуживание статических файлов с узла js» . Прочитайте все это. Настоятельно рекомендуется.
Идофир
1
Посмотрите на модуль, который я написал под названием Cachemere. Он также автоматически кэширует все ваши ресурсы. github.com/topcloud/cachemere
Джон
1
Локальный веб-сервер является хорошим примером для просмотра
Ллойд

Ответы:

993

Самый простой сервер Node.js это просто:

$ npm install http-server -g

Теперь вы можете запустить сервер с помощью следующих команд:

$ cd MyApp

$ http-server

Если вы используете NPM 5.2.0 или новее, вы можете использовать его http-serverбез установки npx. Это не рекомендуется для использования в производстве, но это отличный способ быстро запустить сервер на локальном хосте.

$ npx http-server

Или вы можете попробовать это, чтобы открыть ваш веб-браузер и включить запросы CORS:

$ http-server -o --cors

Для получения дополнительных опций ознакомьтесь с документацией http-serverпо GitHub или запустите:

$ http-server --help

Множество других приятных функций и простое развертывание в NodeJitsu.

Feature Forks

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

Light Server: альтернатива автообновлению

Хорошая альтернатива http-serverесть light-server. Он поддерживает просмотр файлов и автообновление и многие другие функции.

$ npm install -g light-server 
$ light-server

Добавить в свой каталог контекстное меню в проводнике Windows

 reg.exe add HKCR\Directory\shell\LightServer\command /ve /t REG_EXPAND_SZ /f /d "\"C:\nodejs\light-server.cmd\" \"-o\" \"-s\" \"%V\""

Простой 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.

Тони О'Хаган
источник
9
npm install live-server -g если вы хотите то же самое, но с автоматической перезагрузкой при обнаружении изменения файла
3
Одна маленькая "гоча". http-сервер по умолчанию обслуживает сайт на 0.0.0.0. Поэтому вы ДОЛЖНЫ указать IP-адрес, чтобы он работал как локальный тестовый сервер:http-server -a localhost
JESii
1
Да ... 0.0.0.0 сделает его привязанным ко ВСЕМ IP-адресам всех ваших сетевых IP-устройств (WiFi, Cable, Bluetooth), что является плохой идеей в любой общедоступной сети, поскольку вы можете быть потенциально взломаны. Это не так плохо, если вы просто хотели продемонстрировать свое приложение в безопасной сети с огненными стенами, чтобы показать другим или подключить его к мобильному устройству в той же сети.
Тони О'Хаган
Действительно полезный маленький инструмент. На моем сервере запущено множество приложений Node, поэтому я добавляю опцию «-p», чтобы выбрать порт, отличный от 8080. Например: nohup http-server -p 60080 & (запускает его в фоновом режиме и позволяет отключиться от сессия оболочки.) Вы должны убедиться, что порт открыт для всего мира, например: iptables -I INPUT 1 -p tcp --dport 60090 -j ПРИНЯТЬ (во многих системах Linux)
Blisterpeanuts
Как запустить его как службу, чтобы я мог использовать его, даже закрыв командную строку. Есть ли какой-то инструмент такого рода, если не этот.
Сандип
983

Для этого вы можете использовать Connect и ServeStatic с Node.js:

  1. Установить соединение и служить статические с NPM

    $ npm install connect serve-static
  2. Создайте файл server.js со следующим содержимым:

    var connect = require('connect');
    var serveStatic = require('serve-static');
    
    connect()
        .use(serveStatic(__dirname))
        .listen(8080, () => console.log('Server running on 8080...'));
  3. Запустить с Node.js

    $ node server.js

Теперь вы можете перейти к http://localhost:8080/yourfile.html

Джан Марко Герарди
источник
24
Идея заключалась в том, чтобы не использовать существующую библиотеку по образовательным причинам, но я думаю, что использование Express - лучший совет, чем его более низкая версия, Connect.
idophir
135
Часть Express, которая обслуживает статический файл, - это просто Connect, поэтому я не вижу смысла использовать Express для обслуживания статических файлов. Но да, Экспресс тоже сделает эту работу.
Джан Марко Герарди
7
Отличный совет. Вышеперечисленные шаги сработали для моих целей очень хорошо. Благодаря Джану, вот ссылка на Express, где он показывает, что он построен на Connect, expressjs.com Вот как использовать Express: expressjs.com/guide.html
Джек Стоун,
10
Не работает для меня, результат не может получить /test.html. Должен ли я заменить __dirname на имя каталога?
Тимо
3
Теперь connect изменился на версию 3. Поэтому нужно использовать serve-static, как описано в miqid. Я отправил еще один ответ с полным кодом для подключения v3.
Tomet
160

Проверьте эту суть . Я воспроизводлю это здесь для справки, но суть регулярно обновляется.

Node.JS статический файловый веб-сервер. Поместите его в свой путь, чтобы запустить серверы в любом каталоге, принимает необязательный аргумент порта.

var http = require("http"),
    url = require("url"),
    path = require("path"),
    fs = require("fs"),
    port = process.argv[2] || 8888;

http.createServer(function(request, response) {

  var uri = url.parse(request.url).pathname
    , filename = path.join(process.cwd(), uri);

  fs.exists(filename, function(exists) {
    if(!exists) {
      response.writeHead(404, {"Content-Type": "text/plain"});
      response.write("404 Not Found\n");
      response.end();
      return;
    }

    if (fs.statSync(filename).isDirectory()) filename += '/index.html';

    fs.readFile(filename, "binary", function(err, file) {
      if(err) {        
        response.writeHead(500, {"Content-Type": "text/plain"});
        response.write(err + "\n");
        response.end();
        return;
      }

      response.writeHead(200);
      response.write(file, "binary");
      response.end();
    });
  });
}).listen(parseInt(port, 10));

console.log("Static file server running at\n  => http://localhost:" + port + "/\nCTRL + C to shutdown");

Обновить

Суть действительно обрабатывает файлы CSS и JS. Я использовал это сам. Использование чтения / записи в «бинарном» режиме не проблема. Это просто означает, что файл не интерпретируется как текст библиотекой файлов и не связан с типом содержимого, возвращаемым в ответе.

Проблема с вашим кодом в том, что вы всегда возвращаете контент типа «text / plain». Приведенный выше код не возвращает какой-либо тип содержимого, но если вы просто используете его для HTML, CSS и JS, браузер может сделать вывод, что это нормально. Нет типа контента лучше, чем неправильный.

Обычно тип контента - это конфигурация вашего веб-сервера. Поэтому я извиняюсь, если это не решит вашу проблему, но он работал для меня как простой сервер разработки и думал, что это может помочь другим людям. Если вам нужны правильные типы содержимого в ответе, вам нужно либо явно указать их как joeytwiddle, либо использовать библиотеку типа Connect, которая имеет разумные значения по умолчанию. Хорошая вещь об этом - то, что это просто и автономно (без зависимостей).

Но я чувствую вашу проблему. Итак, вот комбинированное решение.

var http = require("http"),
    url = require("url"),
    path = require("path"),
    fs = require("fs")
    port = process.argv[2] || 8888;

http.createServer(function(request, response) {

  var uri = url.parse(request.url).pathname
    , filename = path.join(process.cwd(), uri);

  var contentTypesByExtension = {
    '.html': "text/html",
    '.css':  "text/css",
    '.js':   "text/javascript"
  };

  fs.exists(filename, function(exists) {
    if(!exists) {
      response.writeHead(404, {"Content-Type": "text/plain"});
      response.write("404 Not Found\n");
      response.end();
      return;
    }

    if (fs.statSync(filename).isDirectory()) filename += '/index.html';

    fs.readFile(filename, "binary", function(err, file) {
      if(err) {        
        response.writeHead(500, {"Content-Type": "text/plain"});
        response.write(err + "\n");
        response.end();
        return;
      }

      var headers = {};
      var contentType = contentTypesByExtension[path.extname(filename)];
      if (contentType) headers["Content-Type"] = contentType;
      response.writeHead(200, headers);
      response.write(file, "binary");
      response.end();
    });
  });
}).listen(parseInt(port, 10));

console.log("Static file server running at\n  => http://localhost:" + port + "/\nCTRL + C to shutdown");
Джонатан Тран
источник
3
Это на самом деле не решает «проблему». Вы возвращаете index.html как двоичный файл и не обрабатываете css и js.
Идофир
4
Он обрабатывает CSS и JS. Он не возвращает index.html в виде двоичного файла. Он просто копирует данные с диска в любом формате. Пожалуйста, смотрите обновления для более подробного объяснения.
Джонатан Тран
одна проблема с кодом, она чувствительна к регистру, в Unix для определенных файлов, это дает 404
Pradeep
2
Обратите внимание, что «path.exists и path.existsSync устарели. Пожалуйста, используйте fs.exists и fs.existsSync». stackoverflow.com/a/5008295/259
Дэвид Сайкс
3
Обратите внимание, что fs.exists()также не рекомендуется. Поймайте ошибку, fs.stat()а не создавайте состояние гонки.
Мэтт
100

Вам не нужно экспресс. Вам не нужно подключаться. Node.js делает http NATIVELY. Все, что вам нужно сделать, это вернуть файл в зависимости от запроса:

var http = require('http')
var url = require('url')
var fs = require('fs')

http.createServer(function (request, response) {
    var requestUrl = url.parse(request.url)    
    response.writeHead(200)
    fs.createReadStream(requestUrl.pathname).pipe(response)  // do NOT use fs's sync methods ANYWHERE on production (e.g readFileSync) 
}).listen(9615)    

Более полный пример, который гарантирует, что запросы не могут получить доступ к файлам в базовом каталоге, и выполняет правильную обработку ошибок:

var http = require('http')
var url = require('url')
var fs = require('fs')
var path = require('path')
var baseDirectory = __dirname   // or whatever base directory you want

var port = 9615

http.createServer(function (request, response) {
    try {
        var requestUrl = url.parse(request.url)

        // need to use path.normalize so people can't access directories underneath baseDirectory
        var fsPath = baseDirectory+path.normalize(requestUrl.pathname)

        var fileStream = fs.createReadStream(fsPath)
        fileStream.pipe(response)
        fileStream.on('open', function() {
             response.writeHead(200)
        })
        fileStream.on('error',function(e) {
             response.writeHead(404)     // assume the file doesn't exist
             response.end()
        })
   } catch(e) {
        response.writeHead(500)
        response.end()     // end the response so browsers don't hang
        console.log(e.stack)
   }
}).listen(port)

console.log("listening on port "+port)
BT
источник
3
Если я не ошибаюсь, это решение не заботится о типе кодировки, поэтому запросы на HTML-страницы и изображения получат ту же кодировку. Не так ли?
idophir
2
@idophir Чаще всего кодировка не имеет значения, браузеры выводят ее на основании использованных тегов html или другой информации, или они очень хорошо угадывают. Как и кто-то из упомянутых выше, ни один из типов MIME не лучше, чем неправильный. Конечно, вы можете использовать что-то вроде node-mime, чтобы выяснить типы файлов mime, но полностью веб-совместимый http-сервер выходит за рамки этого вопроса.
BT
1
@ Петух Вам не нужно ничего особенного - просто node thisfile.js. Он будет работать, прислушиваясь к новым соединениям и возвращая новые результаты, пока либо A. не закроется сигналом, либо B. какая-то сумасшедшая ошибка каким-то образом вызовет завершение программы.
BT
1
@Rooster Еще один демонизатор с известной репутацией находится на github.com/Unitech/pm2
Путешествующий человек
1
Мне больше всего нравится этот ответ, но есть две проблемы: 1) он возвращает 200, когда должен возвращать 404; чтобы исправить, я вызываю writeHead (200) внутри «открытого» обратного вызова. 2) Если есть ошибка, сокет остается открытым; чтобы исправить я вызываю response.destroy () в обратном вызове error.
Пол Браннан
70

Я думаю, что часть, которую вы пропустили прямо сейчас, это то, что вы посылаете:

Content-Type: text/plain

Если вы хотите, чтобы веб-браузер отображал HTML, вы должны изменить это на:

Content-Type: text/html
Кли
источник
Спасибо за быстрый ответ. Страница теперь загружается, но без CSS. Как я могу получить стандартную HTML-страницу с загруженными CSS и JS?
idophir
20
Вам нужно начать расширять этот сервер. Сейчас он знает только, как обслуживать index.html - вам нужно научить его, как теперь обслуживать foo.css и foo.js, с их собственными соответствующими MIME-типами.
Кли
1
Если вы не хотите обслуживать статические файлы, вы можете поместить свой CSS в <style>тег.
Кит
1
После девяти лет это действительно должен быть принят как правильный ответ.
rooch84
46

Шаг 1 (внутри командной строки [надеюсь, вы перейдете к папке с папкой]): npm install express

Шаг 2: Создайте файл server.js

var fs = require("fs");
var host = "127.0.0.1";
var port = 1337;
var express = require("express");

var app = express();
app.use(express.static(__dirname + "/public")); //use static files in ROOT/public folder

app.get("/", function(request, response){ //root dir
    response.send("Hello!!");
});

app.listen(port, host);

Пожалуйста, обратите внимание, вы должны также добавить WATCHFILE (или использовать nodemon). Выше код только для простого сервера подключения.

ШАГ 3: node server.jsилиnodemon server.js

Теперь есть более простой способ, если вы просто хотите разместить простой HTTP-сервер. npm install -g http-server

и откройте наш каталог и введите http-server

https://www.npmjs.org/package/http-server

СТАЛИ
источник
@STEEL, есть ли способ автоматически запустить сервер узлов. Я имею в виду без перехода к пути к каталогу, а затем введите nodeserver, тогда только он запустится. Я хочу запустить сервер узла, как IIS. можешь сказать мне
Винот
@ Винот, да, есть много способов. Какова ваша точная цель или цель, я могу вам помочь
СТАЛЬ
@steel Я хочу запустить сервер автоматически без указания узла сервера в командной строке. это мое требование возможно вы можете сказать мне пример
Vinoth
Вам нужно будет использовать какой-то инструмент, например ThoughtWorks GO, который может выполнять команды терминала одним кликом из браузера.
СТАЛЬ
32

Быстрый путь:

var express = require('express');
var app = express();
app.use('/', express.static(__dirname + '/../public')); // ← adjust
app.listen(3000, function() { console.log('listening'); });

Твой путь:

var http = require('http');
var fs = require('fs');

http.createServer(function (req, res) {
    console.dir(req.url);

    // will get you  '/' or 'index.html' or 'css/styles.css' ...
    // • you need to isolate extension
    // • have a small mimetype lookup array/object
    // • only there and then reading the file
    // •  delivering it after setting the right content type

    res.writeHead(200, {'Content-Type': 'text/html'});

    res.end('ok');
}).listen(3001);
Фрэнк Нок
источник
19

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

var contentTypesByExtension = {
    'html': "text/html",
    'js':   "text/javascript"
};

...

    var contentType = contentTypesByExtension[fileExtension] || 'text/plain';
joeytwiddle
источник
Да, выглядит гораздо более элегантно, чем решение "switch", используемое Эриком Б. Соуэллом (см. Выбранный ответ). Спасибо.
idophir
Этот ответ полностью вне контекста ... Он ссылается на эту ссылку в этом комментарии - stackoverflow.com/questions/6084360/… (да, что угодно, интернет не работает)
Марс Робертсон
15

Это в основном обновленная версия принятого ответа для Connect версии 3:

var connect = require('connect');
var serveStatic = require('serve-static');

var app = connect();

app.use(serveStatic(__dirname, {'index': ['index.html']}));
app.listen(3000);

Я также добавил опцию по умолчанию, чтобы index.html служил по умолчанию.

tomet
источник
13

Вам не нужно использовать какие-либо модули NPM для запуска простого сервера, для Node есть очень маленькая библиотека под названием « NPM Free Server »:

50 строк кода, вывод, если вы запрашиваете файл или папку, и дает ему красный или зеленый цвет, если он не сработал. Размер менее 1 КБ (минимизированный).

Jaredcheeda
источник
Прекрасный выбор. Обслуживает HTML, CSS, JS и изображения. Отлично подходит для отладки. Просто замените этот код на ваш server.js.
Pollaris
2
Я хотел бы добавить больше голосов! Это замечательно! Я сделал небольшое изменение var filename = path.join(process.cwd() + '/dist/', uri); на сервере из папки dist . Я вставил код, server.jsи он просто работает, когда я печатаюnpm start
Джон Хенкель
Как запустить его как службу, чтобы я мог использовать его, даже закрыв командную строку. Есть ли какой-то инструмент такого рода, если не этот.
Сандип
13

если на вашем ПК установлен узел, возможно, у вас есть NPM, если вам не нужны NodeJS, вы можете использовать для этого пакет serve :

1 - Установите пакет на свой компьютер:

npm install -g serve

2 - Служите вашей статической папке:

serve <path> 
d:> serve d:\StaticSite

Он покажет вам, какой порт обслуживается ваша статическая папка, просто перейдите к хосту, например:

http://localhost:3000
Диего Мендес
источник
Как запустить его как службу, чтобы я мог использовать его, даже закрыв командную строку. Есть ли какой-то инструмент такого рода, если не этот.
Сандип
Это должен быть принятый ответ. Потому что это самое простое и работает из коробки. Таким образом, если вы запускаете только подачу без пути, он будет запускать сервер из текущей папки (той, в которой вы ранее находились на CD-диске).
Игорь Рајачић
9

Я нашел интересную библиотеку на npm, которая может быть вам полезна. Он называется mime ( npm install mimeили https://github.com/broofa/node-mime ) и может определять тип mime файла. Вот пример веб-сервера, который я написал, используя его:

var mime = require("mime"),http = require("http"),fs = require("fs");
http.createServer(function (req, resp) {
path  = unescape(__dirname + req.url)
var code = 200
 if(fs.existsSync(path)) {
    if(fs.lstatSync(path).isDirectory()) {
        if(fs.existsSync(path+"index.html")) {
        path += "index.html"
        } else {
            code = 403
            resp.writeHead(code, {"Content-Type": "text/plain"});
            resp.end(code+" "+http.STATUS_CODES[code]+" "+req.url);
        }
    }
    resp.writeHead(code, {"Content-Type": mime.lookup(path)})
    fs.readFile(path, function (e, r) {
    resp.end(r);

})
} else {
    code = 404
    resp.writeHead(code, {"Content-Type":"text/plain"});
    resp.end(code+" "+http.STATUS_CODES[code]+" "+req.url);
}
console.log("GET "+code+" "+http.STATUS_CODES[code]+" "+req.url)
}).listen(9000,"localhost");
console.log("Listening at http://localhost:9000")

Это подойдет для любого обычного текстового или графического файла (.html, .css, .js, .pdf, .jpg, .png, .m4a и .mp3 - это расширения, которые я тестировал, но теоретически он должен работать для всех)

Примечания разработчика

Вот пример вывода, который я получил с ним:

Listening at http://localhost:9000
GET 200 OK /cloud
GET 404 Not Found /cloud/favicon.ico
GET 200 OK /cloud/icon.png
GET 200 OK /
GET 200 OK /501.png
GET 200 OK /cloud/manifest.json
GET 200 OK /config.log
GET 200 OK /export1.png
GET 200 OK /Chrome3DGlasses.pdf
GET 200 OK /cloud
GET 200 OK /-1
GET 200 OK /Delta-Vs_for_inner_Solar_System.svg

Обратите внимание на unescapeфункцию в построении пути. Это позволяет использовать имена файлов с пробелами и закодированными символами.

MayorMonty
источник
8

Редактировать:

Пример приложения Node.js Node Chat обладает необходимой вам функциональностью.
В README.textfile
3. Шаг - это то, что вы ищете.

шаг 1

  • создайте сервер, который отвечает hello world на порт 8002

шаг 2

  • создать index.html и обслуживать его

шаг 3

  • представить util.js
  • изменить логику, чтобы любой статический файл обслуживался
  • покажи 404, если файл не найден

step4

  • добавить jquery-1.4.2.js
  • добавить client.js
  • измените index.html, чтобы запросить у пользователя псевдоним

Вот сервер.js

Вот это util.js

Керем Байдоган
источник
5
Мне все равно У меня есть только index.html. Я просто хочу загрузить HTML + CSS + JS. Спасибо!
idophir
16
-1 для .readFileSyncобратного вызова. С node.js мы используем неблокирующий ввод-вывод. Пожалуйста, не рекомендуйте Syncкоманды.
Райнос
Привет @krmby, спасибо за попытку помочь. Я действительно новичок в этом. Я скачал и server.js, и util.js. Когда я запускаю «node server.js» и пытаюсь получить доступ к странице с помощью браузера, я получаю эту ошибку: TypeError: У объекта # <ServerResponse> нет метода «close» в /var/www/hppy-site/util.js : 67: 8 в /var/www/hppy-site/util.js:56:4 в [объектный объект]. <Анонимный> (fs.js: 107: 5) в [объектный объект] .emit (events.js) : 61: 17) at afterRead (fs.js: 970: 12) at wrapper (fs.js: 245: 17) Есть идеи? Кстати, то же самое происходит, когда я загружаю ваш проект и запускаю его.
idophir
1
Сожалею. Я использовал новую версию. Заменено res.close () на res.end ()
idophir
8

Я делаю это, прежде всего, для установки статического сервера узла глобально через

npm install node-static -g

затем перейдите в каталог, содержащий ваши HTML-файлы и запустите статический сервер с static .

Зайдите в браузер и наберите localhost:8080/"yourHtmlFile".

самба
источник
1
Ничто не сравнится с одним вкладышем. Спасибо!
AndroidDev
Как запустить его как службу, чтобы я мог использовать его, даже закрыв командную строку. Есть ли какой-то инструмент такого рода, если не этот.
Сандип
7
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/html'});
    // change the to 'text/plain' to 'text/html' it will work as your index page
    res.end(index);
}).listen(9615);

Я думаю, что вы ищете это. В вашем index.html просто заполните его обычным html-кодом - что бы вы ни хотели сделать, например:

<html>
    <h1>Hello world</h1>
</html>
Ашиш Ранджан
источник
7

В основном копирование принятого ответа, но избегание создания файла js.

$ node
> var connect = require('connect'); connect().use(static('.')).listen(8000);

Нашел это очень удобно.

Обновить

Начиная с последней версии Express, serve-static стал отдельным промежуточным программным обеспечением. Используйте это, чтобы служить:

require('http').createServer(require('serve-static')('.')).listen(3000)

Установите serve-staticсначала.

Сяо Пэн - ZenUML.com
источник
6

от w3schools

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

var http = require('http');
var url = require('url');
var fs = require('fs');

http.createServer(function (req, res) {
  var q = url.parse(req.url, true);
  var filename = "." + q.pathname;
  fs.readFile(filename, function(err, data) {
    if (err) {
      res.writeHead(404, {'Content-Type': 'text/html'});
      return res.end("404 Not Found");
    }  
    res.writeHead(200, {'Content-Type': 'text/html'});
    res.write(data);
    return res.end();
  });
}).listen(8080);

HTTP: // локальный: 8080 / file.html

будет служить file.html с диска

Ахмед М. Матар
источник
5

Я использую приведенный ниже код для запуска простого веб-сервера, который отображает html-файл по умолчанию, если в URL не указан файл.

var http = require('http'),
fs = require('fs'),
url = require('url'),
rootFolder = '/views/',
defaultFileName = '/views/5 Tips on improving Programming Logic   Geek Files.htm';


http.createServer(function(req, res){

    var fileName = url.parse(req.url).pathname;
    // If no file name in Url, use default file name
    fileName = (fileName == "/") ? defaultFileName : rootFolder + fileName;

    fs.readFile(__dirname + decodeURIComponent(fileName), 'binary',function(err, content){
        if (content != null && content != '' ){
            res.writeHead(200,{'Content-Length':content.length});
            res.write(content);
        }
        res.end();
    });

}).listen(8800);

Он будет отображать все файлы js, css и изображения вместе со всем содержимым html.

Согласитесь с утверждением " Нет типа контента лучше, чем неправильный "

Sachin303
источник
5

Я не уверен, что это именно то, что вы хотели, однако, вы можете попробовать изменить:

{'Content-Type': 'text/plain'}

к этому:

{'Content-Type': 'text/html'}

Это позволит клиенту браузера отображать файл в формате html вместо простого текста.

Xenry
источник
1
Разве это не то же самое, что существующий ответ ?
Пан
4
var http = require('http');
var fs = require('fs');
var index = fs.readFileSync('index.html');

http.createServer(function (req, res) {
res.writeHead(200, {'Content-Type': 'html'});
res.end(index);
}).listen(9615);

//Just Change The CONTENT TYPE to 'html'
user3389163
источник
6
Content-TypeДолжно быть text/html, так как она определяется таким образом: Content-Type := type "/" subtype *[";" parameter].
t.niese
1
это, кажется, превращает все мои файлы в этой папке в тип html, даже если это js ...
ahnbizcad
Прекрасно работает ...
чмок вишня
4

Чуть более подробная версия 4.x, но она предоставляет список каталогов, сжатие, кэширование и регистрацию запросов в минимальном количестве строк.

var express = require('express');
var compress = require('compression');
var directory = require('serve-index');
var morgan = require('morgan'); //logging for express

var app = express();

var oneDay = 86400000;

app.use(compress());
app.use(morgan());
app.use(express.static('filesdir', { maxAge: oneDay }));
app.use(directory('filesdir', {'icons': true}))

app.listen(process.env.PORT || 8000);

console.log("Ready To serve files !")
Бруно Гридер
источник
4

Сумасшедшее количество сложных ответов здесь. Если вы не собираетесь обрабатывать файлы / базы данных nodeJS, а просто хотите использовать статические html / css / js / images, как подсказывает ваш вопрос, просто установите pushstate-сервер модуль или аналогичный;

Вот «один лайнер», который создаст и запустит мини-сайт. Просто вставьте весь блок в вашем терминале в соответствующую директорию.

mkdir mysite; \
cd mysite; \
npm install pushstate-server --save; \
mkdir app; \
touch app/index.html; \
echo '<h1>Hello World</h1>' > app/index.html; \
touch server.js; \
echo "var server = require('pushstate-server');server.start({ port: 3000, directory: './app' });" > server.js; \
node server.js

Откройте браузер и перейдите по адресу http: // localhost: 3000 . Выполнено.

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

cyberwombat
источник
2
Если у вас уже есть статика, вы можете просто использовать следующее:npm install pushstate-server --save; touch server.js; echo "var server = require('pushstate-server');server.start({ port: 3000, directory: './' });" > server.js; node server.js
Поворот
4

Уже есть несколько отличных решений для простого nodejs server. Существует еще одно решение, если вам нужно, live-reloadingпоскольку вы вносили изменения в свои файлы.

npm install lite-server -g

перейдите в свой каталог и сделайте

lite-server

он откроет браузер для вас с живой перезагрузкой.

lokeshjain2008
источник
4

Экспресс-функция sendFile делает именно то, что вам нужно, и, так как вы хотите, чтобы функциональность веб-сервера от узла, экспресс-контроль становится естественным выбором, и тогда обслуживание статических файлов становится таким же простым, как:

res.sendFile('/path_to_your/index.html')

читайте больше здесь: https://expressjs.com/en/api.html#res.sendFile

Небольшой пример с экспресс-веб-сервером для узла:

var express = require('express');
var app = express();
var path = require('path');

app.get('/', function(req, res) {
    res.sendFile(path.join(__dirname + '/index.html'));
});

app.listen(8080);

запустите его и перейдите по адресу http: // localhost: 8080

Чтобы расширить это, чтобы позволить вам обслуживать статические файлы, такие как CSS и изображения, вот еще один пример:

var express = require('express');
var app = express();
var path = require('path');

app.use(express.static(__dirname + '/css'));

app.get('/', function(req, res) {
    res.sendFile(path.join(__dirname + '/index.html'));
});

app.listen(8080);

поэтому создайте подпапку с именем css, поместите в нее свой статический контент, и он будет доступен для вашего index.html для удобства, например:

<link type="text/css" rel="stylesheet" href="/css/style.css" />

Обратите внимание на относительный путь в href!

вуаля!

Младен Оршолич
источник
3

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

'use strict';

var finalhandler = require('finalhandler');
var http = require('http');
var serveIndex = require('serve-index');
var serveStatic = require('serve-static');
var appRootDir = require('app-root-dir').get();
var log = require(appRootDir + '/log/bunyan.js');

var PORT = process.env.port || 8097;

// Serve directory indexes for reports folder (with icons)
var index = serveIndex('reports/', {'icons': true});

// Serve up files under the folder
var serve = serveStatic('reports/');

// Create server
var server = http.createServer(function onRequest(req, res){
    var done = finalhandler(req, res);
    serve(req, res, function onNext(err) {
    if (err)
        return done(err);
    index(req, res, done);
    })
});


server.listen(PORT, log.info('Server listening on: ', PORT));
Абу Шумон
источник
2

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

sudo npm install ripple-emulator -g

С этого момента просто введите каталог ваших HTML-файлов и запустите

ripple emulate

затем измените устройство на Nexus 7 ландшафт.

Helzgate
источник
5
Какое отношение имеет Nexus 7 к этому?
Waeltken
2

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

var http = require('http'),
url = require('url'),
path = require('path'),
fs = require('fs');

var mimeTypes = {
  "html": "text/html",
  "mp3":"audio/mpeg",
  "mp4":"video/mp4",
  "jpeg": "image/jpeg",
  "jpg": "image/jpeg",
  "png": "image/png",
  "js": "text/javascript",
  "css": "text/css"};

http.createServer(function(req, res) {
    var uri = url.parse(req.url).pathname;
    var filename = path.join(process.cwd(), uri);
    fs.exists(filename, function(exists) {
        if(!exists) {
            console.log("not exists: " + filename);
            res.writeHead(200, {'Content-Type': 'text/plain'});
            res.write('404 Not Found\n');
            res.end();
            return;
        }
        var mimeType = mimeTypes[path.extname(filename).split(".")[1]];
        res.writeHead(200, {'Content-Type':mimeType});

        var fileStream = fs.createReadStream(filename);
        fileStream.pipe(res);

    }); //end path.exists
}).listen(1337);

Теперь перейдите в браузер и откройте следующее:

http://127.0.0.1/image.jpg

Здесь image.jpgдолжно быть в том же каталоге, что и этот файл. Надеюсь, это поможет кому-то :)

Kaushal28
источник
Вы не должны угадывать MIME-тип из имени файла.
mwieczorek
Примечание: fs.exists () устарела, fs.existsSync () - прямая замена.
JWAspin
@mwieczorek как это должно быть предсказано? Вы скучали по тому, что он разделяет расширение файла?
Джеймс Ньютон
Может потребоваться: let mimeType = mimeTypes [filename.split ("."). Pop ()] || "application / octet-stream"
Джеймс Ньютон,
1

Я также могу порекомендовать SugoiJS, он очень прост в настройке и дает возможность начать писать быстро и имеет отличные функции.

Посмотрите здесь, чтобы начать: http://demo.sugoijs.com/ , документация: https://wiki.sugoijs.com/

Он имеет декораторы обработки запросов, декораторы политик запросов и политик авторизации.

Например:

import {Controller,Response,HttpGet,RequestParam} from "@sugoi/server";

@Controller('/dashboard')
export class CoreController{
    constructor(){}

    @HttpGet("/:role")
    test(@RequestParam('role') role:string,
         @RequestHeader("role") headerRole:string){
        if(role === headerRole )
            return "authorized";
        else{
            throw new Error("unauthorized")
        }
    }
}
Gen4ik
источник
1

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

Конечно, сначала установите node.js. Потом:

> # module with zero dependencies
> npm install -g @kawix/core@latest 
> # change /path/to/static with your folder or empty for current
> kwcore "https://raw.githubusercontent.com/voxsoftware/kawix-core/master/example/npmrequire/express-static.js" /path/to/static

Здесь содержимое " https://raw.githubusercontent.com/voxsoftware/kawix-core/master/example/npmrequire/express-static.js " (вам не нужно скачивать его, я написал для понимания, как работает позади)

// you can use like this:
// kwcore "https://raw.githubusercontent.com/voxsoftware/kawix-core/master/example/npmrequire/express.js" /path/to/static
// kwcore "https://raw.githubusercontent.com/voxsoftware/kawix-core/master/example/npmrequire/express.js" 

// this will download the npm module and make a local cache
import express from 'npm://express@^4.16.4'
import Path from 'path'

var folder= process.argv[2] || "."
folder= Path.resolve(process.cwd(), folder)
console.log("Using folder as public: " + folder)

var app = express() 
app.use(express.static(folder)) 
app.listen(8181)
console.log("Listening on 8181")
Джеймс Суарес
источник