A usar o nó.js como um servidor web simples

quero executar um Servidor HTTP muito simples. Cada pedido de GET para example.com deve ser servido index.html a ele, mas como uma página HTML regular (ou seja, a mesma experiência que quando você lê páginas web normais).

usando o código abaixo, posso ler o conteúdo de index.html. Como faço para servir index.html como uma página web regular?

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);

uma sugestão abaixo é complicada e requer que eu escreva uma linha get para cada ficheiro de recursos (CSS, JavaScript, imagens) que eu queira usar.

Como posso servir uma única página HTML com algumas imagens, CSS e JavaScript?

Author: Damjan Pavlica, 2011-05-22

25 answers

Pode usar Ligar e Servestático com o nó.js para isto:

  1. Instalar ligar e servir-estática com NPM

    $ npm install connect serve-static
    
  2. Criar Servidor.ficheiro js com este conteúdo:

    var connect = require('connect');
    var serveStatic = require('serve-static');
    connect().use(serveStatic(__dirname)).listen(8080, function(){
        console.log('Server running on 8080...');
    });
    
  3. Executar com o nó.js

    $ node server.js
    
Agora podes ir para ... http://localhost:8080/yourfile.html
 875
Author: Gian Marco Gherardi, 2016-03-02 20:18:18

Nó Mais Simples.o servidor js é apenas:

$ npm install http-server -g

Agora pode executar um servidor através dos seguintes comandos:

$ cd MyApp

$ http-server

Se estiver a usar o NPM 5.2.0 ou mais recente, pode usar http-server sem o instalar com npx. Isto não é recomendado para uso na produção, mas é uma ótima maneira de obter rapidamente um servidor em execução no localhost.

$ npx http-server

Ou, você pode tentar isto, que abre o seu navegador web e permite os pedidos do CORS:

$ http-server -o --cors

Para Mais opções, confira a documentação para http-server sobre o GitHub , ou executar:

$ http-server --help
Muitas outras características agradáveis e morte cerebral-simples implantação para o NodeJitsu.

Forks De Funcionalidades

É claro que pode facilmente completar as características com o seu próprio garfo. Você pode descobrir que já foi feito em um dos 800 + garfos existentes deste projeto:

Servidor De Luz: Uma Actualização Automática Alternativa

Uma boa alternativa a ... light-server. Ele suporta a observação de arquivos e auto refrescante e muitos outros recursos.
$ npm install -g light-server 
$ light-server

Adicionar ao seu menu de contexto de directório no Windows Explorer

 reg.exe add HKCR\Directory\shell\LightServer\command /ve /t REG_EXPAND_SZ /f /d "\"C:\nodejs\light-server.cmd\" \"-o\" \"-s\" \"%V\""

Servidor de descanso JSON simples

Se precisar de criar um servidor de descanso simples para um projecto protótipo, então json-server pode ser o que está à procura.

Auto-Refrescante Editores

A maioria dos editores de páginas web e ferramentas IDE agora incluem um servidor web que irá ver os seus ficheiros de código e actualizar automaticamente a sua página web quando eles mudam.

O open source editor de texto parêntesis Também inclui um servidor web estático NodeJS. Basta abrir QUALQUER ficheiro HTML entre parêntesis, carregar em " Live Preview " e ele inicia um servidor estático e abre o seu navegador na página. O navegador irá **actualizar automaticamente sempre que Editar e gravar o ficheiro HTML. Isto é especialmente útil ao testar sites adaptativos. Abra a sua página HTML em vários navegadores/tamanhos de janelas/dispositivos. Grava a sua página de HTML e veja imediatamente se o seu material adaptável está a funcionar à medida que ele tudo Se actualizar automaticamente.

Programadores Do PhoneGap

Se está a codificar umapp móvel híbrido , pode estar interessado em saber que a equipaPhoneGap levou este conceito de actualização automática a bordo com o seu novoApp PhoneGap . Este é um aplicativo móvel genérico que pode carregar os arquivos HTML5 de um servidor durante o desenvolvimento. Este é um truque muito habilidoso, uma vez que agora você pode saltar os passos de compilação/implantação lenta em seu ciclo de desenvolvimento para aplicativos móveis híbridos se você estiver mudando arquivos JS/CSS/HTML - que é o que você está fazendo na maioria das vezes. Eles também fornecem o servidor web do NodeJS estático (run phonegap serve) que detecta alterações de arquivos.

Programadores PhoneGap + Sencha Touch

Já adaptei extensivamente o PhoneGap. aplicativo de desenvolvimento de servidor estático e PhoneGap para desenvolvedores móveis Sencha Touch & jQuery. Touch Touch Live. Suporta os códigos --qr QR e --localtunnel que proxies o seu servidor estático do seu computador de secretária para um URL fora da sua firewall! Toneladas de usos. Velocidade enorme para os dispositivos móveis híbridos.

Programadores De Framework Cordova + Ionic

O servidor Local e as funcionalidades de actualização automática são incorporados na ferramenta ionic. Corre da tua aplicação. pasta. Melhor ... ionic serve --lab para ver auto refrescante lado a lado vistas de ambos iOS e Android.

 845
