Node.js dosyasını basit bir web sunucusu olarak kullanma


1103

Çok basit bir HTTP sunucusu çalıştırmak istiyorum. Her GET talebinin kendisine normal bir HTML sayfası olarak sunulması example.comgerekir index.html(yani, normal web sayfalarını okurken kullandığınız deneyim).

Aşağıdaki kodu kullanarak içeriğini okuyabilirim index.html. index.htmlNormal bir web sayfası olarak nasıl hizmet edebilirim ?

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

Aşağıdaki bir öneri karmaşıktır ve getkullanmak istediğim her kaynak (CSS, JavaScript, resim) dosyası için bir satır yazmamı gerektirir .

Bazı resimler, CSS ve JavaScript ile nasıl tek bir HTML sayfası sunabilirim?


21
"Connect" npm modülüne bir göz atın. Bu tür temel işlevleri sağlar ve birçok kurulumun ve diğer paketlerin temelini oluşturur.
Mörre

5
Çözümünüzü bir cevap olarak koymalı ve doğru olarak işaretlemelisiniz.
graham.reeds

8
Eric B. Sowell tarafından js düğümünden statik dosyalar sunma adlı mükemmel bir çözüm bulabildim . Her şeyi okuyun. Şiddetle tavsiye edilir.
idophir

1
Cachemere adında yazdığım bir modüle bir göz atın. Ayrıca tüm kaynaklarınızı otomatik olarak önbelleğe alır. github.com/topcloud/cachemere
Jon

1
local-web-server bakmak için iyi bir örnek
Lloyd

Yanıtlar:


992

En basit Node.js sunucusu sadece:

$ npm install http-server -g

Artık bir sunucuyu aşağıdaki komutlarla çalıştırabilirsiniz:

$ cd MyApp

$ http-server

NPM 5.2.0 veya daha yenisini kullanıyorsanız http-server, kurmadan kullanabilirsiniz npx. Bu, üretimde kullanılması için önerilmez, ancak bir sunucuyu localhost üzerinde hızlı bir şekilde çalıştırmanın harika bir yoludur.

$ npx http-server

Veya, web tarayıcınızı açan ve CORS isteklerini etkinleştiren bunu deneyebilirsiniz:

$ http-server -o --cors

Daha fazla seçenek için http-serverGitHub'daki belgelere bakın veya çalıştırın:

$ http-server --help

Diğer güzel özellikler ve NodeJitsu beyin-ölü-basit dağıtım.

Özellik Çatalları

Tabii ki, özellikleri kendi çatalınızla kolayca doldurabilirsiniz. Bu projenin mevcut 800+ çatalından birinde zaten yapıldığını görebilirsiniz:

Light Server: Otomatik Yenileme Alternatifi

İçin güzel bir alternatif http-serverolduğunu light-server. Dosya izleme ve otomatik yenileme ve diğer birçok özelliği destekler.

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

Windows Gezgini'nde dizin içeriği menünüze ekleyin

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

Basit JSON REST sunucusu

Bir prototip proje için basit bir REST sunucusu oluşturmanız gerekirse, json-server aradığınız şey olabilir.

Otomatik Yenileme Düzenleyicileri

Çoğu web sayfası düzenleyicisi ve IDE aracı artık kaynak dosyalarınızı izleyecek ve değiştiğinde web sayfanızı otomatik olarak yenileyecek bir web sunucusu içermektedir.

Kullandığım Canlı Sunucusu Visual Studio Kodu.

Açık kaynak metin editörü Konsollar da bir NodeJS statik web sunucusu içerir. Herhangi bir HTML dosyasını Parantez içinde açın, " Canlı Önizleme " ye basın ve statik bir sunucu başlatıp tarayıcınızı sayfada açın. HTML dosyasını her düzenlediğinizde ve kaydettiğinizde tarayıcı ** otomatik olarak yenilenir. Bu özellikle uyarlanabilir web sitelerini test ederken faydalıdır. HTML sayfanızı birden çok tarayıcıda / pencere boyutunda / cihazda açın. HTML sayfanızı kaydedin ve uyarlanabilir öğelerinizin tümü otomatik olarak yenilenirken çalışıp çalışmadığını anında görün .

