Я хочу запустить очень простой HTTP-сервер. Каждый запрос GET на example.com
должен получать index.html
для него, а как обычную HTML-страницу (т.е. Тот же опыт, что и при обычных веб-страницах).
Используя приведенный ниже код, я могу прочитать содержимое index.html
. Как я могу служить index.html
в качестве обычной веб-страницы?
var http = require('http');
var fs = require('fs');
var index = fs.readFileSync('index.html');
http.createServer(function (req, res) {
res.writeHead(200, {'Content-Type': 'text/plain'});
res.end(index);
}).listen(9615);
Одно из приведенных ниже предложений является сложным и требует, чтобы я написал строку get
для каждого ресурса (CSS, JavaScript, изображения), который я хочу использовать.
Как я могу обслуживать одну страницу HTML с некоторыми изображениями, CSS и JavaScript?
Самый простой сервер Node.js - это просто:
$ npm 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+ вилок этого проекта:
Световой сервер: альтернатива автоматического обновления
Хорошей альтернативой 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 теперь включают веб-сервер, который будет следить за вашими исходными файлами и автоматически обновлять вашу веб-страницу при их изменении.
В с открытым исходным кодом текстовый редактор Кронштейны также включает в себя статический веб - сервер NodeJS. Просто откройте любой файл HTML в скобках, нажмите "Live Preview", и он запустит статический сервер и откроет ваш браузер на странице. Браузер будет автоматически обновляться при каждом изменении и сохранении HTML файла. Это особенно полезно при тестировании адаптивных веб-сайтов. Откройте HTML-страницу на нескольких браузерах/размерах окна/устройствах. Сохраните свою HTML-страницу и мгновенно посмотрите, работает ли ваш адаптивный материал, поскольку все они автоматически обновляются.
Разработчики PhoneGap
Если вы кодируете гибридное мобильное приложение, вам может быть интересно узнать, что команда PhoneGap приняла эту концепцию автоматического обновления на борту с помощью своего нового приложения PhoneGap. Это универсальное мобильное приложение, которое может загружать файлы HTML5 с сервера во время разработки. Это очень тонкий трюк, так как теперь вы можете пропустить медленные шаги компиляции/развертывания в вашем цикле разработки для мобильных мобильных приложений, если вы меняете файлы JS/CSS/HTML - это то, что вы делаете большую часть времени. Они также предоставляют статический веб-сервер NodeJS (запуск phonegap serve
), который обнаруживает изменения файлов.
PhoneGap + Sencha Touch Developers
В настоящее время я активно адаптировал приложение для статического сервера PhoneGap и приложение PhoneGap для разработчиков Sencha Touch & jQuery Mobile. Проверьте это в Sencha Touch Live. Поддерживает QR-коды --qr и --localtunnel, которые проксируют ваш статический сервер с вашего настольного компьютера на URL-адрес вне вашего брандмауэра! Тонны использования. Массовое ускорение для гибридных мобильных разработчиков.
Кордова + разработчики ионных рамок
Функции локального сервера и автоматического обновления выпекаются в ionic
инструменте. Просто запустите ionic serve
из папки вашего приложения. Еще лучше... ionic serve --lab
для просмотра автоматического обновления боковых представлений как iOS, так и Android.
npm install live-server -g
если вы хотите то же самое, но с автоматической перезагрузкой при обнаружении изменения файла
http-server -a localhost
Для этого вы можете использовать Connect и ServeStatic с Node.js:
Установите соединение и обслуживайте статические с NPM
$ npm install connect serve-static
Создайте файл server.js со следующим содержимым:
var connect = require('connect');
var serveStatic = require('serve-static');
connect().use(serveStatic(__dirname)).listen(8080, function(){
console.log('Server running on 8080...');
});
Запустить с Node.js
$ node server.js
Теперь вы можете перейти на http://localhost:8080/yourfile.html
Проверьте gist. Я воспроизвожу его здесь для справки, но суть была регулярно обновлена.
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");
Вам не нужен экспресс. Вам не нужно подключаться. 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 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)
Я думаю, что часть, которую вы сейчас упускаете, это то, что вы отправляете:
Content-Type: text/plain
Если вы хотите, чтобы веб-браузер отображал HTML, вы должны изменить его на:
Content-Type: text/html
Шаг1 (внутри командной строки [надеюсь, вы cd TO YOUR FOLDER]): 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
Быстрый способ:
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);
Вместо того, чтобы иметь дело с оператором switch, я думаю, что более аккуратно искать тип контента из словаря:
var contentTypesByExtension = {
'html': "text/html",
'js': "text/javascript"
};
...
var contentType = contentTypesByExtension[fileExtension] || 'text/plain';
Это в основном обновленная версия принятого ответа для подключения версии 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 будет использоваться по умолчанию.
Вам не нужно использовать какие-либо модули NPM для запуска простого сервера, там очень маленькая библиотека под названием " NPM Free Server" для Node:
50 строк кода, выходы, если вы запрашиваете файл или папку, и придает ему красный или зеленый цвет, если он не сработал. Менее 1 КБ в размере (уменьшено).
var filename = path.join(process.cwd() + '/dist/', uri);
на сервер из папки dist . Я помещаю код в server.js
и он просто работает, когда я server.js
npm start
если на вашем ПК установлен node, возможно, у вас есть NPM, если вам не нужен материал NodeJS, вы можете использовать serve для этого:
1 - установите пакет на ПК:
npm install -g serve
2 - Подайте свою статическую папку:
serve <path>
d:> serve d:\StaticSite
Он покажет вам, какой порт используется для вашей статической папки, просто перейдите к хосту, например:
http://localhost:3000
Я нашел интересную библиотеку на 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
в построении пути. Это позволяет указывать имена файлов с пробелами и закодированными символами.
То, как я это делаю, это прежде всего установить статический сервер node глобально через
npm install node-static -g
затем перейдите в каталог, содержащий ваши html файлы, и запустите статический сервер с помощью static
.
Перейдите в браузер и введите localhost:8080/"yourHtmlFile"
.
Node.js sample app Node Чат имеет необходимую функциональность.
В нем README.textfile
3. Шаг - это то, что вы ищете.
шаг1
- создать сервер, который отвечает на мир приветствия на порту 8002
step2
- создать index.html и выполнить его
step3
- ввести util.js
- изменить логику, чтобы обслуживался любой статический файл
- показать 404 в случае, если файл не найден.
step4
- добавить jquery-1.4.2.js
- добавить client.js
- изменить index.html, чтобы пригласить пользователя для прозвища
Вот server.js
Вот util.js
.readFileSync
в .readFileSync
. С node.js мы используем неблокирующий ввод-вывод. Пожалуйста, не рекомендуйте Sync
команды.
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>
В основном копирование принятого ответа, но не создание js файла.
$ node
> var connect = require('connect'); connect().use(static('.')).listen(8000);
Обнаружено, что это очень удобно.
Как и в последней версии Express, service-static становится отдельным промежуточным программным обеспечением. Используйте это для обслуживания:
require('http').createServer(require('serve-static')('.')).listen(3000)
Сначала установите serve-static
.
Я не уверен, что это именно то, что вы хотели, однако вы можете попробовать изменить:
{'Content-Type': 'text/plain'}
:
{'Content-Type': 'text/html'}
В этом случае клиент браузера отобразит файл как html вместо обычного текста.
Я использую ниже код для запуска простого веб-сервера, который отображает файл 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.
Согласиться с утверждением " Нет типа содержимого лучше, чем неправильный"
Сумасшедшее количество сложных ответов здесь. Если вы не собираетесь обрабатывать nodeJS файлы/базу данных, а просто хотите обслуживать статические html/css/js/images по вашему запросу, просто установите pushstate-server или аналогичный;
Вот "один лайнер", который создаст и запустит мини-сайт. Просто вставьте этот весь блок в свой терминал в соответствующий каталог.
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
в качестве корня для работы с файлами. Чтобы добавить дополнительные активы, просто поместите их в этот каталог.
npm install pushstate-server --save; touch server.js; echo "var server = require('pushstate-server');server.start({ port: 3000, directory: './' });" > server.js; node server.js
Немного более verbose 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 !")
Уже существует несколько отличных решений для простого nodejs server
.
Существует еще одно решение, если вам нужно live-reloading
, когда вы вносили изменения в свои файлы.
npm install lite-server -g
перейдите в каталог и сделайте
lite-server
он откроет браузер для вас с живой перезагрузкой.
В большинстве приведенных выше ответов очень хорошо описывается, как содержимое подается. То, что я рассматривал как дополнительный, было перечислением каталога, чтобы можно было просмотреть другое содержимое каталога. Вот мое решение для дальнейших читателей:
'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));
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'
Content-Type
должен быть text/html
, так как он определен следующим образом: Content-Type := type "/" subtype *[";" parameter]
.
Это одно из самых быстрых решений, которое я использую для быстрого просмотра веб-страниц.
sudo npm install ripple-emulator -g
С этого момента просто введите каталог ваших html файлов и запустите
ripple emulate
затем измените устройство на ландшафт Nexus 7.
Я также могу порекомендовать 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")
}
}
}
от 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 с диска
Более простая версия, с которой я столкнулся, выглядит следующим образом. Для образовательных целей это лучше всего, потому что в нем нет абстрактных библиотек.
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
должен находиться в том же каталоге, что и этот файл.
Надеюсь, это поможет кому-то:)