Author: Tony O'Hagan, 2018-08-18 07:39:51

Vê isto gist. Estou a reproduzi-lo aqui para referência, mas o essencial foi actualizado regularmente.

Nó.Js static file web server. Coloque - o em seu caminho para ligar servidores em qualquer diretório, tem um argumento de Porto 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

O essencial lida com ficheiros css e js. Eu próprio o usei. Usar leitura / escrita no modo" binário " não é um problema. Isso só significa que o arquivo não é interpretado como texto pelo Arquivo biblioteca e não tem relação com o tipo de conteúdo retornado na resposta.

O problema com o seu código é que está sempre a devolver um tipo de conteúdo de "texto/simples". O código acima não retorna qualquer tipo de conteúdo, mas se você está apenas usando para HTML, CSS e JS, um navegador pode inferir que eles são muito bons. Nenhum tipo de conteúdo é melhor do que um errado.

Normalmente o tipo de conteúdo é uma configuração do seu servidor web. Por isso, lamento que isto não resolva o teu problema, mas ... funcionou para mim como um simples servidor de desenvolvimento e pensou que poderia ajudar algumas outras pessoas. Se você precisa de tipos de conteúdo corretos na resposta, você ou precisa defini-los explicitamente como joeytwiddle tem ou usar uma biblioteca como Connect que tem predefinições sensatas. A coisa boa sobre isso é que é simples e auto-contido (sem dependências).

Mas eu sinto o teu problema. Então aqui está a solução 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");
 150
Author: Jonathan Tran, 2015-06-10 01:24:02
Não precisas de expresso. Não precisas de ligação. No.js faz http nativamente. Tudo que você precisa fazer é devolver um arquivo dependente do pedido:
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)    

Um exemplo mais completo que garante que os pedidos não podem aceder a ficheiros por baixo de um directório de base, e faz o tratamento adequado de erros:

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)
 79
Author: B T, 2017-10-09 07:37:27
Acho que a parte que estás a perder agora é que estás a enviar:
Content-Type: text/plain

Se quiser um navegador web para desenhar o HTML, deve alterar isto para:

Content-Type: text/html
 65
Author: clee, 2011-05-21 21:11:14

Step1 (prompt do comando interior [espero que você cd para a sua pasta]) : npm install express

Passo 2: Criar um servidor de ficheiros.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);

Por favor, note que deve adicionar um ficheiro de vigilância (ou usar o nodemon) também. O código acima é apenas para um servidor de conexão simples.

Passo 3: node server.js ou nodemon server.js

Existe agora um método mais fácil se você só quiser host Servidor HTTP simples. npm install -g http-server

E abra o nosso directório e tipo http-server

Https://www.npmjs.org/package/http-server

 44
Author: STEEL, 2015-07-30 15:54:26

O caminho rápido:

var express = require('express');
var app = express();
app.use('/', express.static(__dirname + '/../public')); // ← adjust
app.listen(3000, function() { console.log('listening'); });

À tua maneira:

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);
 29
Author: Frank Nocke, 2016-06-06 08:29:25

Ao invés de lidar com uma declaração de switch, eu acho que é melhor procurar o tipo de conteúdo a partir de um dicionário:

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

...

    var contentType = contentTypesByExtension[fileExtension] || 'text/plain';
 19
Author: joeytwiddle, 2011-11-24 21:08:21

Esta é basicamente uma versão actualizada da resposta aceite para a versão 3 do connect:

var connect = require('connect');
var serveStatic = require('serve-static');

var app = connect();

app.use(serveStatic(__dirname, {'index': ['index.html']}));
app.listen(3000);

Também adicionei uma opção predefinida para esse índice.html é servido como um padrão.

 14
Author: tomet, 2014-06-20 17:40:46

Você não precisa usar nenhum módulo NPM para executar um servidor simples, existe uma biblioteca muito pequena chamada "servidor livre NPM " para o nó:

50 linhas de código, Saídas se estiver a pedir um ficheiro ou uma pasta e lhe der uma cor vermelha ou verde se não funcionar. Menos de 1KB de tamanho (minificado).

 11
Author: Jaredcheeda, 2015-11-09 16:10:04

Se tiver o nó instalado no seu PC, provavelmente terá o NPM, se não precisar do NodeJS, poderá usar o pacote serve para isto:

1-Instale o pacote no seu PC:

npm install -g serve

2 - sirva a sua pasta estática:

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

Mostrar-lhe-á qual o porto em que a sua pasta estática está a ser servida, basta navegar para a máquina como:

http://localhost:3000
 10