PhoneGap Geliştiricileri

Eğer bir kodlama ediyorsanız hibrit mobil uygulamayı , bunu bilmek ilginizi çekebilir PhoneGap ekibinizin yeni gemide bu otomatik yenileme kavramı aldı PhoneGap App . Bu, geliştirme sırasında bir sunucudan HTML5 dosyalarını yükleyebilen genel bir mobil uygulamadır. Bu çok kaygan bir numara çünkü artık JS / CSS / HTML dosyalarını değiştiriyorsanız hibrit mobil uygulamalar için geliştirme döngünüzdeki yavaş derleme / dağıtma adımlarını atlayabilirsiniz - çoğu zaman yaptığınız şey budur. Ayrıca phonegap servedosya değişikliklerini algılayan statik NodeJS web sunucusunu (çalıştır ) sağlarlar .

PhoneGap + Sencha Touch Geliştiricileri

Şimdi Sencha Touch ve jQuery Mobile geliştiricileri için PhoneGap statik sunucusunu ve PhoneGap Geliştirici Uygulamasını kapsamlı bir şekilde uyarladım. Sencha Touch Live'da bir göz atın . Statik sunucunuzu masaüstü bilgisayarınızdan güvenlik duvarınızın dışındaki bir URL'ye bağlayan --qr QR Kodlarını ve --localtunnel'i destekler! Tonlarca kullanım. Hibrit mobil geliştiriciler için büyük hızlanma.

Cordova + İyonik Çerçeve Geliştiricileri

Yerel sunucu ve otomatik yenileme özellikleri ionicaraca eklenir . ionic serveUygulama klasörünüzden çalıştırmanız yeterlidir. Daha da iyisi ... ionic serve --labhem iOS hem de Android'in otomatik yenilemesini yan yana görüntülemek için.


9
npm install live-server -g aynı şeyi istiyorsanız, ancak bir dosya değişikliği algıladığında otomatik yeniden yükleme ile

3
Bir küçük "yakaladım" -. http-server varsayılan olarak siteye 0.0.0.0'da hizmet verir. Bu nedenle, yerel bir test sunucusu olarak düzgün çalışması için bir IP adresi belirtmeniz GEREKİR:http-server -a localhost
JESii

1
Evet. Başkalarını göstermek veya aynı ağdaki mobil cihazınıza bağlamak için uygulamanızı güvenli bir ateş duvarlı ağ içinde tanıtmak istiyorsanız o kadar da kötü değil.
Tony O'Hagan

Gerçekten kullanışlı küçük bir araç. Sunucumda çalışan çok sayıda Düğüm uygulamam var, bu yüzden 8080 dışında bir bağlantı noktası seçmek için bir "-p" seçeneği ekliyorum. Örneğin: nohup http-server -p 60080 & (arka planda başlatır ve bağlantıyı kesmenizi sağlar. shell session.) Bağlantı noktasının dünyaya açık olduğundan emin olmalısınız, örneğin: iptables -I INPUT 1 -p tcp --dport 60090 -j KABUL (birçok Linux sisteminde)
Blisterpeanuts 11:17

Hizmet olarak nasıl çalıştırılır, böylece komut istemini kapatarak bile kullanabilirim. Herhangi bir araç bu tür değilse bu tür sağlar.
Sandeep sandy

983

Bunun için Connect ve ServeStatic'i Node.js ile kullanabilirsiniz :

  1. NPM ile connect ve serve-static yükleyin

    $ npm install connect serve-static
  2. Bu içerikle server.js dosyası oluşturun:

    var connect = require('connect');
    var serveStatic = require('serve-static');
    
    connect()
        .use(serveStatic(__dirname))
        .listen(8080, () => console.log('Server running on 8080...'));
    
  3. Node.js ile çalıştırın

    $ node server.js

Şimdi gidebilirsin http://localhost:8080/yourfile.html


24
Fikir, eğitimsel nedenlerden dolayı mevcut bir kütüphaneyi kullanmak değildi, ancak Express'i kullanmanın alt düzey sürümü Connect'ten daha iyi bir tavsiye olduğunu düşünüyorum.
idophir

