Usando o node.js como um servidor da web simples

1103

Eu quero executar um servidor HTTP muito simples. Toda solicitação GET example.comdeve ser index.htmlveiculada a ela, mas como uma página HTML comum (ou seja, a mesma experiência de quando você lê páginas da Web normais).

Usando o código abaixo, eu posso ler o conteúdo de index.html. Como sirvo index.htmlcomo uma página da web comum?

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 getlinha para cada arquivo de recurso (CSS, JavaScript, imagens) que desejo usar.

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

idophir
fonte
21
Dê uma olhada no módulo npm "connect". Ele fornece essa funcionalidade básica e é a base de muitas configurações e outros pacotes.
Mörre 21/05
5
Você deve colocar sua solução como resposta e marcar como correta.
graham.reeds
8
Consegui encontrar uma solução perfeita de Eric B. Sowell chamada Servindo arquivos estáticos do nó js . Leia a coisa toda. Altamente recomendado.
Id80ir
1
Dê uma olhada em um módulo que escrevi chamado Cachemere. Ele também armazena em cache automaticamente todos os seus recursos. github.com/topcloud/cachemere #
Jon Jon
1
local-web-server é um bom exemplo para se olhar
Lloyd

Respostas:

993

O servidor Node.js mais simples é apenas:

$ npm install http-server -g

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

$ cd MyApp

$ http-server

Se você estiver usando o NPM 5.2.0 ou mais recente, poderá usá- http-serverlo sem instalá-lo npx. Isso não é recomendado para uso em produção, mas é uma ótima maneira de obter rapidamente um servidor em execução no host local.

$ npx http-server

Ou, você pode tentar isso, o que abre o navegador da Web e permite solicitações do CORS:

$ http-server -o --cors

Para mais opções, consulte a documentação http-serverdo GitHub ou execute:

$ http-server --help

Muitos outros recursos interessantes e uma implantação simples com morte cerebral no NodeJitsu.

Garfos de recurso

Obviamente, você pode facilmente completar os recursos com seu próprio garfo. Você pode descobrir que isso já foi feito em um dos mais de 800 garfos existentes deste projeto:

Servidor Light: uma alternativa de atualização automática

Uma boa alternativa para http-serveré light-server. Ele suporta a visualização de arquivos e a atualização automática e muitos outros recursos.

$ npm install -g light-server 
$ light-server

Adicione ao menu de contexto do diretó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 JSON REST simples

Se você precisar criar um servidor REST simples para um projeto de protótipo, o json-server pode ser o que você está procurando.

Editores de atualização automática

A maioria dos editores de páginas da Web e ferramentas IDE agora incluem um servidor da Web que observará seus arquivos de origem e atualizará automaticamente sua página da Web quando eles forem alterados.

Eu uso o Live Server com o Visual Studio Code.

O editor de texto de código aberto Brackets também inclui um servidor da Web estático do NodeJS. Basta abrir qualquer arquivo HTML entre parênteses, pressionar " Live Preview " e ele inicia um servidor estático e abre o navegador na página. O navegador ** atualizará automaticamente sempre que você editar e salvar o arquivo HTML. Isso é especialmente útil ao testar sites adaptáveis. Abra sua página HTML em vários navegadores / tamanhos de janela / dispositivos. Salve sua página HTML e veja instantaneamente se seu material adaptável está funcionando, pois todos são atualizados automaticamente.

PhoneGap Developers

Se você estiver codificando um aplicativo móvel híbrido , pode estar interessado em saber que a equipe do PhoneGap adotou esse conceito de atualização automática com seu novo aplicativo PhoneGap . Este é um aplicativo móvel genérico que pode carregar os arquivos HTML5 de um servidor durante o desenvolvimento. Esse é um truque muito simples, já que agora você pode pular as etapas lentas de compilação / implantação em seu ciclo de desenvolvimento para aplicativos móveis híbridos se estiver alterando arquivos JS / CSS / HTML - que é o que você faz na maioria das vezes. Eles também fornecem o servidor da Web estático do NodeJS (execução phonegap serve) que detecta alterações de arquivo.

Desenvolvedores do PhoneGap + Sencha Touch

