ฉันต้องการเรียกใช้เซิร์ฟเวอร์ HTTP ที่ง่ายมาก ทุกคำขอ GET example.comควรindex.htmlให้แสดง แต่เป็นหน้า HTML ปกติ (เช่นประสบการณ์เดียวกับเมื่อคุณอ่านหน้าเว็บปกติ)

index.htmlการใช้โค้ดข้างล่างนี้ผมสามารถอ่านเนื้อหาของ ฉันจะทำหน้าที่index.htmlเป็นเว็บเพจปกติได้อย่างไร

var http = require('http');
var fs = require('fs');
var index = fs.readFileSync('index.html');

http.createServer(function (req, res) {
  res.writeHead(200, {'Content-Type': 'text/plain'});
  res.end(index);
}).listen(9615);

คำแนะนำหนึ่งข้อด้านล่างนี้ซับซ้อนและกำหนดให้ฉันเขียนgetบรรทัดสำหรับแต่ละไฟล์ (CSS, JavaScript, ภาพ) ที่ฉันต้องการใช้

ฉันจะแสดงหน้า HTML หน้าเดียวด้วยรูปภาพ, CSS และ JavaScript ได้อย่างไร

เซิร์ฟเวอร์ Node.js ที่ง่ายที่สุดคือ:

$ npm install http-server -g

ตอนนี้คุณสามารถรันเซิร์ฟเวอร์ผ่านคำสั่งต่อไปนี้:

$ cd MyApp

$ http-server

หากคุณกำลังใช้ NPM 5.2.0 หรือใหม่กว่าคุณสามารถใช้โดยไม่ต้องติดตั้งด้วยhttp-server npxไม่แนะนำให้ใช้ในการผลิต แต่เป็นวิธีที่ดีในการทำให้เซิร์ฟเวอร์ทำงานบน localhost ได้อย่างรวดเร็ว

$ npx http-server

หรือคุณสามารถลองสิ่งนี้ซึ่งเปิดเว็บเบราว์เซอร์และเปิดใช้งานคำขอ CORS:

$ http-server -o --cors

สำหรับตัวเลือกเพิ่มเติมโปรดดูเอกสารสำหรับhttp-serverGitHubหรือเรียกใช้:

$ http-server --help

คุณสมบัติที่ดีอื่น ๆ อีกมากมายและการปรับใช้ง่าย ๆ ที่ NodeJitsu

คุณสมบัติส้อม

แน่นอนคุณสามารถเติมคุณสมบัติด้วยส้อมของคุณเอง คุณอาจพบว่ามีการใช้งานแล้วในหนึ่งใน 800+ ส้อมที่มีอยู่ของโครงการนี้:

• https://github.com/nodeapps/http-server/network

Light Server: ทางเลือกการรีเฟรชอัตโนมัติ

ทางเลือกที่ดีที่จะมีhttp-server light-serverรองรับการรับชมไฟล์และรีเฟรชอัตโนมัติและคุณสมบัติอื่น ๆ อีกมากมาย

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

เพิ่มในเมนูบริบทของไดเรกทอรีใน 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\""

เซิร์ฟเวอร์ JSON REST แบบง่าย

หากคุณต้องการสร้างเซิร์ฟเวอร์ REST แบบง่ายสำหรับโครงการต้นแบบจากนั้นjson-serverอาจเป็นสิ่งที่คุณกำลังมองหา

ตัวแก้ไขการรีเฟรชอัตโนมัติ

เครื่องมือแก้ไขหน้าเว็บและเครื่องมือ IDE ส่วนใหญ่ในขณะนี้มีเว็บเซิร์ฟเวอร์ที่จะดูไฟล์ต้นฉบับของคุณและรีเฟรชหน้าเว็บอัตโนมัติเมื่อมีการเปลี่ยนแปลง

ฉันใช้เซิร์ฟเวอร์สดด้วยรหัส Visual Studio