135
Statik dosya sunan Express kısmı sadece Connect'tir, bu yüzden statik dosyaları sunmak için Express'i kullanma nedenini göremiyorum. Ama evet, Express de işi yapacak.
Gian Marco Gherardi

7
Mükemmel tavsiye. Yukarıdaki adımlar benim amacım için çok iyi çalıştı. Gian sayesinde, İşte Connect, expressjs.com üzerine inşa edildiğini gösteren Express bağlantısı İşte Express: expressjs.com/guide.html
Jack Stone

10
Benim için çalışmıyor, sonuç GET /test.html alınamıyor. __Dirname yerine bir dizin adı koymalı mıyım?
Timo

3
Şimdi, connect 3 sürümü olarak değiştirildi. Bu nedenle, biri miqid açıklandığı gibi serve-static kullanmak zorundadır. Connect v3 için tam kod ile başka bir cevap yayınladım.
Haziran'da tomet

160

Bu özü inceleyin . Burada referans için çoğalıyorum, ancak öz düzenli olarak güncellendi.

Düğüm.JS statik dosya web sunucusu. Herhangi bir dizinde sunucuları ateşlemek için yolunuza koyun, isteğe bağlı bir bağlantı noktası argümanı alır.

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

Güncelleme

Gist css ve js dosyalarını işler. Kendim kullandım. "İkili" modda okuma / yazma kullanmak sorun değil. Bu, dosyanın dosya kitaplığı tarafından metin olarak yorumlanmadığı ve yanıtta döndürülen içerik türüyle ilgisi olmadığı anlamına gelir.

Kodunuzla ilgili sorun, her zaman "metin / düz" içerik türünü döndürmenizdir. Yukarıdaki kod herhangi bir içerik türü döndürmez, ancak yalnızca HTML, CSS ve JS için kullanıyorsanız, bir tarayıcı bu güzelleri çıkartabilir. Hiçbir içerik türü yanlış olandan daha iyi değildir.

Normalde içerik türü web sunucunuzun bir yapılandırmasıdır. Yani bu çözmez, üzgünüm senin sorunun, ancak basit bir gelişme sunucusu olarak benim için çalıştı ve bazı diğer insanlara yardım düşündük. Yanıtta doğru içerik türlerine ihtiyacınız varsa, bunları açıkça joeytwiddle'ın olduğu gibi tanımlamanız veya Connect gibi mantıklı varsayılanlara sahip bir kitaplık kullanmanız gerekir. Bununla ilgili güzel olan şey, basit ve bağımsız (bağımlılık yok) olmasıdır.

Ama sorununu hissediyorum. İşte kombine çözüm.

var http = require("http"),
    url = require("url"),
    path = require("path"),
    fs = require("fs")
    port = process.argv[2] || 8888;

http.createServer(function(request, response) {

  var uri = url.parse(request.url).pathname
    , filename = path.join(process.cwd(), uri);

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

  fs.exists(filename, function(exists) {
    if(!exists) {
      response.writeHead(404, {"Content-Type": "text/plain"});
      response.write("404 Not Found\n");
      response.end();
      return;
    }

    if (fs.statSync(filename).isDirectory()) filename += '/index.html';

    fs.readFile(filename, "binary", function(err, file) {
      if(err) {        
        response.writeHead(500, {"Content-Type": "text/plain"});
        response.write(err + "\n");
        response.end();
        return;
      }

      var headers = {};
      var contentType = contentTypesByExtension[path.extname(filename)];
      if (contentType) headers["Content-Type"] = contentType;
      response.writeHead(200, headers);
      response.write(file, "binary");
      response.end();
    });
  });
}).listen(parseInt(port, 10));

console.log("Static file server running at\n  => http://localhost:" + port + "/\nCTRL + C to shutdown");

3
Bu gerçekten "sorunu" çözmez. İndex.html dosyasını ikili dosya olarak döndürürsünüz ve css ve js ile başa çıkmazsınız.
idophir

4
Css ve js işlemektedir. İndex.html dosyasını ikili dosya olarak döndürmez. Verileri hangi formatta olursa olsun diskten kopyalar. Daha fazla açıklama için lütfen güncellemelere bakın.
Jonathan Tran

