Використання 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?


21
Погляньте на модуль npm "підключити". Він забезпечує такий базовий функціонал і є основою багатьох установок та інших пакетів.
Мерре

5
Ви повинні поставити своє рішення як відповідь і позначити його правильним.
graham.reeds

8
Мені вдалося знайти ідеальне рішення Ерік Б. Соуелл під назвою Обслуговування статичних файлів від вузла js . Прочитайте всю річ. Настійно рекомендується.
ідофір

1
Погляньте на модуль, який я написав під назвою Cachemere. Він також автоматично кешує всі ваші ресурси. github.com/topcloud/cachemere
Jon

1
Локальний веб-сервер - це хороший приклад
Ллойд

Відповіді:


992

Найпростіший сервер Node.js - це просто:

$ npm install http-server -g

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

$ cd MyApp

$ http-server

Якщо ви використовуєте NPM 5.2.0 або новішу версію, ви можете використовувати її http-serverбез встановлення npx. Це не рекомендується для використання у виробництві, але це чудовий спосіб швидкого запуску сервера на localhost.

$ npx http-server

Або ви можете спробувати це, що відкриває ваш веб-браузер і дозволяє запити CORS:

$ http-server -o --cors

Щоб отримати додаткові варіанти, перегляньте документацію http-serverна GitHub або запустіть:

$ http-server --help

Безліч інших приємних функцій і простого мозку-простого розгортання до NodeJitsu.

Особливості вилки

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

Легкий сервер: автоматична освіжаюча альтернатива

Гарна альтернатива - 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-сервер може бути тим, що ви шукаєте.

Автомобільні оновлення редакторів

Більшість редакторів веб-сторінок та інструментів IDE тепер включає веб-сервер, який буде дивитися ваші вихідні файли та автоматично оновлювати вашу веб-сторінку при їх зміні.

Я використовую Live Server з кодом Visual Studio.

У відкритій вихідному текстовому редакторі Кронштейни також включає в себе NodeJS статичного веб - сервер. Просто відкрийте будь-який HTML-файл у дужках, натисніть " Попередній перегляд ", і він запустить статичний сервер і відкриє ваш браузер на сторінці. Веб-переглядач ** автоматично оновлюватиметься кожного разу, коли ви редагуєте та зберігаєте HTML-файл. Це особливо корисно при тестуванні адаптивних веб-сайтів. Відкрийте сторінку HTML у кількох браузерах / розмірах вікон / пристроях. Збережіть сторінку HTML і миттєво побачити , якщо ваш адаптивний матеріал працює , як вони все автообновления.

Developer PhoneGap

Якщо ви кодуєте гібридний мобільний додаток , можливо, вам буде цікаво знати, що команда PhoneGap взяла на озброєння цю концепцію автоматичного оновлення разом із новим додатком PhoneGap . Це загальний мобільний додаток, який може завантажувати файли HTML5 з сервера під час розробки. Це дуже хитра хитрість, оскільки тепер ви можете пропустити повільні кроки компіляції / розгортання у вашому циклі розвитку для гібридних мобільних додатків, якщо ви змінюєте файли JS / CSS / HTML - саме цим ви займаєтеся більшу частину часу. Вони також надають статичний веб-сервер NodeJS (запуск phonegap serve), який виявляє зміни файлів.

Розробники PhoneGap + Sencha Touch

Зараз я широко адаптував статичний сервер PhoneGap та додаток для розробників PhoneGap для розробників Sencha Touch & jQuery Mobile. Перевірте це на Sencha Touch Live . Підтримує --qr QR-коди та --localtunnel, який проксі-сервер передає ваш статичний сервер з настільного комп’ютера до URL-адреси за межами брандмауера! Тон використання. Масивна швидкість для гібридних мобільних розробників.

Cordova + Ionic Framework Developers

Функції локального сервера та автоматичного оновлення вкладаються в ionicінструмент. Просто запустіть ionic serveіз папки додатків. Ще краще ... ionic serve --labдля перегляду автоматичного оновлення поруч із iOS та Android.


9
npm install live-server -g якщо ви хочете те ж саме, але з автоматичним перезавантаженням, коли виявить зміну файлу

3
Один маленький "gotcha" -. http-сервер за замовчуванням обслуговує сайт на рівні 0,0.0.0. Тому ви ОБОВ'ЯЗКОВО вкажіть IP-адресу, щоб вона працювала належним чином як локальний тестовий сервер:http-server -a localhost
JESii,

1
Так ... 0.0.0.0 змусить прив'язуватися до ВСІХ IP-адрес усіх ваших IP-мережних пристроїв (WiFi, кабель, Bluetooth), що є поганою ідеєю у будь-якій публічній мережі, оскільки ви, можливо, можуть отримати злом. Це не так вже й погано, якщо ви просто хотіли демонструвати свій додаток у безпечній пожежній стіні, щоб показати іншим або підключити його до свого мобільного пристрою в тій самій мережі.
Тоні О'Хаган