Agora adaptei extensivamente o servidor estático PhoneGap e o aplicativo PhoneGap Developer para desenvolvedores Sencha Touch e jQuery Mobile. Confira no Sencha Touch Live . Suporta códigos QR --qr e --localtunnel que proxies seu servidor estático do seu computador desktop para uma URL fora do seu firewall! Toneladas de usos. Aceleração maciça para desenvolvedores móveis híbridos.

Desenvolvedores de framework Cordova + Ionic

O servidor local e os recursos de atualização automática são incorporados à ionicferramenta. Basta executar a ionic servepartir da pasta do aplicativo. Ainda melhor ... ionic serve --labpara visualizar automaticamente as atualizações lado a lado do iOS e do Android.

Tony O'Hagan
fonte
9
npm install live-server -g se você quer a mesma coisa, mas com auto-reload quando detecta uma alteração de arquivo
3
Um pequeno "pegadinha" -. O servidor http padrão é servir o site em 0.0.0.0. Portanto, você deve especificar um endereço IP para tê-lo funcionar corretamente como um servier teste local:http-server -a localhost
JESii
1
Sim ... 0.0.0.0 fará com que ele se ligue a TODOS os IPs de todos os seus dispositivos de rede IP (WiFi, Cabo, Bluetooth), o que é uma má idéia em qualquer rede pública, pois você pode ser hackeado. Não é tão ruim se você quiser apenas demonstrar seu aplicativo dentro de uma rede segura contra incêndio para mostrar aos outros ou conectá-lo ao seu dispositivo móvel na mesma rede.
Tony O'Hagan
Pequena ferramenta realmente útil. Como tenho muitos aplicativos Node em execução no meu servidor, adiciono a opção "-p" para escolher uma porta que não seja 8080. Por exemplo: nohup http-server -p 60080 & (inicia em segundo plano e permite desconectar o Você deve certificar-se de que a porta esteja aberta para o mundo, por exemplo: iptables -I INPUT 1 -p tcp --dport 60090 -j ACCEPT (em muitos sistemas Linux)
Blisterpeanuts
Como executá-lo como serviço, para que eu possa usá-lo mesmo fechando o prompt de comando. Existe alguma ferramenta que fornece esse tipo, se não isso.
Sandeep sandy
983

Você pode usar o Connect e o ServeStatic com o Node.js para isso:

  1. Instale conectar e servir estático com o NPM

    $ npm install connect serve-static
  2. Crie o arquivo server.js com este conteúdo:

    var connect = require('connect');
    var serveStatic = require('serve-static');
    
    connect()
        .use(serveStatic(__dirname))
        .listen(8080, () => console.log('Server running on 8080...'));
  3. Executar com Node.js

    $ node server.js

Agora você pode ir para http://localhost:8080/yourfile.html

Gian Marco Gherardi
fonte
24
A idéia era não usar uma biblioteca existente, por razões educacionais, mas acho que usar o Express é um conselho melhor do que sua versão de nível inferior, o Connect.
Id111
135
A parte do Express que serve arquivo estático é apenas o Connect, então não vejo o motivo para usar o Express para veicular arquivos estáticos. Mas sim, também o Express fará o trabalho.
Gian Marco Gherardi
7
Excelentes conselhos. Os passos acima funcionaram muito bem para meus propósitos. Graças a Gian, Aqui está o link para expressar onde ele revela que é construído sobre Connect, expressjs.com Aqui é como usar Express: expressjs.com/guide.html
Jack Stone
10
Não está funcionando para mim, resultado Não é possível obter /test.html. Devo substituir __dirname por um nome de diretório?
Timo
3
Agora, o connect mudou para a versão 3. Portanto, é necessário usar o serve-static como o miqid descrito. Postei outra resposta com o código completo para o connect v3.
tomet
160

Confira esta essência . Estou reproduzindo aqui para referência, mas a essência é atualizada regularmente.

Servidor da Web com arquivo estático Node.JS. Coloque no seu caminho para ativar servidores em qualquer diretório, use um argumento de porta 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");

Atualizar

A essência manipula arquivos css e js. Eu já usei. Usar leitura / gravação no modo "binário" não é um problema. Isso significa apenas que o arquivo não é interpretado como texto pela biblioteca de arquivos e não está relacionado ao tipo de conteúdo retornado na resposta.

O problema com o seu código é que você sempre retorna um tipo de conteúdo "texto / sem formatação". O código acima não retorna nenhum tipo de conteúdo, mas se você o estiver usando apenas para HTML, CSS e JS, um navegador poderá inferir isso muito bem. Nenhum tipo de conteúdo é melhor que um errado.

Normalmente, o tipo de conteúdo é uma configuração do seu servidor da web. Então, desculpe-me se isso não resolver o seu problema, mas funcionou para mim como um servidor de desenvolvimento simples e achei que poderia ajudar outras pessoas. Se você precisar de tipos de conteúdo corretos na resposta, defina-os explicitamente como joeytwiddle possui ou use uma biblioteca como o Connect que possua padrões sensíveis. O bom disso é que é simples e independente (sem dependências).

Mas sinto seu 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");
Jonathan Tran
fonte
3
Isso realmente não resolve o "problema". Você retorna index.html como um arquivo binário e não lida com css e js.
Idophir
4
Ele lida com css e js. Ele não retorna index.html como um arquivo binário. Simplesmente copia os dados do disco em qualquer formato. Consulte as atualizações para obter mais explicações.
Jonathan Tran
um problema com o código, que diferencia maiúsculas de minúsculas, no unix para determinados arquivos, ele fornece 404
Pradeep
2
Observe que "path.exists e path.existsSync agora estão obsoletos. Use fs.exists e fs.existsSync". stackoverflow.com/a/5008295/259
David Sykes
3
Observe que fs.exists()também está obsoleto agora. Capte o erro ao fs.stat()invés de criar uma condição de corrida.
Matt
100

Você não precisa expressar. Você não precisa se conectar. Node.js faz http NATIVELY. Tudo o que você precisa fazer é retornar um arquivo dependente da solicitação:

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 as solicitações não possam acessar os arquivos sob um diretório 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)
BT
fonte
3
Se não me engano, esta solução não cuida do tipo de codificação, portanto, as solicitações de imagens e páginas HTML terão a mesma codificação. Não é?
Id163 #
2
@idophir Na maioria das vezes a codificação não importa, os navegadores a inferem com base nas tags html usadas ou em outras informações, ou elas acham muito bem. Como alguém acima mencionado, nenhum tipo MIME é melhor que um errado. Você certamente pode usar algo como node-mime para descobrir os tipos de arquivos mime, mas um servidor http totalmente compatível com a Web está fora do escopo desta pergunta.
BT
1
@ Rooster Você não precisa de nada de especial - simplesmente node thisfile.js. Ele será executado, ouvindo novas conexões e retornando novos resultados, até que A. seja fechado por um sinal ou B. algum erro louco de alguma forma cause o encerramento do programa.
BT
1
@Rooster Outro daemonizer de alguma reputação é encontrado em github.com/Unitech/pm2
Travelling Man
1
Eu gosto mais desta resposta, mas há dois problemas: 1) Retorna 200 quando deve retornar 404; Para corrigir, chamo writeHead (200) dentro de um retorno de chamada 'aberto'. 2) Se houver um erro, o soquete é deixado aberto; Para corrigir, chamo response.destroy () no retorno de chamada 'error'.
Paul Brannan
70