kodla ilgili bir sorun, büyük / küçük harfe duyarlıdır, bazı dosyalar için
unix'te

2
"Path.exists ve path.existsSync artık kullanımdan kaldırılmıştır. Lütfen fs.exists ve fs.existsSync kullanın." stackoverflow.com/a/5008295/259
David Sykes

3
Bunun fs.exists()artık kullanımdan kaldırıldığını unutmayın . fs.stat()Bir yarış koşulu oluşturmak yerine hatayı yakalayın .
Matt

100

Eksprese ihtiyacınız yok. Bağlanmanıza gerek yok. Node.js http DOĞAL OLARAK yapar. Tek yapmanız gereken isteğe bağlı bir dosya döndürmektir:

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)    

İsteklerin bir temel dizinin altındaki dosyalara erişememesini ve düzgün hata işlemeyi gerçekleştirmesini sağlayan daha tam bir örnek:

var http = require('http')
var url = require('url')
var fs = require('fs')
var path = require('path')
var baseDirectory = __dirname   // or whatever base directory you want

var port = 9615

http.createServer(function (request, response) {
    try {
        var requestUrl = url.parse(request.url)

        // need to use path.normalize so people can't access directories underneath baseDirectory
        var fsPath = baseDirectory+path.normalize(requestUrl.pathname)

        var fileStream = fs.createReadStream(fsPath)
        fileStream.pipe(response)
        fileStream.on('open', function() {
             response.writeHead(200)
        })
        fileStream.on('error',function(e) {
             response.writeHead(404)     // assume the file doesn't exist
             response.end()
        })
   } catch(e) {
        response.writeHead(500)
        response.end()     // end the response so browsers don't hang
        console.log(e.stack)
   }
}).listen(port)

console.log("listening on port "+port)

3
Yanılmıyorsam, bu çözüm kodlama türüyle ilgilenmez, bu nedenle HTML sayfaları ve görüntüler için talepler aynı kodlamayı alır. Öyle değil mi?
idophir

2
@idophir Çoğu zaman kodlama önemli değildir, tarayıcılar kullanılan html etiketlerine veya diğer bilgilere dayanarak çıkarırlar veya gerçekten iyi tahmin ederler. Yukarıda bahsedilen biri gibi, hiçbir MIME türü yanlış olandan daha iyi değildir. Mime dosya türlerini anlamak için kesinlikle node-mime gibi bir şey kullanabilirsiniz, ancak tamamen web uyumlu bir http sunucusu bu sorunun kapsamı dışındadır.
BT

1
@Rooster Özel bir şeye ihtiyacınız yok - basitçe node thisfile.js. Çalışır, yeni bağlantılar dinler ve A. bir sinyalle kapatılıncaya kadar yeni sonuçlar döndürür.
BT

1
@Rooster Bazı şöhretlerin bir başka daemonizörü github.com/Unitech/pm2 adresinde bulunabilir
Travelling Man

1
Bu cevabı en çok beğendim, ancak iki sorun var: 1) 404 döndürmesi gerektiğinde 200 döndürür; düzeltmek için 'açık' bir geri arama içinde writeHead (200) diyorum. 2) Bir hata varsa, soket açık bırakılır; düzeltmek için 'error' geri aramada response.destroy () çağırıyorum.
Paul Brannan

70

Sanırım şu anda kaçırdığınız kısım gönderiyorsunuz:

Content-Type: text/plain

Bir web tarayıcısının HTML'yi oluşturmasını istiyorsanız, bunu şu şekilde değiştirmeniz gerekir:

Content-Type: text/html

Hızlı cevap için teşekkürler. Sayfa şimdi yükleniyor, ancak CSS'siz. CSS ve JS yüklüyken standart bir html sayfasını nasıl edinebilirim?
idophir

20
Bu sunucuyu genişletmeye başlamanız gerekiyor. Şu anda sadece index.html hizmetinin nasıl yapılacağını biliyor - buna kendi uygun MIME türleriyle foo.css ve foo.js'ye nasıl hizmet verileceğini öğretmeniz gerekiyor.
22'de clee

