node.js - servidor - node js tutorial
Usando node.js como un servidor web simple (26)
Quiero ejecutar un servidor HTTP muy simple. Cada solicitud GET a example.com debe recibir index.html , pero como una página HTML normal (es decir, la misma experiencia que cuando lees páginas web normales).
Utilizando el siguiente código, puedo leer el contenido de index.html . ¿Cómo sirvo index.html como una página web normal?
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);
Una de las sugerencias a continuación es complicada y requiere que escriba una línea de get para cada archivo de recursos (CSS, JavaScript, imágenes) que quiera usar.
¿Cómo puedo servir una sola página HTML con algunas imágenes, CSS y JavaScript?
Editar:
La aplicación de ejemplo Node.js Node Chat tiene la funcionalidad que desea.
En su README.textfile
3. Paso es lo que buscas.
paso 1
- cree un servidor que responda con hello world en el puerto 8002
paso 2
- crear un index.html y servirlo
paso 3
- introducir util.js
- Cambia la lógica para que se sirva cualquier archivo estático.
- mostrar 404 en caso de que no se encuentre ningún archivo
etapa 4
- añadir jquery-1.4.2.js
- agregar cliente.js
- cambiar index.html para pedirle al usuario un apodo
Aquí está el server.js
Aquí está el util.js
Básicamente copiando la respuesta aceptada, pero evitando crear un archivo js.
$ node
> var connect = require(''connect''); connect().use(static(''.'')).listen(8000);
Lo encontré muy conveniente.
Actualizar
A partir de la última versión de Express, serve-static se ha convertido en un middleware separado. Use esto para servir:
require(''http'').createServer(require(''serve-static'')(''.'')).listen(3000)
Instale el serve-static primero.
Cantidad de respuestas complicadas aquí. Si no tiene la intención de procesar los archivos / base de datos nodeJS, solo desea servir html / css / js / images como su pregunta sugiere, simplemente instale el pushstate-server o similar;
Aquí hay un "one liner" que creará y lanzará un mini sitio. Simplemente pegue todo el bloque en su terminal en el directorio apropiado.
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
Abra el navegador y vaya a http: // localhost: 3000 . Hecho.
El servidor usará el directorio de la app como la raíz para servir los archivos. Para agregar activos adicionales simplemente colóquelos dentro de ese directorio.
Creo que la parte que te estás perdiendo ahora es que estás enviando:
Content-Type: text/plain
Si desea que un navegador web represente el HTML, debe cambiarlo a:
Content-Type: text/html
Echa un vistazo a esta gist . Lo estoy reproduciendo aquí como referencia, pero la esencia se ha actualizado periódicamente.
Servidor web de archivos estáticos Node.JS. Póngalo en su ruta para encender servidores en cualquier directorio, tome un argumento de puerto opcional.
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");
Actualizar
El gist maneja archivos css y js. Lo he usado yo mismo. El uso de lectura / escritura en modo "binario" no es un problema. Eso solo significa que el archivo no se interpreta como texto por la biblioteca de archivos y no está relacionado con el tipo de contenido devuelto en la respuesta.
El problema con su código es que siempre está devolviendo un tipo de contenido de "texto / sin formato". El código anterior no devuelve ningún tipo de contenido, pero si solo lo está utilizando para HTML, CSS y JS, un navegador puede inferir que están bien. Ningún tipo de contenido es mejor que uno incorrecto.
Normalmente, el tipo de contenido es una configuración de su servidor web. Lo siento si esto no resuelve su problema, pero funcionó como un servidor de desarrollo simple y pensé que podría ayudar a otras personas. Si necesita tipos de contenido correctos en la respuesta, debe definirlos explícitamente como tiene joeytwiddle o usar una biblioteca como Connect que tenga valores predeterminados razonables. Lo bueno de esto es que es simple y autónomo (sin dependencias).
Pero siento tu problema. Así que aquí está la solución combinada.
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");
El servidor Node.js más simple es simplemente:
$ npm install http-server -g
Ahora puedes ejecutar un servidor a través de los siguientes comandos:
$ cd MyApp
$ http-server
Si está utilizando NPM 5.2.0 o más reciente, puede usar http-server sin instalarlo con npx . Esto no se recomienda para uso en producción, pero es una excelente manera de hacer que un servidor se ejecute rápidamente en localhost.
$ npx http-server
O bien, puede probar esto, que abre su navegador web y habilita las solicitudes CORS:
$ http-server -o --cors
Para obtener más opciones, consulte la documentación de http-server en GitHub o ejecute:
$ http-server --help
Muchas otras características interesantes y una implementación sencilla para NodeJitsu.
Horquillas
Por supuesto, puedes recargar fácilmente las características con tu propio tenedor. Es posible que descubra que ya se realizó en una de las más de 800 bifurcaciones de este proyecto:
Light Server: una alternativa de actualización automática
Una buena alternativa al http-server es light-server . Es compatible con la visualización de archivos y la actualización automática y muchas otras características.
$ npm install -g light-server
$ light-server
Agregue a su menú contextual de directorio en el Explorador de Windows
reg.exe add HKCR/Directory/shell/LightServer/command /ve /t REG_EXPAND_SZ /f /d "/"C:/nodejs/light-server.cmd/" /"-o/" /"-s/" /"%V/""
Servidor JSON REST simple
Si necesita crear un servidor REST simple para un proyecto prototipo, entonces json-server puede ser lo que está buscando.
Editores de actualización automática
La mayoría de los editores de páginas web y las herramientas IDE ahora incluyen un servidor web que vigilará sus archivos fuente y actualizará automáticamente su página web cuando cambien.
El editor de texto de código abierto Brackets también incluye un servidor web estático NodeJS. Simplemente abra cualquier archivo HTML en corchetes, presione " Vista previa en vivo ", se iniciará un servidor estático y abrirá su navegador en la página. El navegador ** se actualizará automáticamente cada vez que edite y guarde el archivo HTML. Esto es especialmente útil cuando se prueban sitios web adaptativos. Abra su página HTML en múltiples navegadores / tamaños de ventana / dispositivos. Guarde su página HTML y vea al instante si sus cosas adaptativas funcionan, ya que todas se actualizan automáticamente.
Desarrolladores de PhoneGap
Si está codificando una aplicación móvil híbrida , tal vez le interese saber que el equipo de PhoneGap tomó a bordo este concepto de actualización automática con su nueva aplicación PhoneGap . Esta es una aplicación móvil genérica que puede cargar los archivos HTML5 desde un servidor durante el desarrollo. Este es un truco muy ingenioso, ya que ahora puede omitir los pasos de compilación / implementación lentos en su ciclo de desarrollo para aplicaciones móviles híbridas si está cambiando los archivos JS / CSS / HTML, que es lo que está haciendo la mayor parte del tiempo. También proporcionan el servidor web estático NodeJS (ejecutar phonegap serve ) que detecta cambios en los archivos.
Desarrolladores de PhoneGap + Sencha Touch
Ahora he adaptado ampliamente el servidor estático PhoneGap y la aplicación de desarrollador PhoneGap para los desarrolladores de Sencha Touch y jQuery Mobile. Compruébalo en Sencha Touch Live . Admite los códigos QR y qq y el nodo de enlace que distribuye su servidor estático de su computadora de escritorio a una URL fuera de su firewall. Toneladas de usos. Velocidad masiva para desarrolladores móviles híbridos.
Cordova + Ionic Framework Developers
El servidor local y las funciones de actualización automática se incorporan a la herramienta ionic . Simplemente ejecuta el ionic serve desde la carpeta de tu aplicación. Aún mejor ... ionic serve --lab para ver vistas lado a lado de actualización automática tanto de iOS como de Android.
En lugar de tratar con una declaración de cambio, creo que es mejor buscar el tipo de contenido de un diccionario:
var contentTypesByExtension = {
''html'': "text/html",
''js'': "text/javascript"
};
...
var contentType = contentTypesByExtension[fileExtension] || ''text/plain'';
Encontré una biblioteca interesante en npm que podría ser de alguna utilidad para usted. Se llama mime ( npm install mime o https://github.com/broofa/node-mime ) y puede determinar el tipo de mime de un archivo. Aquí hay un ejemplo de un servidor web que escribí usándolo:
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")
Esto servirá para cualquier archivo de texto o imagen normal (.html, .css, .js, .pdf, .jpg, .png, .m4a y .mp3 son las extensiones que he probado, pero en teoría, debería funcionar para todo)
Notas del desarrollador
Aquí hay un ejemplo de salida que obtuve con él:
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
Observe la función unescape en la construcción del camino. Esto es para permitir nombres de archivos con espacios y caracteres codificados.
Esta es básicamente una versión actualizada de la respuesta aceptada para la versión 3 de Connect:
var connect = require(''connect'');
var serveStatic = require(''serve-static'');
var app = connect();
app.use(serveStatic(__dirname, {''index'': [''index.html'']}));
app.listen(3000);
También agregué una opción predeterminada para que index.html se sirva como predeterminado.
Esta es una de las soluciones más rápidas que utilizo para ver rápidamente las páginas web
sudo npm install ripple-emulator -g
A partir de entonces, solo ingrese al directorio de sus archivos html y ejecute
ripple emulate
A continuación, cambie el dispositivo a Nexus 7 paisaje.
La forma en que lo hago es, en primer lugar, instalar el servidor estático de nodo globalmente
npm install node-static -g
luego navegue al directorio que contiene sus archivos html e inicie el servidor static con static .
Vaya al navegador y escriba localhost:8080/"yourHtmlFile" .
La mayoría de las respuestas anteriores describen muy bien cómo se sirven los contenidos. Lo que estaba buscando como adicional era una lista del directorio para que se puedan examinar otros contenidos del directorio. Aquí está mi solución para otros lectores:
''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));
La versión más simple que he encontrado es la siguiente. Para fines educativos, es mejor, porque no utiliza ninguna biblioteca abstracta.
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);
Ahora ve al navegador y abre lo siguiente:
http://127.0.0.1/image.jpg
Aquí image.jpg debería estar en el mismo directorio que este archivo. Espero que esto ayude a alguien :)
No estoy seguro de si esto es exactamente lo que querías, sin embargo, puedes intentar cambiar:
{''Content-Type'': ''text/plain''}
a esto:
{''Content-Type'': ''text/html''}
Esto hará que el cliente del navegador muestre el archivo como html en lugar de texto sin formato.
No necesita utilizar ningún módulo NPM para ejecutar un servidor simple, hay una biblioteca muy pequeña llamada " Servidor libre de NPM " para Nodo:
50 líneas de código, salidas si está solicitando un archivo o una carpeta y le da un color rojo o verde si no funcionó. Menos de 1KB de tamaño (minificado).
No necesitas expreso. No necesitas conectarte. Node.js hace http NATIVELY. Todo lo que necesita hacer es devolver un archivo dependiente de la solicitud:
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)
Un ejemplo más completo que garantiza que las solicitudes no puedan acceder a los archivos que se encuentran debajo de un directorio base, y realiza el manejo adecuado de errores:
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)
Paso 1 (dentro del símbolo del sistema [espero que cd A SU CARPETA]): npm install express
Paso 2: Crea un archivo 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);
Tenga en cuenta que también debe agregar WATCHFILE (o usar nodemon). El código anterior es solo para un servidor de conexión simple.
PASO 3: node server.js o nodemon server.js
Ahora hay un método más sencillo si solo desea alojar un servidor HTTP simple. npm install -g http-server
y abra nuestro directorio y escriba http-server
Puedes usar Connect y ServeStatic con Node.js para esto:
Instalar conectar y servir-estático con NPM
$ npm install connect serve-staticCrea el archivo server.js con este contenido:
var connect = require(''connect''); var serveStatic = require(''serve-static''); connect().use(serveStatic(__dirname)).listen(8080, function(){ console.log(''Server running on 8080...''); });Ejecutar con Node.js
$ node server.js
Ahora puede ir a http://localhost:8080/yourfile.html
Si tiene un nodo instalado en su PC, probablemente tenga el NPM, si no necesita las cosas de NodeJS, puede usar el paquete de serve para esto:
1 - Instala el paquete en tu PC:
npm install -g serve
2 - Servir su carpeta estática:
serve <path>
d:> serve d:/StaticSite
Le mostrará a qué puerto se está sirviendo su carpeta estática, simplemente navegue hasta el host como:
http://localhost:3000
Una versión Express 4.x un poco más detallada, pero que proporciona listas de directorios, compresión, almacenamiento en caché y solicitudes de registro en un número mínimo de líneas
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 !")
Uso el siguiente código para iniciar un servidor web simple que renderiza el archivo html predeterminado si no se menciona ningún archivo en la 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);
Mostrará todos los archivos js, css y de imagen, junto con todo el contenido html.
De acuerdo con la declaración " Ningún tipo de contenido es mejor que uno incorrecto "
Ya hay algunas grandes soluciones para un nodejs server simple. Hay una solución más si necesita live-reloading medida que realiza cambios en sus archivos.
npm install lite-server -g
navegar por su directorio y hacer
lite-server
se abrirá el navegador para usted con la recarga en vivo.
de w3schools
es bastante fácil crear un servidor de nodo para servir cualquier archivo solicitado, y no es necesario instalar ningún paquete para él
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
servirá file.html desde el disco
La forma rápida:
var express = require(''express'');
var app = express();
app.use(''/'', express.static(__dirname + ''/../public'')); // ← adjust
app.listen(3000, function() { console.log(''listening''); });
A tu manera:
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);
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);
Creo que estás buscando esto. En su index.html, simplemente llénelo con el código html normal, lo que quiera que aparezca en él, como:
<html>
<h1>Hello world</h1>
</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'': ''html''});
res.end(index);
}).listen(9615);
//Just Change The CONTENT TYPE to ''html''