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

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

1041 голосов
/ 22 мая 2011

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

Ответы [ 30 ]

935 голосов
/ 08 декабря 2011

Вы можете использовать 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, function(){
    console.log('Server running on 8080...');
});

  3. Запуск с Node.js 

    $ node server.js

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

921 голосов
/ 17 апреля 2014

Самый простой сервер 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.

Функциональные вилы

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

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

Хорошей альтернативой 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-страницу и сразу посмотрите, работает ли ваш адаптивный материал, так как он all автообновляется.

PhoneGap Developers

Если вы кодируете гибридное мобильное приложение , вам может быть интересно узнать, что команда PhoneGap взяла на вооружение эту концепцию автоматического обновления со своим новым PhoneGap App . Это универсальное мобильное приложение, которое может загружать файлы HTML5 с сервера во время разработки. Это очень хитрый трюк, поскольку теперь вы можете пропустить медленные этапы компиляции / развертывания в цикле разработки для гибридных мобильных приложений, если вы изменяете файлы JS / CSS / HTML - это то, что вы делаете большую часть времени. Они также предоставляют статический веб-сервер NodeJS (запуск phonegap serve), который обнаруживает изменения файла.

PhoneGap + Sencha Touch Developers

Я теперь широко адаптировал статический сервер 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.

157 голосов
/ 30 ноября 2012

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

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 файлы.Я использовал это сам.Использование чтения / записи в «бинарном» режиме не проблема.Это просто означает, что файл не интерпретируется как текст библиотекой файлов и не связан с типом содержимого, возвращаемым в ответе.

Проблема с вашим кодом заключается в том, что вы всегда возвращаете тип содержимого«текст / обычный».Приведенный выше код не возвращает какой-либо тип содержимого, но если вы просто используете его для 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");
92 голосов
/ 14 октября 2014

Вам не нужно экспресс.Вам не нужно подключаться.Node.js делает http НАТУРАЛЬНО.Все, что вам нужно сделать, это вернуть файл в зависимости от запроса: 

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)
67 голосов
/ 22 мая 2011

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

Content-Type: text/plain

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

Content-Type: text/html
44 голосов
/ 24 февраля 2013

Шаг 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

29 голосов
/ 07 февраля 2016

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

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 голосов
/ 25 ноября 2011

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

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

...

    var contentType = contentTypesByExtension[fileExtension] || 'text/plain';
15 голосов
/ 20 июня 2014

Это в основном обновленная версия принятого ответа для подключения версии 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 служил по умолчанию.

13 голосов
/ 09 ноября 2015

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

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

Страница:
...