1
Statik dosyalar sunmak istemiyorsanız, css'nizi bir <style>etikete bırakabilirsiniz .
Keith

1
Dokuz yıl sonra, bu gerçekten doğru cevap olarak kabul edilmelidir.
rooch84

46

Adım1 (komut istemi içinde [Umarım KLASÖRÜNE cd yapıyorsunuz]): npm install express

Adım 2: Bir dosya oluşturma 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);

Lütfen WATCHFILE eklemeniz (veya nodemon kullanmanız) gerektiğini unutmayın. Yukarıdaki kod sadece basit bir bağlantı sunucusu içindir.

3.ADIM: node server.jsveyanodemon server.js

Sadece basit HTTP sunucusu barındırmak istiyorsanız artık daha kolay bir yöntem var. npm install -g http-server

ve dizinimizi ve türümüzü açın http-server

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


@STEEL, düğüm sunucusunu otomatik olarak başlatmanın herhangi bir yolu var mı? Yani dizin yoluna gitmeden ve sonra nodeserver yazdıktan sonra sadece başlayacaktır. IIS gibi düğüm sunucusunu başlatmak istiyorum. bana söyleyebilir misin
Vinoth

@Vinoth evet birçok yol var. Tam amacınız veya hedefiniz nedir, size yardımcı olabilirim
ÇELİK

@ çelik Ben komut promt düğüm sunucusu vermeden sunucuyu otomatik olarak başlatmak istiyorum. bu benim
şartım,

Tarayıcıdan bir tıklamayla Terminal komutlarını yürütebilecek ThoughtWorks GO gibi bazı araçlar kullanmanız gerekecektir.
ÇELİK

32

Hızlı yolu:

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

Senin yolun:

var http = require('http');
var fs = require('fs');

http.createServer(function (req, res) {
    console.dir(req.url);

    // will get you  '/' or 'index.html' or 'css/styles.css' ...
    // • you need to isolate extension
    // • have a small mimetype lookup array/object
    // • only there and then reading the file
    // •  delivering it after setting the right content type

    res.writeHead(200, {'Content-Type': 'text/html'});

    res.end('ok');
}).listen(3001);

19

Bir switch deyimi ile uğraşmak yerine, bir sözlükten içerik türünü aramak daha temiz olduğunu düşünüyorum:

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

...

    var contentType = contentTypesByExtension[fileExtension] || 'text/plain';

Evet, Eric B. Sowell tarafından kullanılan "switch" çözümünden çok daha şık görünüyor Teşekkürler.
idophir

Bu cevap tamamen bağlam dışı ... Bu yorumdaki bu bağlantıya atıfta bulunuyor - stackoverflow.com/questions/6084360/… (evet, her neyse, internet bozuldu)
Mars Robertson

15

Bu temelde bağlantı sürümü 3 için kabul edilen cevabın güncellenmiş bir versiyonudur:

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

var app = connect();

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

Ayrıca, index.html'nin varsayılan olarak sunulması için varsayılan bir seçenek ekledim.


13

Basit bir sunucu çalıştırmak için herhangi bir NPM modülü kullanmanıza gerek yoktur , Düğüm için " NPM Free Server " adında çok küçük bir kütüphane vardır :

50 satırlık kod, bir dosya veya klasör talep ederseniz çıktı alır ve çalışamaması durumunda kırmızı veya yeşil renk verir. Boyutu 1 KB'tan az (küçültülmüş).


Mükemmel seçim. Html, css, js ve görüntüleri sunar. Hata ayıklama için harika. Bu kodu sadece server.js yerine kullanın.
pollaris

2
Keşke daha fazla oy ekleyebilseydim! Bu harika! Dist klasöründen var filename = path.join(process.cwd() + '/dist/', uri); sunucuya küçük bir değişiklik yaptım . İçine kodu koymak ve onu işe yarıyor ben yazarkenserver.jsnpm start
John Henckel

Hizmet olarak nasıl çalıştırılır, böylece komut istemini kapatarak bile kullanabilirim. Herhangi bir araç bu tür değilse bu tür sağlar.
Sandeep sandy

13