Author: Diego Mendes, 2017-02-23 17:57:20
Encontrei uma biblioteca interessante no MPN que pode ser útil para ti. Chama-se mime(npm install mime ou https://github.com/broofa/node-mime e pode determinar o tipo mime de um ficheiro. Aqui está um exemplo de um servidor web que escrevi usando-o:
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")

Isto irá servir qualquer texto regular ou ficheiro de imagem (.galeria, .Forum, .js .documento, .jpg .Forum, .m4a e. mp3 são as extensões que testei, mas a teoria de TI deve funcionar para tudo)

Notas De Desenvolvimento

Aqui está um exemplo de saída que eu tenho com ele:
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

Repare na função unescape na construção do caminho. Isto permite nomes de ficheiros com espaços e caracteres codificados.

 9
Author: MayorMonty, 2014-06-08 01:01:27

Editar:

Nó.js sample app Node Chat tem a funcionalidade que deseja.
Nele está README.ficheiro de texto
3. Step é o que você está procurando.

Passo 1

  • crie um servidor que responda com hello world no Porto 8002

Passo 2

  • criar um índice.html e servi-Lo

Passo 3

    Introduz o util.js
  • muda a lógica para que QUALQUER ficheiro estático é servido
  • mostra 404 no caso de não ser encontrado nenhum ficheiro

Passo 4

  • adicionar jquery-1.4.2.js
  • adicionar cliente.js
  • Índice de variação.html para pedir ao utilizador o nickname

Aqui está o servidor .js

Aqui está o util.js

 8
Author: Kerem Baydoğan, 2011-05-21 23:03:18

A forma como o faço é, em primeiro lugar, instalar o servidor estático do nó globalmente via

npm install node-static -g

Então navegue para a pasta que contém os seus ficheiros html e inicie o servidor estático com static.

Vá para o navegador e tipo localhost:8080/"yourHtmlFile".

 8
Author: samba, 2016-02-02 22:59:33
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);
Acho que estás à procura disto. No teu índice.html, basta preenchê-lo com o código html normal - o que você quiser desenhar nele, como:
<html>
    <h1>Hello world</h1>
</html>
 7
Author: Ashish Ranjan, 2014-12-30 22:15:56
Basicamente copiando a resposta aceita, mas evitando criar um arquivo js.
$ node
> var connect = require('connect'); connect().use(static('.')).listen(8000);
Achei muito convincente.

Actualizar

A partir da última versão do Express, o servic-static tornou-se um middleware separado. Use isto para servir:

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

Instale serve-static primeiro.

 6
Author: Xiao Peng - ZenUML.com, 2015-05-26 12:16:45

Uso o código abaixo para iniciar um servidor web simples que desenha um ficheiro html por omissão se não existir nenhum ficheiro mencionado no 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);

Irá desenhar todos os ficheiros js, css e image, juntamente com todo o conteúdo html.

Concordo com a declaração " nenhum tipo de conteúdo é melhor do que um tipo errado"

 5
Author: Sachin303, 2014-03-24 00:25:34
Não sei se era isto que querias, mas podes tentar mudar.
{'Content-Type': 'text/plain'}

Para isto:

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

Isto fará com que o cliente do navegador mostre o ficheiro como html em vez de texto simples.

 5
Author: Xenry, 2016-03-27 19:40:22

Um expresso um pouco mais descritivo 4.x version but that provides directory listing, compression, caching and requests logging in a minimal number of lines

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
Author: Bruno Grieder, 2014-07-01 14:46:27
Muitas respostas complicadas aqui. Se não pretende processar os ficheiros/base de dados nodeJS, mas deseja apenas servir o html/css/js/images estático como a sua pergunta sugere, então instale simplesmente o Módulo pushstate-server ou similar; Aqui está um "one liner" que irá criar e lançar um mini site. Basta colar esse bloco inteiro no seu terminal na pasta apropriada.
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

Abrir o navegador e ir para http://localhost:3000 Terminar.

A o servidor irá usar a pasta app como raiz para servir os ficheiros. Para adicionar ativos adicionais basta colocá-los dentro desse diretório.

 4
Author: cyberwombat, 2015-08-03 18:32:54
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'
 3
Author: user3389163, 2014-03-06 16:30:40
A maioria das respostas acima descrevem muito bem como o conteúdo está a ser servido. O que eu estava procurando como adicional estava listando o diretório para que outros conteúdos do diretório possam ser navegados. Aqui está a minha solução para outros leitores:
'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));
 3
Author: Abu Shumon, 2016-12-31 17:48:58

Já existem algumas grandes soluções para um simples nodejs server. Há mais uma solução se você precisar live-reloading Como você fez alterações em seus arquivos.

npm install lite-server -g

Navegue no seu directório e faça

lite-server

Ele irá abrir o navegador para você com o live-reloading.

 3
Author: lokeshjain2008, 2017-05-01 10:51:38

Esta é uma das soluções mais rápidas que uso para ver rapidamente as páginas da web

sudo npm install ripple-emulator -g

A partir de então, basta introduzir o directório dos seus ficheiros html e executar

ripple emulate
Então muda o dispositivo para a paisagem Nexus 7.
 2
Author: Helzgate, 2015-07-10 21:44:53
A versão mais simples que encontrei é a seguinte. Para fins de educação, é melhor, porque não usa bibliotecas abstratas.
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);

Agora vá para o navegador e abra o seguinte:

http://127.0.0.1/image.jpg

Aqui image.jpg deve estar na mesma pasta que este ficheiro. Espero que isto ajude alguém.

 0
Author: Kaushal28, 2017-05-30 18:35:55