มาเปิดโปรแกรมแก้ไขข้อความวงเล็บยังมี NodeJS เว็บเซิร์ฟเวอร์แบบคงที่ เพียงแค่เปิดไฟล์ HTML ใด ๆ ในวงเล็บกด " แสดงตัวอย่างแบบสด " และมันจะเริ่มเซิร์ฟเวอร์คงที่และเปิดเบราว์เซอร์ของคุณที่หน้า เบราว์เซอร์จะรีเฟรชอัตโนมัติ ** ทุกครั้งที่คุณแก้ไขและบันทึกไฟล์ HTML สิ่งนี้มีประโยชน์อย่างยิ่งเมื่อทำการทดสอบเว็บไซต์ที่มีการปรับตัว เปิดหน้า HTML ของคุณในเบราว์เซอร์ / ขนาด / อุปกรณ์หลายหน้าต่าง บันทึกหน้า HTML ของคุณและดูว่าสิ่งที่ปรับตัวของคุณทำงานอยู่หรือไม่ในขณะที่รีเฟรชอัตโนมัติทั้งหมด

นักพัฒนา PhoneGap

หากคุณกำลังเข้ารหัสapp มือถือไฮบริดที่คุณอาจจะสนใจที่จะรู้ว่าPhoneGapทีมเอาแนวคิดนี้รีเฟรชอัตโนมัติบนกระดานกับใหม่ของพวกเขาPhoneGap App นี่เป็นแอพมือถือทั่วไปที่สามารถโหลดไฟล์ HTML5 จากเซิร์ฟเวอร์ในระหว่างการพัฒนา นี่เป็นเคล็ดลับที่ลื่นมากตั้งแต่ตอนนี้คุณสามารถข้ามขั้นตอนการคอมไพล์ / ปรับใช้แบบช้าในวงจรการพัฒนาสำหรับแอพมือถือไฮบริดหากคุณกำลังเปลี่ยนไฟล์ JS / CSS / HTML ซึ่งเป็นสิ่งที่คุณทำอยู่เกือบตลอดเวลา นอกจากนี้ยังมีเว็บเซิร์ฟเวอร์ NodeJS แบบคงที่ (รันphonegap serve) ที่ตรวจพบการเปลี่ยนแปลงไฟล์

PhoneGap + Sencha Touch Developers

ตอนนี้ฉันได้ทำการปรับแต่งเซิร์ฟเวอร์แบบคงที่ PhoneGap และแอพผู้พัฒนา PhoneGap สำหรับนักพัฒนา Sencha Touch & jQuery Mobile ตรวจสอบออกที่Sencha สัมผัสสด รองรับ --qr รหัส QR และ --locununun ที่พร็อกซีเซิร์ฟเวอร์คงที่ของคุณจากคอมพิวเตอร์เดสก์ท็อปของคุณไปยัง URL นอกไฟร์วอลล์ของคุณ! ตันการใช้งาน การเร่งความเร็วสูงสำหรับอุปกรณ์มือถือไฮบริด

Cordova + Ionic Framework Developers

คุณสมบัติการรีเฟรชเซิร์ฟเวอร์ในพื้นที่และการรีเฟรชอัตโนมัตินั้นเป็นionicเครื่องมือ เพียงเรียกใช้ionic serveจากโฟลเดอร์แอปของคุณ ยิ่งไปกว่านั้น ... ionic serve --labเพื่อดูมุมมองรีเฟรชอัตโนมัติเคียงข้างกันของทั้ง iOS และ Android

คุณสามารถใช้เชื่อมต่อและServeStaticกับ Node.js สำหรับสิ่งนี้:

1. ติดตั้งการเชื่อมต่อและบริการคงที่ด้วย NPM

   $ npm install connect serve-static

2. สร้างไฟล์ server.js พร้อมเนื้อหานี้:

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

3. ทำงานกับ Node.js

   $ node server.js

ตอนนี้คุณสามารถไปที่ http://localhost:8080/yourfile.html

ตรวจสอบส่วนสำคัญนี้ ฉันทำซ้ำที่นี่เพื่อการอ้างอิง แต่ส่วนสำคัญได้รับการปรับปรุงเป็นประจำ

Node.JS เว็บเซิร์ฟเวอร์ไฟล์คงที่ วางไว้ในพา ธ ของคุณเพื่อให้เซิร์ฟเวอร์ทำงานในไดเรกทอรีใด ๆ รับอาร์กิวเมนต์พอร์ตเพิ่มเติม

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

http.createServer(function(request, response) {

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

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

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

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

      response.writeHead(200);
      response.write(file, "binary");
      response.end();
    });
  });
}).listen(parseInt(port, 10));

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

ปรับปรุง

ส่วนสำคัญจะจัดการกับไฟล์ css และ js ฉันใช้มันเอง การใช้การอ่าน / เขียนในโหมด "ไบนารี" ไม่ใช่ปัญหา นั่นหมายความว่าไฟล์นั้นไม่ได้แปลเป็นข้อความโดยไลบรารีไฟล์และไม่เกี่ยวข้องกับประเภทเนื้อหาที่ส่งคืนในการตอบกลับ