Acho que a parte que você está perdendo agora é o envio:

Content-Type: text/plain

Se você deseja que um navegador da web renderize o HTML, altere isso para:

Content-Type: text/html
clee
fonte
Obrigado pela resposta rápida. A página agora é carregada, mas sem o CSS. Como posso obter uma página html padrão com CSS e JS carregados?
Idophir 21/05
20
Você precisa começar a estender esse servidor. No momento, ele só sabe servir index.html - você precisa ensiná-lo a servir foo.css e foo.js agora, com seus próprios tipos MIME apropriados.
clee
1
Se você não deseja exibir arquivos estáticos, pode soltar seu css em uma <style>tag.
Keith
1
Após nove anos, isso realmente deve ser aceito como a resposta correta.
rooch84
46

Etapa 1 (dentro do prompt de comando [espero que você faça o CD PARA A SUA PASTA]): npm install express

Etapa 2: Crie um arquivo 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);

Observe que você deve adicionar WATCHFILE (ou usar nodemon) também. O código acima é apenas para um servidor de conexão simples.

ETAPA 3: node server.js ounodemon server.js

Agora existe um método mais fácil se você deseja apenas hospedar um servidor HTTP simples. npm install -g http-server

e abra nosso diretório e digite http-server

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

AÇO
fonte
@STEEL, existe alguma maneira de iniciar o servidor do nó automaticamente. Quero dizer, sem ir para o caminho do diretório e, em seguida, digite nodeserver e somente ele será iniciado. Eu quero iniciar o servidor do nó como o IIS. você pode me dizer
Vinoth
@ Vinoth sim, existem muitas maneiras. Qual a sua finalidade exata ou de destino, posso ajudá-lo
AÇO
@steel Eu quero iniciar o servidor automaticamente, sem fornecer o servidor do nó no prompt de comando. esta é a minha obrigação é possível você pode me dizer alguns exemplos
Vinoth
Você precisará usar Alguma ferramenta como o ThoughtWorks GO, que pode executar comandos do Terminal a partir de um clique no navegador.
STEEL
32