PC'nizde yüklü bir düğüm varsa muhtemelen NPM'ye sahipsiniz, NodeJS malzemelerine ihtiyacınız yoksa, bunun için servis paketini kullanabilirsiniz :

1 - Paketi PC'nize yükleyin:

npm install -g serve

2 - Statik klasörünüzü sunun:

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

Statik klasörünüzün hangi bağlantı noktasına sunulduğunu size gösterecektir, sadece aşağıdaki gibi ana bilgisayara gidin:

http://localhost:3000

Hizmet olarak nasıl çalıştırılır, böylece komut istemini kapatarak bile kullanabilirim. Herhangi bir araç bu tür değilse bu tür sağlar.
Sandeep sandy

Bu kabul edilen cevap olmalı. Çünkü en kolayı ve kutunun dışında çalışıyor. Bu nedenle, yalnızca yol olmadan hizmet çalıştırırsanız, sunucu geçerli klasörden (daha önce CD'ye sahip olduğunuz sunucu) çalışır.
Игор Рајачић

9

Ben npm üzerinde bazı yararlı olabilir ilginç bir kütüphane buldum. Buna mime ( npm install mimeveya https://github.com/broofa/node-mime ) denir ve bir dosyanın mime türünü belirleyebilir. İşte bunu kullanarak yazdım bir web sunucusu örneği:

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

Bu, normal metin veya resim dosyalarına hizmet edecektir (.html, .css, .js, .pdf, .jpg, .png, .m4a ve .mp3 test ettiğim uzantılardır, ancak teori her şey için çalışmalıdır)

Geliştirici Notları

İşte onunla var çıktı bir örnek:

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

unescapeYol yapısındaki işleve dikkat edin . Bu, boşluklu ve kodlanmış karakterlere sahip dosya adlarına izin vermek içindir.


8

Düzenle:

Node.js örnek uygulaması Node Chat istediğiniz işlevselliğe sahiptir.
Bu README.textfile
3'te. Adım aradığınız şeydir.

Aşama 1

  • 8002 numaralı bağlantı noktasında merhaba dünyayla yanıt veren bir sunucu oluşturun

Adım 2

  • index.html oluşturun ve sunun

Aşama 3

  • util.js dosyasını tanıtın
  • mantığı, herhangi bir statik dosyanın sunulması için değiştirin
  • dosya bulunmaması durumunda 404'ü göster

step4

  • jquery-1.4.2.js'yi ekle
  • client.js ekle
  • kullanıcıdan takma ad istemek için index.html dosyasını değiştirin

İşte server.js

İşte util.js


5
Umurumda değil. Yalnızca index.html var. Ben sadece html + css + js yüklü olsun istiyorum. Teşekkürler!
idophir

16
-1 için .readFileSyncgeri arama. Node.js ile bloke olmayan IO kullanıyoruz. Lütfen Synckomut önermeyin .
Raynos

Merhaba @krmby, yardım etmeye çalıştığın için teşekkürler. Bu konuda gerçekten yeniyim. Hem server.js hem de util.js dosyalarını indirdim. "Düğüm server.js" çalıştırıp bir tarayıcı kullanarak sayfaya erişmeye çalıştığımda, bu hatayı alıyorum: TypeError: Nesne # <ServerResponse> /var/www/hppy-site/util.js adresinde 'close' yöntemi yok : 67: 8 /var/www/hppy-site/util.js:56:4 [nesne nesnesi] 'de. <anonymous> (fs.js: 107: 5) [nesne nesnesi] .emit (events.js : 61: 17) afterRead (fs.js: 970: 12) ambalajında ​​(fs.js: 245: 17) Herhangi bir fikrin var mı? BTW - projenizi indirip çalıştırdığımda da oluyor.
idophir

1
Afedersiniz. Yeni bir sürüm kullanıyordum. Res.close (), res.end () ile değiştirildi
idophir

8

Bunu yapmanın yolu öncelikle düğüm statik sunucusunu global olarak yüklemek.

npm install node-static -g

ardından html dosyalarınızı içeren dizine gidin ve statik sunucuyu ile başlatın static.

Tarayıcıya gidin ve yazın localhost:8080/"yourHtmlFile".


1
Hiçbir şey bir astarı yenemez. Teşekkür!
AndroidDev

Hizmet olarak nasıl çalıştırılır, böylece komut istemini kapatarak bile kullanabilirim. Herhangi bir araç bu tür değilse bu tür sağlar.
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);

Sanırım bunu aradığın yerde. İndex.html dosyasında, normal html kodu ile doldurmanız yeterlidir.

<html>
    <h1>Hello world</h1>
</html>

7

Temel olarak kabul edilen yanıtı kopyalama, ancak bir js dosyası oluşturmaktan kaçının.

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

Çok rahat buldum.

Güncelleme

Express'in en son sürümü itibariyle, serve-static ayrı bir ara katman yazılımı haline geldi. Sunum yapmak için bunu kullanın:

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

serve-staticÖnce kurun .


6

kimden w3schools

istenen herhangi bir dosyayı sunmak için bir düğüm sunucusu oluşturmak oldukça kolaydır ve bunun için herhangi bir paket yüklemenize gerek yoktur

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 / dosya.html

file.html dosyasını diskten sunacak



5

Url'de belirtilen dosya yoksa varsayılan html dosyasını oluşturan basit bir web sunucusunu başlatmak için aşağıdaki kodu kullanıyorum.

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

Tüm html içeriğiyle birlikte tüm js, css ve resim dosyalarını oluşturur.

"Ekstresinde Katılıyorum Hiçbir içerik türü yanlış eskisinden daha iyi olur "


5

Bunun tam olarak istediğiniz gibi olup olmadığından emin değilim, ancak değiştirmeyi deneyebilirsiniz:

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

buna:

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

Bu, tarayıcı istemcisinin dosyayı düz metin yerine html olarak görüntülemesini sağlar.


1
Bu mevcut cevapla aynı değil mi?
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'

6
Content-TypeOlmalı text/htmlbu şekilde tanımlandığı sürece,: Content-Type := type "/" subtype *[";" parameter].
t.niese

1
Bu, js olsa bile, bu klasördeki tüm dosyalarımı html türüne dönüştürüyor gibi görünüyor ...
ahnbizcad

Harika çalışıyor ....
smack kiraz

4

Biraz daha ayrıntılı ekspres 4.x sürümü, ancak dizin listeleme, sıkıştırma, önbellekleme ve minimum sayıda satırda günlük kaydı talepleri sağlar

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

Burada çılgınca karmaşık cevaplar var. NodeJS dosyalarını / veritabanını işlemek istemiyorsanız ancak sorunuzun önerdiği gibi statik html / css / js / images sunmak istiyorsanız, pushstate-server modülünü veya benzerini yükleyin ;

İşte bir mini site oluşturacak ve başlatacak "bir astar". Tüm bloğu terminalinize uygun dizine yapıştırmanız yeterlidir.

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

Tarayıcıyı açın ve http: // localhost: 3000'e gidin . Bitti.

Sunucu, appdosyaları sunmak için dizini kök olarak kullanır . Ek varlıklar eklemek için bunları ilgili dizinin içine yerleştirin.


2
Zaten statik bilginiz varsa, aşağıdakileri kullanabilirsiniz:npm install pushstate-server --save; touch server.js; echo "var server = require('pushstate-server');server.start({ port: 3000, directory: './' });" > server.js; node server.js
döner

4

Bir basit için zaten bazı harika çözümler var nodejs server. live-reloadingDosyalarınızda değişiklik yaparken ihtiyaç duyduğunuzda bir çözüm daha var .

npm install lite-server -g

dizininizde gezinin ve yapın

lite-server

canlı yeniden yükleme ile sizin için tarayıcı açacaktır.


4

Ekspres işlevi sendFile tam olarak ihtiyacınız olanı yapar ve düğümden web sunucusu işlevselliği istediğiniz için, ekspres doğal bir seçim olarak gelir ve statik dosyaları sunmak şu kadar kolay hale gelir:

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

daha fazla bilgiyi buradan edinebilirsiniz: https://expressjs.com/en/api.html#res.sendDosya

Düğüm için ekspres web sunucusuna sahip küçük bir örnek:

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

çalıştırın ve http: // localhost: 8080 adresine gidin

Css ve images gibi statik dosyaları sunmanıza izin vermek için bunu genişletmek için, başka bir örnek:

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

bu nedenle css adlı bir alt klasör oluşturun, statik içeriğinizi içine koyun ve aşağıdaki gibi kolay başvuru için index.html'nizde kullanılabilir olacaktır:

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

Href göreli yol dikkat edin!

işte!


3

Yukarıdaki cevapların çoğu, içeriğin nasıl sunulduğunu çok iyi açıklamaktadır. Ne ek olarak bakıyordu dizinin diğer içeriğine gözatılabilir böylece dizini listeleme oldu. İşte diğer okuyucular için benim çözüm:

'use strict';

var finalhandler = require('finalhandler');
var http = require('http');
var serveIndex = require('serve-index');
var serveStatic = require('serve-static');
var appRootDir = require('app-root-dir').get();
var log = require(appRootDir + '/log/bunyan.js');

var PORT = process.env.port || 8097;

// Serve directory indexes for reports folder (with icons)
var index = serveIndex('reports/', {'icons': true});

// Serve up files under the folder
var serve = serveStatic('reports/');

// Create server
var server = http.createServer(function onRequest(req, res){
    var done = finalhandler(req, res);
    serve(req, res, function onNext(err) {
    if (err)
        return done(err);
    index(req, res, done);
    })
});


server.listen(PORT, log.info('Server listening on: ', PORT));

2

Bu, web sayfalarını hızlı bir şekilde görmek için kullandığım en hızlı çözümlerden biri

sudo npm install ripple-emulator -g

O andan itibaren sadece html dosyalarınızın dizinini girin ve çalıştırın

ripple emulate

ardından cihazı Nexus 7 yatay olarak değiştirin.


5
Nexus 7'nin bununla ne yapacak?
waeltken

2

Karşılaştığım daha basit sürüm aşağıdaki gibidir. Eğitim amacıyla, en iyisidir, çünkü herhangi bir soyut kütüphane kullanmaz.

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

Şimdi tarayıcıya gidin ve aşağıdakileri açın:

http://127.0.0.1/image.jpg

İşte image.jpgbu dosya ile aynı dizinde olmalıdır. Umarım bu birine yardımcı olur :)