ปัญหาเกี่ยวกับรหัสของคุณคือคุณจะส่งคืนประเภทเนื้อหาของ "text / plain" เสมอ โค้ดด้านบนไม่ได้ส่งคืนเนื้อหาประเภทใด ๆ แต่ถ้าคุณเพียงแค่ใช้มันสำหรับ HTML, CSS และ JS เบราว์เซอร์สามารถอนุมานได้ว่าเป็นเรื่องที่ดี ไม่มีประเภทเนื้อหาใดจะดีไปกว่าเนื้อหาที่ผิด

โดยปกติประเภทเนื้อหาคือการกำหนดค่าของเว็บเซิร์ฟเวอร์ของคุณ ดังนั้นฉันจึงต้องขออภัยถ้านี่ไม่ได้แก้ปัญหาของคุณแต่มันทำงานให้ฉันเป็นเซิร์ฟเวอร์การพัฒนาที่เรียบง่ายและคิดว่ามันอาจช่วยคนอื่น หากคุณต้องการประเภทเนื้อหาที่ถูกต้องในการตอบสนองคุณต้องกำหนดอย่างชัดเจนตามที่ joeytwiddle มีหรือใช้ไลบรารีเช่น Connect ที่มีค่าเริ่มต้นที่เหมาะสม สิ่งที่ดีเกี่ยวกับเรื่องนี้คือมันง่ายและอยู่ในตัวเอง (ไม่มีการอ้างอิง)

แต่ฉันรู้สึกถึงปัญหาของคุณ ดังนั้นนี่คือคำตอบรวมกัน

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