O caminho mais rápido:

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

Seu jeito:

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);
Frank Nocke
fonte
19

Em vez de lidar com uma instrução switch, acho melhor procurar o tipo de conteúdo em um dicionário:

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

...

    var contentType = contentTypesByExtension[fileExtension] || 'text/plain';
joeytwiddle
fonte
Sim, parece muito mais elegante que a solução "switch" usada por Eric B. Sowell (consulte a resposta selecionada). Obrigado.
Id11
Esta resposta é totalmente fora de contexto ... Refere-se a este link dentro deste comentário - stackoverflow.com/questions/6084360/... (sim, qualquer que seja, internet é quebrado)
Mars Robertson
15

Esta é basicamente uma versão atualizada da resposta aceita 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 padrão para que index.html seja exibido como padrão.

encontrar
fonte
13

Você não precisa usar nenhum módulo do NPM para executar um servidor simples, há uma biblioteca muito pequena chamada " NPM Free Server " para o Node:

50 linhas de código, são exibidas se você estiver solicitando um arquivo ou uma pasta e fornecerão uma cor vermelha ou verde se houver falha no trabalho. Tamanho inferior a 1 KB (minificado).

Jaredcheeda
fonte
Excelente escolha. Serve html, css, js e imagens. Ótimo para depuração. Apenas substitua esse código como está no seu server.js.
pollaris
2
Eu gostaria de poder adicionar mais votos! Isso é ótimo! Eu fiz uma pequena alteração var filename = path.join(process.cwd() + '/dist/', uri); no servidor da pasta dist . Eu coloquei o código em server.jse apenas funciona quando digitonpm start
John Henckel
Como executá-lo como serviço, para que eu possa usá-lo mesmo fechando o prompt de comando. Existe alguma ferramenta que fornece esse tipo, se não isso.
Sandeep sandy
13

se você possui um nó instalado no seu PC, provavelmente possui o NPM, se não precisar do material do NodeJS, poderá usar o pacote serve para isso:

1 - Instale o pacote no seu PC:

npm install -g serve

2 - Sirva sua pasta estática:

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

Ele mostrará a qual porta sua pasta estática está sendo servida, basta navegar para o host como:

http://localhost:3000
Diego Mendes
fonte
Como executá-lo como serviço, para que eu possa usá-lo mesmo fechando o prompt de comando. Existe alguma ferramenta que fornece esse tipo, se não isso.
Sandeep sandy
Essa deve ser a resposta aceita. Porque é o mais fácil e funciona imediatamente. Portanto, se você executar a veiculação apenas sem o caminho, ele executará o servidor a partir da pasta atual (aquela em que você já editou o CD anteriormente).
ћгор Рајачић
9