Mime tipini dosya adından ayırmamalısınız.
mwieczorek

Not: fs.exists () kullanımdan kaldırılmıştır, fs.existsSync () doğrudan değiştirmedir.
JWAspin

@mwieczorek nasıl ilahi olmalı? Dosya uzantısını bölmeyi özlediniz mi?
James Newton

Kullanmak isteyebilir: let mimeType = mimeTypes [dosyaadı.split ("."). Pop ()] || "uygulama / octet-stream"
James Newton

1

SugoiJS'i de tavsiye edebilirim, kurulumu çok kolay ve hızlı yazmaya başlamak için bir seçenek sunuyor ve harika özelliklere sahip.

Başlamak için buraya bir göz atın: http://demo.sugoijs.com/ , belgeler: https://wiki.sugoijs.com/

Dekoratörleri işleme talebi, talep politikaları ve yetkilendirme politikaları dekoratörleri vardır.

Örneğin:

import {Controller,Response,HttpGet,RequestParam} from "@sugoi/server";

@Controller('/dashboard')
export class CoreController{
    constructor(){}

    @HttpGet("/:role")
    test(@RequestParam('role') role:string,
         @RequestHeader("role") headerRole:string){
        if(role === headerRole )
            return "authorized";
        else{
            throw new Error("unauthorized")
        }
    }
}

1

Bugünkü tonlarca kütüphane ile çok kolay. Buradaki cevaplar işlevseldir. Daha hızlı ve basit bir başlangıç ​​için başka bir sürüm istiyorsanız

Tabii ki önce node.js yükleyin. Sonra:

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

Burada " https://raw.githubusercontent.com/voxsoftware/kawix-core/master/example/npmrequire/express-static.js " içeriği ( indirmenize gerek yok, arkasında nasıl çalıştığını anlamak için yayınladım)

// 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")
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.