Дійсно корисний маленький інструмент. У мене на сервері працює багато додатків Node, тому я додаю опцію "-p", щоб вибрати порт, відмінний від 8080. Наприклад: nohup http-server -p 60080 & (запускає його у фоновому режимі і дозволяє відключитися від сеанс оболонки.) Ви повинні переконатися, що порт відкритий для світу, наприклад: iptables -I INPUT 1 -p tcp --dport 60090 -j ACCEPT (для багатьох систем 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.
ідофір

135
Частина Express, яка обслуговує статичний файл, - це просто Connect, тому я не бачу причини використовувати Express для подання статичних файлів. Але так, також Express зробить роботу.
Gian Marco Gherardi

7
Відмінна порада. Наведені вище дії дуже добре працювали в моїх цілях. Завдяки Джан, ось посилання на Express, де він виявляє, що він побудований на Connect, expressjs.com Ось як користуватися Express: expressjs.com/guide.html
Джек Стоун,

10
Не працює для мене, результат не вдається отримати /test.html. Чи слід замінити __dirname на ім'я каталогу?
Тимо

3
Тепер, з'єднання змінилося на версію 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. Я сам користувався цим. Використання читання / запису в "двійковому" режимі не є проблемою. Це просто означає, що файл не інтерпретується як текст бібліотекою файлів і не має відношення до типу вмісту, повернутого у відповіді.

Проблема з вашим кодом полягає в тому, що ви завжди повертаєте тип вмісту "текст / звичайна". Наведений вище код не повертає жодного типу вмісту, але якщо ви просто використовуєте його для 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)

3
Якщо я не помиляюся, це рішення не піклується про тип кодування, тому запити для сторінок і зображень HTML отримуватимуть однакове кодування. Чи не так?
ідофір

2
@idophir Найчастіше кодування не має значення, браузери визначають його на основі використовуваних тегів html або іншої інформації, або вони гадають дуже добре. Як і хтось із вищезгаданих, жоден тип MIME не є кращим від неправильного. Ви, звичайно, можете використовувати щось на кшталт node-mime, щоб визначити типи файлів mime, але цілком сумісний веб-сервер http не входить у сферу цього питання.
BT

1
@Rooster Вам не потрібно нічого особливого - просто node thisfile.js. Він працюватиме, прослуховуючи нові з'єднання та повертаючи нові результати, доки А. не закриється сигналом, або Б. якась шалена помилка якось не спричинить припинення програми.
BT

1
@Rooster Ще одного демонізатора деякої репутації можна знайти на сайті github.com/Unitech/pm2
Людина, що подорожує

1
Мені подобається ця відповідь найкраще, але є два питання: 1) Він повертає 200, коли повинен повернути 404; щоб виправити дзвінок writeHead (200) всередині "відкритого" зворотного дзвінка. 2) Якщо є помилка, розетку залишають відкритою; щоб виправити виклик response.destroy () у зворотній зв'язок "помилка".
Пол Браннан

70

Я думаю, що частина, якої ти зараз бракує, це те, що ти надсилаєш:

Content-Type: text/plain

Якщо ви хочете, щоб веб-браузер передавав HTML-код, слід змінити це на:

Content-Type: text/html

Дякуємо за швидку відповідь. Сторінка завантажується, але без CSS. Як я можу отримати стандартну сторінку HTML із завантаженими CSS та JS?
ідофір

20
Потрібно розпочати розширення цього сервера. Зараз він знає лише, як обслуговувати index.html - вам потрібно навчити його обслуговувати foo.css і foo.js зараз, використовуючи власні типи MIME.
clee

1
Якщо ви не хочете подавати статичні файли, ви можете передати css у <style>тег.
Кіт

1
Через дев'ять років це дійсно слід сприймати як правильну відповідь.
rooch84

46

Крок1 (всередині командного рядка [я сподіваюся, що ви CD у ВАШИЙ папці]): 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. ви можете мені сказати
Vinoth

@Vinoth так, існує багато способів. Яка точна мета та мета, я можу вам допомогти
СТАЛІ

@steel Я хочу запустити сервер автоматично, не даючи сервер вузлів у командному рядку. це моя вимога, чи можливо ви можете сказати мені якийсь приклад
Vinoth

Вам потрібно буде скористатися деяким інструментом на зразок ThoughtWorks GO, який може виконувати команди Terminal з клацання у браузері.
СТАЛЬ

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

Замість того, щоб мати справу з оператором переключення, я думаю, що це більш охайно шукати тип вмісту зі словника:

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

...

    var contentType = contentTypesByExtension[fileExtension] || 'text/plain';

Так, виглядає набагато більш елегантно, ніж рішення «перемикання», яке використовує Ерік Б. Соуелл (див. Обрану відповідь). Дякую.
ідофір

Ця відповідь повністю поза контекстом ... Він посилається на це посилання в цьому коментарі - 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 служив за замовчуванням.


13

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

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


Відмінний вибір. Обслуговує html, css, js та зображення. Чудово підходить для налагодження. Просто замініть цей код таким, який є для вашого server.js.
pollaris