Encontrei uma biblioteca interessante no npm que pode ser útil para você. É chamado mime ( npm install mimeou https://github.com/broofa/node-mime ) e pode determinar o tipo de mime de um arquivo. Aqui está um exemplo de 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")

Isso servirá para qualquer arquivo de texto ou imagem comum (.html, .css, .js, .pdf, .jpg, .png, .m4a e .mp3 são as extensões que eu testei, mas, teoricamente, deve funcionar para tudo)

Notas do desenvolvedor

Aqui está um exemplo de saída que recebi:

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 a unescapefunção na construção do caminho. Isso permite nomes de arquivos com espaços e caracteres codificados.

MayorMonty
fonte
8

Editar:

Aplicativo de exemplo Node.js. O Node Chat tem a funcionalidade que você deseja.
No arquivo README.textfile
3. Etapa é o que você está procurando.

passo 1

  • crie um servidor que responda com hello world na porta 8002

passo 2

  • crie um index.html e sirva-o

etapa 3

  • apresentar util.js
  • altere a lógica para que qualquer arquivo estático seja veiculado
  • mostre 404 caso nenhum arquivo seja encontrado

Passo 4

  • adicionar jquery-1.4.2.js
  • adicionar client.js
  • altere index.html para solicitar ao usuário o apelido

Aqui está o server.js

Aqui está o util.js

Kerem Baydoğan
fonte
5
Eu não ligo Eu só tenho index.html. Eu só quero obter o html + css + js carregado. Obrigado!
Idophir 21/05
16
-1 para .readFileSyncem um retorno de chamada. Com o node.js, usamos E / S sem bloqueio. Por favor, não recomende Synccomandos.
Raynos
Olá @krmby, obrigado por tentar ajudar. Eu sou realmente novo nisso. Eu baixei o server.js e o util.js. Quando executo "node server.js" e tento acessar a página usando um navegador, recebo este erro: TypeError: O objeto # <ServerResponse> não possui o método 'close' em /var/www/hppy-site/util.js : 67: 8 em /var/www/hppy-site/util.js:56:4 em [object Object]. <anonymous> (fs.js: 107: 5) em [object Object] .emit (events.js : 61: 17) no afterRead (fs.js: 970: 12) no wrapper (fs.js: 245: 17) Alguma idéia? BTW - o mesmo está acontecendo quando faço o download do seu projeto e o executo.
Idophir
1
Desculpa. Eu estava usando uma nova versão. Res.close substituído () com res.end ()
idophir
8

A maneira como faço é instalar primeiro o servidor estático do nó globalmente via

npm install node-static -g

navegue até o diretório que contém seus arquivos html e inicie o servidor estático com static .

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

Samba
fonte
1
Nada supera um one-liner. Valeu!
AndroidDev 12/09/18
Como executá-lo como serviço, para que eu possa usá-lo mesmo fechando o prompt de comando. Existe alguma ferramenta que fornece esse tipo, se não isso.
Sandeep sandy
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);

Eu acho que você estava procurando por isso. No seu index.html, basta preenchê-lo com o código html normal - o que você quiser renderizar, como:

<html>
    <h1>Hello world</h1>
</html>
Ashish Ranjan
fonte
7

Basicamente, copiando a resposta aceita, mas evitando criar um arquivo js.

$ node
> var connect = require('connect'); connect().use(static('.')).listen(8000);

Achei muito conveniente.

Atualizar

Desde a versão mais recente do Express, o serve-static se tornou um middleware separado. Use isto para servir:

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

Instale serve-staticprimeiro.

Xiao Peng - ZenUML.com
fonte
6

de w3schools

é muito fácil criar um servidor de nó para servir qualquer arquivo solicitado e você não precisa instalar nenhum pacote para ele

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 do disco

Ahmed M. Matar
fonte
5

Eu uso o código abaixo para iniciar um servidor web simples que processa o arquivo html padrão, se nenhum arquivo for 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);

Ele renderizará todos os arquivos js, css e de imagem, além de todo o conteúdo html.

Concorde com a afirmação " Nenhum tipo de conteúdo é melhor que um errado "

Sachin303
fonte
5

Não tenho certeza se é exatamente isso que você queria, no entanto, você pode tentar mudar:

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

para isso:

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

Isso fará com que o cliente do navegador exiba o arquivo como html em vez de texto sem formatação.

Xenry
fonte
1
Não é o mesmo que esta resposta existente ?
Pang
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'
user3389163
fonte
6
O Content-Typedeve ser text/html, tal como é definido dessa forma: Content-Type := type "/" subtype *[";" parameter].
t.niese
1
este parece transformar todos os meus arquivos nessa pasta em tipo html, mesmo que seja js ...
ahnbizcad
Funciona muito bem ....
smack cherry
4

Uma versão 4.x expressa um pouco mais detalhada, mas que fornece listagem de diretórios, compactação, armazenamento em cache e solicitações de log em um número mínimo de linhas

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 !")
Bruno Grieder
fonte
4