http.createServer(function(request, response) {

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

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

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

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

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

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

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

คุณไม่ต้องการด่วน คุณไม่จำเป็นต้องเชื่อมต่อ Node.js ทำ http NATIVELY สิ่งที่คุณต้องทำคือส่งคืนไฟล์ที่ขึ้นอยู่กับคำขอ:

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

http.createServer(function (request, response) {
    var requestUrl = url.parse(request.url)    
    response.writeHead(200)
    fs.createReadStream(requestUrl.pathname).pipe(response)  // do NOT use fs's sync methods ANYWHERE on production (e.g readFileSync) 
}).listen(9615)    

ตัวอย่างที่สมบูรณ์ยิ่งขึ้นที่ทำให้การร้องขอไม่สามารถเข้าถึงไฟล์ที่อยู่ภายใต้ไดเรกทอรีฐานและจัดการข้อผิดพลาดที่เหมาะสม:

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

var port = 9615

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

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

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

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

ฉันคิดว่าส่วนที่คุณขาดไปตอนนี้ก็คือคุณกำลังส่ง:

Content-Type: text/plain

หากคุณต้องการให้เว็บเบราว์เซอร์แสดง HTML คุณควรเปลี่ยนเป็น:

Content-Type: text/html

ขั้นที่ 1 (พร้อมรับคำสั่งภายใน [ฉันหวังว่าคุณจะ cd ไปยังโฟลเดอร์ของคุณ]): npm install express

ขั้นตอนที่ 2: สร้างไฟล์ server.js

var fs = require("fs");
var host = "127.0.0.1";
var port = 1337;
var express = require("express");

var app = express();
app.use(express.static(__dirname + "/public")); //use static files in ROOT/public folder

app.get("/", function(request, response){ //root dir
    response.send("Hello!!");
});

app.listen(port, host);

โปรดทราบว่าคุณควรเพิ่ม WATCHFILE (หรือใช้ nodemon) ด้วย โค้ดด้านบนมีไว้สำหรับเซิร์ฟเวอร์การเชื่อมต่อแบบธรรมดาเท่านั้น

ขั้นตอนที่ 3: node server.jsหรือnodemon server.js

ขณะนี้มีวิธีการที่ง่ายกว่าถ้าคุณต้องการโฮสต์เซิร์ฟเวอร์ HTTP แบบง่าย npm install -g http-server

และเปิดไดเรกทอรีและประเภทของเรา http-server

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

วิธีที่รวดเร็ว:

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

ทางของคุณ:

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

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

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

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

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

แทนที่จะจัดการกับคำสั่ง switch ฉันคิดว่ามันเป็นสิ่งที่ดีกว่าที่จะค้นหาประเภทเนื้อหาจากพจนานุกรม:

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

...

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

นี่เป็นคำตอบที่ได้รับการยอมรับสำหรับการเชื่อมต่อเวอร์ชั่น 3 โดยทั่วไป:

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

var app = connect();

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

ฉันยังเพิ่มตัวเลือกเริ่มต้นเพื่อให้ index.html ทำหน้าที่เป็นค่าเริ่มต้น

คุณไม่จำเป็นต้องใช้โมดูล NPM ใด ๆ เพื่อเรียกใช้เซิร์ฟเวอร์อย่างง่ายมีไลบรารีเล็ก ๆ ที่เรียกว่า " NPM Free Server " สำหรับโหนด:

• เซิร์ฟเวอร์ NPM ฟรีบน GitHub

โค้ด 50 บรรทัดแสดงผลหากคุณร้องขอไฟล์หรือโฟลเดอร์และให้สีแดงหรือเขียวหากไม่สามารถใช้งานได้ ขนาดน้อยกว่า 1KB (ย่อเล็กสุด)

หากคุณติดตั้งโหนดบนพีซีของคุณอาจเป็นไปได้ว่าคุณมี NPM หากคุณไม่ต้องการ NodeJS คุณสามารถใช้แพคเกจบริการสำหรับสิ่งนี้:

1 - ติดตั้งแพ็คเกจบนพีซีของคุณ:

npm install -g serve

2 - ให้บริการโฟลเดอร์คงที่ของคุณ:

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

มันจะแสดงให้คุณเห็นว่าพอร์ตใดที่โฟลเดอร์แบบสแตติกของคุณกำลังทำงานอยู่ให้ไปที่โฮสต์เช่น:

http://localhost:3000

ฉันพบห้องสมุดที่น่าสนใจในเวลา 23.00 น. ที่อาจเป็นประโยชน์สำหรับคุณ มันเรียกว่า mime ( npm install mimeหรือhttps://github.com/broofa/node-mime ) และสามารถกำหนดประเภท mime ของไฟล์ได้ นี่คือตัวอย่างของเว็บเซิร์ฟเวอร์ที่ฉันเขียนโดยใช้มัน:

var mime = require("mime"),http = require("http"),fs = require("fs");
http.createServer(function (req, resp) {
path  = unescape(__dirname + req.url)
var code = 200
 if(fs.existsSync(path)) {
    if(fs.lstatSync(path).isDirectory()) {
        if(fs.existsSync(path+"index.html")) {
        path += "index.html"
        } else {
            code = 403
            resp.writeHead(code, {"Content-Type": "text/plain"});
            resp.end(code+" "+http.STATUS_CODES[code]+" "+req.url);
        }
    }
    resp.writeHead(code, {"Content-Type": mime.lookup(path)})
    fs.readFile(path, function (e, r) {
    resp.end(r);

})
} else {
    code = 404
    resp.writeHead(code, {"Content-Type":"text/plain"});
    resp.end(code+" "+http.STATUS_CODES[code]+" "+req.url);
}
console.log("GET "+code+" "+http.STATUS_CODES[code]+" "+req.url)
}).listen(9000,"localhost");
console.log("Listening at http://localhost:9000")

สิ่งนี้จะให้บริการไฟล์ข้อความหรือรูปภาพทั่วไป (.html, .css, .js, .pdf, .jpg, .png, .m4a และ. mp3 เป็นส่วนขยายที่ฉันได้ทดสอบ แต่ทฤษฎีควรใช้กับทุกอย่าง)

หมายเหตุสำหรับนักพัฒนา

นี่เป็นตัวอย่างของผลลัพธ์ที่ฉันได้รับ:

Listening at http://localhost:9000
GET 200 OK /cloud
GET 404 Not Found /cloud/favicon.ico
GET 200 OK /cloud/icon.png
GET 200 OK /
GET 200 OK /501.png
GET 200 OK /cloud/manifest.json
GET 200 OK /config.log
GET 200 OK /export1.png
GET 200 OK /Chrome3DGlasses.pdf
GET 200 OK /cloud
GET 200 OK /-1
GET 200 OK /Delta-Vs_for_inner_Solar_System.svg

สังเกตเห็นว่าunescapeฟังก์ชั่นในการก่อสร้างเส้นทาง นี่คือการอนุญาตสำหรับชื่อไฟล์ที่มีช่องว่างและอักขระที่เข้ารหัส

แก้ไข:

แอปตัวอย่าง Node.js Node Chatมีฟังก์ชันที่คุณต้องการ
ในREADME.textfile
3 ขั้นตอนคือสิ่งที่คุณกำลังมองหา

ขั้นตอนที่ 1

• สร้างเซิร์ฟเวอร์ที่ตอบสนองด้วย hello world บนพอร์ต 8002

ขั้นตอนที่ 2

• สร้าง index.html และให้บริการ

ขั้นตอนที่ 3

• แนะนำ util.js
• เปลี่ยนตรรกะเพื่อให้บริการไฟล์สแตติกใด ๆ
• แสดง 404 ในกรณีที่ไม่พบไฟล์

step4

• เพิ่ม jquery-1.4.2.js
• เพิ่ม client.js
• เปลี่ยน index.html เพื่อแจ้งให้ผู้ใช้ชื่อเล่น

นี่คือserver.js

นี่คือutil.js

วิธีที่ฉันทำคือการติดตั้งโหนดเซิร์ฟเวอร์คงที่ทั่วโลกผ่าน

npm install node-static -g

จากนั้นไปที่ไดเรกทอรีที่มีไฟล์ html staticของคุณและเริ่มต้นเซิร์ฟเวอร์แบบคงที่ด้วย

localhost:8080/"yourHtmlFile"ไปที่เบราว์เซอร์และประเภท

var http = require('http');
var fs = require('fs');
var index = fs.readFileSync('index.html');

http.createServer(function (req, res) {
    res.writeHead(200, {'Content-Type': 'text/html'});
    // change the to 'text/plain' to 'text/html' it will work as your index page
    res.end(index);
}).listen(9615);

ฉันคิดว่าคุณกำลังค้นหาสิ่งนี้อยู่ ใน index.html ของคุณเพียงกรอกรหัส html ปกติไม่ว่าคุณต้องการแสดงผลแบบใดเช่น:

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

โดยทั่วไปการคัดลอกคำตอบที่ยอมรับ แต่หลีกเลี่ยงการสร้างไฟล์ js

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

พบว่ามันสะดวกมาก

ปรับปรุง

ในฐานะ Express รุ่นล่าสุดเซอร์วิสแบบคงที่ได้กลายเป็นมิดเดิลแวร์ที่แยกต่างหาก ใช้สิ่งนี้เพื่อแสดง:

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

ติดตั้งserve-staticก่อน

จาก w3schools

มันค่อนข้างง่ายในการสร้างโหนดเซิร์ฟเวอร์เพื่อให้บริการไฟล์ที่ร้องขอและคุณไม่จำเป็นต้องติดตั้งแพ็กเกจใด ๆ

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

http.createServer(function (req, res) {
  var q = url.parse(req.url, true);
  var filename = "." + q.pathname;
  fs.readFile(filename, function(err, data) {
    if (err) {
      res.writeHead(404, {'Content-Type': 'text/html'});
      return res.end("404 Not Found");
    }  
    res.writeHead(200, {'Content-Type': 'text/html'});
    res.write(data);
    return res.end();
  });
}).listen(8080);

http: // localhost: 8080 / file.html

จะให้บริการไฟล์. html จากดิสก์

คุณสามารถพิมพ์มันลงในเปลือกของคุณได้

npx serve

Repo: https://github.com/zeit/serve

ฉันใช้โค้ดด้านล่างเพื่อเริ่มต้นเว็บเซิร์ฟเวอร์แบบง่ายซึ่งแสดงไฟล์ html เริ่มต้นหากไม่มีไฟล์ที่กล่าวถึงใน Url

var http = require('http'),
fs = require('fs'),
url = require('url'),
rootFolder = '/views/',
defaultFileName = '/views/5 Tips on improving Programming Logic   Geek Files.htm';


http.createServer(function(req, res){

    var fileName = url.parse(req.url).pathname;
    // If no file name in Url, use default file name
    fileName = (fileName == "/") ? defaultFileName : rootFolder + fileName;

    fs.readFile(__dirname + decodeURIComponent(fileName), 'binary',function(err, content){
        if (content != null && content != '' ){
            res.writeHead(200,{'Content-Length':content.length});
            res.write(content);
        }
        res.end();
    });

}).listen(8800);

มันจะแสดงไฟล์ js, css และรูปภาพทั้งหมดพร้อมกับเนื้อหา html ทั้งหมด

เห็นด้วยกับข้อความสั่ง " ไม่มีเนื้อหาประเภทใดจะดีไปกว่าเนื้อหาที่ผิด "

ฉันไม่แน่ใจว่านี่เป็นสิ่งที่คุณต้องการอย่างแน่นอนอย่างไรก็ตามคุณสามารถลองเปลี่ยนแปลงได้:

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

สำหรับสิ่งนี้:

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

นี่จะให้เบราว์เซอร์ไคลเอ็นต์แสดงไฟล์เป็น html แทนที่จะเป็นข้อความล้วน

var http = require('http');
var fs = require('fs');
var index = fs.readFileSync('index.html');

http.createServer(function (req, res) {
res.writeHead(200, {'Content-Type': 'html'});
res.end(index);
}).listen(9615);

//Just Change The CONTENT TYPE to 'html'

เล็กน้อยมากขึ้น verbose แสดง 4.x รุ่น แต่ที่ให้รายการไดเรกทอรี, การบีบอัดแคชและการร้องขอการเข้าสู่ระบบในจำนวนที่น้อยที่สุดของสาย

var express = require('express');
var compress = require('compression');
var directory = require('serve-index');
var morgan = require('morgan'); //logging for express

var app = express();

var oneDay = 86400000;

app.use(compress());
app.use(morgan());
app.use(express.static('filesdir', { maxAge: oneDay }));
app.use(directory('filesdir', {'icons': true}))

app.listen(process.env.PORT || 8000);

console.log("Ready To serve files !")

จำนวนคำตอบที่ซับซ้อนอย่างบ้าคลั่งที่นี่ หากคุณไม่ต้องการประมวลผลไฟล์ / ฐานข้อมูล nodeJS แต่ต้องการให้บริการ html / css / js / images แบบคงที่ตามที่คำถามของคุณแนะนำจากนั้นเพียงติดตั้งpushstate-serverโมดูลหรือสิ่งที่คล้ายกัน

นี่คือ "หนึ่งซับ" ที่จะสร้างและเปิดตัวมินิไซต์ เพียงวางบล็อกทั้งหมดนั้นในเทอร์มินัลของคุณในไดเรกทอรีที่เหมาะสม

mkdir mysite; \
cd mysite; \
npm install pushstate-server --save; \
mkdir app; \
touch app/index.html; \
echo '<h1>Hello World</h1>' > app/index.html; \
touch server.js; \
echo "var server = require('pushstate-server');server.start({ port: 3000, directory: './app' });" > server.js; \
node server.js

เบราว์เซอร์เปิดและไปที่http: // localhost: 3000 เสร็จสิ้น

เซิร์ฟเวอร์จะใช้appdir เป็นรูทเพื่อให้บริการไฟล์จาก หากต้องการเพิ่มเนื้อหาเพิ่มเติมให้วางไว้ในไดเรกทอรีนั้น

มีวิธีแก้ปัญหาที่ยอดเยี่ยมสำหรับการใช้งานที่ง่ายnodejs serverอยู่แล้ว มีวิธีแก้ไขเพิ่มเติมอีกวิธีหนึ่งถ้าคุณต้องการlive-reloadingเมื่อคุณทำการเปลี่ยนแปลงไฟล์ของคุณ

npm install lite-server -g

สำรวจไดเรกทอรีของคุณและทำ

lite-server

มันจะเปิดเบราว์เซอร์สำหรับคุณด้วยการรีโหลดสด

ฟังก์ชั่นเอ็กซ์เพรส sendfile ไม่ตรงกับสิ่งที่คุณต้องการและตั้งแต่คุณต้องการฟังก์ชั่นเว็บเซิร์ฟเวอร์จากโหนดด่วนมาเป็นทางเลือกธรรมชาติและจากนั้นให้บริการไฟล์คงกลายเป็นเรื่องง่ายที่:

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

อ่านเพิ่มเติมได้ที่นี่: https://expressjs.com/th/api.html#res.sendFile

ตัวอย่างเล็ก ๆ กับ express เว็บเซิร์ฟเวอร์สำหรับโหนด:

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

เรียกใช้สิ่งนี้และไปที่http: // localhost: 8080

หากต้องการขยายตัวเพื่อให้คุณสามารถรับไฟล์คงที่เช่น css และรูปภาพนี่เป็นอีกตัวอย่าง:

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

ดังนั้นสร้างโฟลเดอร์ย่อยที่เรียกว่า css ใส่เนื้อหาสแตติกของคุณลงไปและจะสามารถใช้ได้กับ index.html ของคุณสำหรับการอ้างอิงอย่างง่ายเช่น:

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

ขอให้สังเกตทางญาติใน href!

voila!

คำตอบส่วนใหญ่ข้างต้นอธิบายอย่างดีว่าเนื้อหามีการแสดงอย่างไร สิ่งที่ฉันดูเพิ่มเติมคือรายชื่อของไดเรกทอรีเพื่อให้เนื้อหาอื่น ๆ ของไดเรกทอรีสามารถเรียกดูได้ นี่คือทางออกของฉันสำหรับผู้อ่านเพิ่มเติม:

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

นี่คือหนึ่งในโซลูชันที่เร็วที่สุดที่ฉันใช้เพื่อดูเว็บเพจอย่างรวดเร็ว

sudo npm install ripple-emulator -g

จากนั้นป้อนไดเรกทอรีของไฟล์ html ของคุณและเรียกใช้

ripple emulate

จากนั้นเปลี่ยนอุปกรณ์เป็นแนวนอน Nexus 7

เวอร์ชั่นที่เรียบง่ายกว่าที่ฉันเคยเจอมีดังต่อไปนี้ เพื่อจุดประสงค์ด้านการศึกษานั้นดีที่สุดเพราะไม่ได้ใช้ห้องสมุดนามธรรม

var http = require('http'),
url = require('url'),
path = require('path'),
fs = require('fs');

var mimeTypes = {
  "html": "text/html",
  "mp3":"audio/mpeg",
  "mp4":"video/mp4",
  "jpeg": "image/jpeg",
  "jpg": "image/jpeg",
  "png": "image/png",
  "js": "text/javascript",
  "css": "text/css"};

http.createServer(function(req, res) {
    var uri = url.parse(req.url).pathname;
    var filename = path.join(process.cwd(), uri);
    fs.exists(filename, function(exists) {
        if(!exists) {
            console.log("not exists: " + filename);
            res.writeHead(200, {'Content-Type': 'text/plain'});
            res.write('404 Not Found\n');
            res.end();
            return;
        }
        var mimeType = mimeTypes[path.extname(filename).split(".")[1]];
        res.writeHead(200, {'Content-Type':mimeType});

        var fileStream = fs.createReadStream(filename);
        fileStream.pipe(res);

    }); //end path.exists
}).listen(1337);

ตอนนี้ไปที่เบราว์เซอร์และเปิดต่อไปนี้:

http://127.0.0.1/image.jpg

ที่นี่image.jpgควรอยู่ในไดเรกทอรีเดียวกับไฟล์นี้ หวังว่านี้จะช่วยให้คน :)

ฉันยังสามารถแนะนำ SugoiJS ได้อย่างง่ายดายตั้งค่าและให้ตัวเลือกในการเริ่มเขียนได้อย่างรวดเร็วและมีคุณสมบัติที่ยอดเยี่ยม

ดูที่นี่เพื่อเริ่มต้น: http://demo.sugoijs.com/ , เอกสารประกอบ: https://wiki.sugoijs.com/

มันมีการร้องขอการจัดการตกแต่งภายในนโยบายการร้องขอและการตกแต่งนโยบายการอนุญาต

ตัวอย่างเช่น:

import {Controller,Response,HttpGet,RequestParam} from "@sugoi/server";
​
@Controller('/dashboard')
export class CoreController{
    constructor(){}
​
    @HttpGet("/:role")
    test(@RequestParam('role') role:string,
         @RequestHeader("role") headerRole:string){
        if(role === headerRole )
            return "authorized";
        else{
            throw new Error("unauthorized")
        }
    }
}

เป็นเรื่องง่ายมากที่มีห้องสมุดเป็นจำนวนมากในปัจจุบัน คำตอบที่นี่ใช้งานได้จริง หากคุณต้องการรุ่นอื่นสำหรับการเริ่มต้นที่รวดเร็วและง่าย

แน่นอนติดตั้งแรก node.js ต่อมา:

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

นี่คือเนื้อหาของ " https://raw.githubusercontent.com/voxsoftware/kawix-core/master/example/npmrequire/express-static.js " (คุณไม่จำเป็นต้องดาวน์โหลดฉันโพสต์เพราะเข้าใจว่าทำงานอย่างไร)

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