2
Я б хотів, щоб я міг додати більше матеріалів Це чудово! Я змінив var filename = path.join(process.cwd() + '/dist/', uri); сервер із папки dist . Я вставлю код, server.jsі він просто працює, коли я npm start
набираю

Як запустити його як службу, так що я можу використовувати її навіть, закриваючи командний рядок. Чи є якийсь інструмент, що надає такого роду, якщо не це.
Сандіп піщаний

13

якщо на вашому ПК встановлений вузол, ймовірно, у вас є NPM, якщо вам не потрібні речі NodeJS, ви можете використовувати службу пакет для цього:

1 - Встановіть пакет на свій ПК:

npm install -g serve

2 - Подавайте свою статичну папку:

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

Він покаже вам, в якому порту подається ваша статична папка, просто перейдіть до хоста, як-от:

http://localhost:3000

Як запустити його як службу, так що я можу використовувати її навіть, закриваючи командний рядок. Чи є якийсь інструмент, що надає такого роду, якщо не це.
Сандіп піщаний

Це має бути прийнятою відповіддю. Тому що його найпростіше, і воно працює поза коробкою. Таким чином, якщо ви запускаєте сервіс лише без шляху, він запустить сервер із поточної папки (тієї, де у вас був CD-ed раніше).
Ігор Рајачич

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функцію в побудові шляху. Це дозволить створити назви файлів з пробілами та кодованими символами.


8

Редагувати:

Зразок програми Node.js Node Chat має потрібну функціональність.
У ньому є README.textfile
3. Крок - це те, що ви шукаєте.

крок 1

  • створити сервер, який відповідає з привітним світом на порту 8002

крок2

  • створити index.html та обслуговувати його

step3

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

крок4

  • додати jquery-1.4.2.js
  • додати client.js
  • змінити index.html, щоб запросити користувача на прізвисько

Ось сервер.js

Ось util.js


5
Мені все одно. У мене є лише index.html. Я просто хочу завантажувати html + css + js. Дякую!
ідофір

16
-1 для .readFileSyncзворотного дзвінка. З node.js ми використовуємо неблокуючий IO. Будь ласка, не рекомендуйте Syncкоманди.
Райнос

Привіт @krmby, дякую за спробу допомогти. Я справді новачок у цьому. Я завантажив і server.js, і util.js. Коли я запускаю "node server.js" і намагаюся отримати доступ до сторінки за допомогою браузера, я отримую цю помилку: TypeError: Об'єкт # <ServerResponse> не має методу "закрити" за адресою /var/www/hppy-site/util.js : 67: 8 за адресою /var/www/hppy-site/util.js:56:10 на [об’єкт об’єкта]. <Анонімний> (fs.js: 107: 5) у [об'єкт] .emit (events.js : 61: 17) у afterRead (fs.js: 970: 12) у обгортці (fs.js: 245: 17) Будь-які ідеї? BTW - те ж саме відбувається, коли я завантажую ваш проект і запускаю його.
ідофір

1
Вибачте. Я використовував нову версію. Замінено res.close () на res.end ()
ідофір

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 сервіс-статичний став окремим проміжним програмним забезпеченням. Використовуйте це для подачі:

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

Встановіть serve-staticспочатку.


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: // localhost: 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.

Погодьтеся з твердженням " Жоден тип вмісту не кращий від неправильного "


5

Я не впевнений, що це саме те, що ви хотіли, проте спробуйте змінити:

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

до цього:

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

Це призведе до того, що клієнт браузера відображатиме файл у вигляді HTML, а не простого тексту.


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'

6
Content-TypeПовинно бути text/html, так як вона визначається таким чином: Content-Type := type "/" subtype *[";" parameter].
t.niese

1
це, здається, перетворить усі мої файли в цій папці на тип html, навіть якщо це js ...
ahnbizcad

Чудово працює ....
присмак вишні

4

Трохи більш детальна версія Express 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 . Зроблено.

Сервер використовуватиме appdir як корінь для обслуговування файлів. Щоб додати додаткові активи, просто помістіть їх у цей каталог.


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

він відкриє браузер для вас з перезавантаженням в реальному часі.


4

Функція ExpressFailFileFile робить саме те, що вам потрібно, і оскільки ви хочете, щоб функціональність веб-сервера від вузла, Express стає природним вибором, а потім подання статичних файлів стає таким же простим, як:

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.


5
Що з цим має Todos 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має бути той самий каталог, що і цей файл. Сподіваюсь, це комусь допоможе :)


Ви не повинні божествувати типу mime від імені файлу.
mwieczorek

Примітка: fs.exists () застаріло, fs.existsSync () є прямою заміною.
JWAspin

@mwieczorek як слід розказувати? Ви пропустили, що він розщеплює розширення файлу?
Джеймс Ньютон

Можна використовувати: нехай mimeType = mimeTypes [filename.split ("."). Pop ()] || "додаток / октет-потік"
Джеймс Ньютон

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")
        }
    }
}

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")
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.