Quantidade louca de respostas complicadas aqui. Se você não pretende processar os arquivos / banco de dados nodeJS, mas apenas deseja servir html / css / js / images estático, conforme sua pergunta sugere, basta instalar o servidor pushstate-server módulo ou similar;

Aqui está um "liner" que criará e lançará um mini site. Basta colar esse bloco inteiro no seu terminal no diretório apropriado.

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 o navegador e acesse http: // localhost: 3000 . Feito.

O servidor usará o appdir como raiz para servir os arquivos. Para adicionar ativos adicionais, basta colocá-los dentro desse diretório.

cyberwombat
fonte
2
Se você já possui estática, basta usar o seguinte:npm install pushstate-server --save; touch server.js; echo "var server = require('pushstate-server');server.start({ port: 3000, directory: './' });" > server.js; node server.js
Swivel
4

Já existem ótimas soluções para um simples nodejs server. Há mais uma solução, se você precisar, live-reloadingconforme fez alterações nos seus arquivos.

npm install lite-server -g

navegue em seu diretório e faça

lite-server

ele abrirá o navegador para você com a atualização ao vivo.

lokeshjain2008
fonte
4

Função Express O sendFile faz exatamente o que você precisa e, como você deseja a funcionalidade do servidor da Web a partir do nó, o Express vem como uma opção natural e, então, a exibição de arquivos estáticos se torna tão fácil quanto:

res.sendFile('/path_to_your/index.html')

leia mais aqui: https://expressjs.com/en/api.html#res.sendFile

Um pequeno exemplo com servidor web expresso para o nó:

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

execute isso e navegue para http: // localhost: 8080

Para expandir isso para permitir a veiculação de arquivos estáticos como css e imagens, aqui está outro exemplo:

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

então crie uma subpasta chamada css, coloque seu conteúdo estático e ele estará disponível no seu index.html para fácil referência, como:

<link type="text/css" rel="stylesheet" href="/css/style.css" />

Observe o caminho relativo no href!

voila!

Mladen Oršolić
fonte
3

A maioria das respostas acima descreve muito bem como o conteúdo está sendo veiculado. O que eu estava procurando como adicional foi a listagem do diretório para que outros conteúdos do diretório possam ser navegados. Aqui está 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));
Abu Shumon
fonte
2

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

sudo npm install ripple-emulator -g

A partir daí, basta digitar o diretório dos seus arquivos html e executar

ripple emulate

altere o dispositivo para o Nexus 7 paisagem.

Helzgate
fonte
5
O que um Nexus 7 deve fazer com isso?
precisa
2

A versão mais simples que me deparei é 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á ao navegador e abra o seguinte:

http://127.0.0.1/image.jpg

Aqui image.jpgdeve estar no mesmo diretório que este arquivo. Espero que isso ajude alguém :)

Kaushal28
fonte
Você não deve adivinhar o tipo MIME do nome do arquivo.
mwieczorek
Nota: fs.exists () foi descontinuado, fs.existsSync () é a substituição direta.
JWAspin
@mwieczorek como deve ser adivinhada? Você sentiu falta de que ele esteja separando a extensão do arquivo?
James Newton
Pode querer usar: deixe mimeType = mimeTypes [filename.split ("."). Pop ()] || "application / octet-stream"
James Newton
1

Também posso recomendar o SugoiJS, é muito fácil de configurar e oferece a opção de começar a escrever rapidamente e possui ótimos recursos.

Dê uma olhada aqui para começar: http://demo.sugoijs.com/ , documentação: https://wiki.sugoijs.com/

Possui decoradores de manipulação de solicitações, políticas de solicitação e decoradores de políticas de autorização.

Por exemplo:

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")
        }
    }
}
Gen4ik
fonte
1

É muito fácil com as toneladas de bibliotecas presentes hoje. As respostas aqui são funcionais. Se você quer outra versão para começar mais rápido e simples

Obviamente, primeiro instale o node.js. Mais tarde:

> # 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

Aqui o conteúdo de " https://raw.githubusercontent.com/voxsoftware/kawix-core/master/example/npmrequire/express-static.js " (você não precisa fazer o download, publiquei para entender como funciona por trás)

// 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")
James Suárez
fonte