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