ไฟล์เซิร์ฟเวอร์ด่วนของ Node.js (ไฟล์คงที่ผ่าน HTTP)


642

มีเครื่องมือพร้อมใช้ของ Node.js (ติดตั้งด้วยnpm) หรือไม่ซึ่งจะช่วยให้ฉันเปิดเผยเนื้อหาของโฟลเดอร์เป็นไฟล์เซิร์ฟเวอร์ผ่าน HTTP

ตัวอย่างถ้าฉันมี

D:\Folder\file.zip
D:\Folder\file2.html
D:\Folder\folder\file-in-folder.jpg

จากนั้นเริ่มต้นในD:\Folder\ node node-file-server.js ฉันสามารถเข้าถึงไฟล์ผ่าน

http://hostname/file.zip
http://hostname/file2.html
http://hostname/folder/file-in-folder.jpg

เหตุใดเซิร์ฟเวอร์คำร้องขอการส่งโหนดแบบสแตติกของฉันจึงลดลง อ้างอิงลึกลับบางอย่าง

เซิร์ฟเวอร์ไฟล์แบบคงที่ node.js มาตรฐาน

หากไม่มีเครื่องมือดังกล่าวฉันควรใช้กรอบใด

ที่เกี่ยวข้อง: เซิร์ฟเวอร์ไฟล์สแตติกพื้นฐานใน NodeJS


ฉันเขียนโมดูลชื่อ Cachemere ซึ่งให้คุณทำสิ่งนี้ได้ นอกจากนี้ยังแคชทรัพยากรทั้งหมดของคุณโดยอัตโนมัติ ลองดู: github.com/topcloud/cachemere
Jon

npmjs.com/package/local-web-server - เว็บเซิร์ฟเวอร์แบบคงที่ที่มีน้ำหนักเบาการกำหนดค่าเป็นศูนย์
วิคเตอร์

คำตอบ:


1090

ตัวเลือก "เครื่องมือพร้อมใช้ที่ดี" อาจเป็น http-server:

npm install http-server -g

วิธีใช้:

cd D:\Folder
http-server

หรือเช่นนี้

http-server D:\Folder

ลองดูสิ: https://github.com/nodeapps/http-server


10
นี่มันเจ๋งมาก. ฉันต้องการระบุที่อยู่ bc ด้วยเหตุผลบางอย่างค่าเริ่มต้น 0.0.0.0 ไม่ได้ให้ความร่วมมือกับสภาพแวดล้อม dev ของฉัน http-server -a localhostเอ่อดัน
Sam Berry

41
ฉันใช้http-server -a localhost -p 80
มูฮัมหมัดอูเมอร์

10
การตรวจสอบเบราว์เซอร์ก็มีค่าเช่นกันซึ่งสามารถทำสิ่งเดียวกันได้มากกว่าหรือน้อยกว่า แต่ด้วยโบนัสเพิ่มเติมของการอัปเดตสดเมื่อมีการแก้ไขไฟล์
Nick F

3
--corsที่จะส่งAccess-Control-Allow-Origin:*ไปพร้อมกับส่วนหัวของการตอบสนอง (เช่นเมื่อให้บริการไฟล์ JSON ก)
แดเนียลเรนไฮน์

9
npx http-server- npx เปลี่ยนเป็นไฟล์เดียวที่ดาวน์โหลดไฟล์ที่จำเป็นและรัน
Mike McKay

186

หากคุณไม่ต้องการใช้เครื่องมือพร้อมคุณสามารถใช้รหัสด้านล่างดังที่ฉันสาธิตได้ที่https://developer.mozilla.org/en-US/docs/Node_server_without_framework :

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

http.createServer(function (request, response) {
    console.log('request starting...');

    var filePath = '.' + request.url;
    if (filePath == './')
        filePath = './index.html';

    var extname = path.extname(filePath);
    var contentType = 'text/html';
    switch (extname) {
        case '.js':
            contentType = 'text/javascript';
            break;
        case '.css':
            contentType = 'text/css';
            break;
        case '.json':
            contentType = 'application/json';
            break;
        case '.png':
            contentType = 'image/png';
            break;      
        case '.jpg':
            contentType = 'image/jpg';
            break;
        case '.wav':
            contentType = 'audio/wav';
            break;
    }

    fs.readFile(filePath, function(error, content) {
        if (error) {
            if(error.code == 'ENOENT'){
                fs.readFile('./404.html', function(error, content) {
                    response.writeHead(200, { 'Content-Type': contentType });
                    response.end(content, 'utf-8');
                });
            }
            else {
                response.writeHead(500);
                response.end('Sorry, check with the site admin for error: '+error.code+' ..\n');
                response.end(); 
            }
        }
        else {
            response.writeHead(200, { 'Content-Type': contentType });
            response.end(content, 'utf-8');
        }
    });

}).listen(8125);
console.log('Server running at http://127.0.0.1:8125/');

อัปเดต หากคุณต้องการเข้าถึงเซิร์ฟเวอร์ของคุณจากความต้องการ / ไฟล์ภายนอกคุณต้องเอาชนะ CORS ในไฟล์ node.js ของคุณโดยเขียนด้านล่างดังที่ฉันได้กล่าวไว้ในคำตอบก่อนหน้านี้ที่นี่

// Website you wish to allow to connect
response.setHeader('Access-Control-Allow-Origin', '*');

// Request methods you wish to allow
response.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');

// Request headers you wish to allow
response.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type');

// Set to true if you need the website to include cookies in the requests sent
// to the API (e.g. in case you use sessions)
response.setHeader('Access-Control-Allow-Credentials', true);

UPDATE

ดังที่เอเดรียนกล่าวไว้ในความคิดเห็นเขาเขียนรหัส ES6 พร้อมคำอธิบายทั้งหมดที่นี่ฉันเพิ่งโพสต์รหัสของเขาใหม่ด้านล่างในกรณีที่รหัสหายไปจากเว็บไซต์ดั้งเดิมด้วยเหตุผลใดก็ตาม:

const http = require('http');
const url = require('url');
const fs = require('fs');
const path = require('path');
const port = process.argv[2] || 9000;

http.createServer(function (req, res) {
  console.log(`${req.method} ${req.url}`);

  // parse URL
  const parsedUrl = url.parse(req.url);
  // extract URL path
  let pathname = `.${parsedUrl.pathname}`;
  // based on the URL path, extract the file extention. e.g. .js, .doc, ...
  const ext = path.parse(pathname).ext;
  // maps file extention to MIME typere
  const map = {
    '.ico': 'image/x-icon',
    '.html': 'text/html',
    '.js': 'text/javascript',
    '.json': 'application/json',
    '.css': 'text/css',
    '.png': 'image/png',
    '.jpg': 'image/jpeg',
    '.wav': 'audio/wav',
    '.mp3': 'audio/mpeg',
    '.svg': 'image/svg+xml',
    '.pdf': 'application/pdf',
    '.doc': 'application/msword'
  };

  fs.exists(pathname, function (exist) {
    if(!exist) {
      // if the file is not found, return 404
      res.statusCode = 404;
      res.end(`File ${pathname} not found!`);
      return;
    }

    // if is a directory search for index file matching the extention
    if (fs.statSync(pathname).isDirectory()) pathname += '/index' + ext;

    // read file from file system
    fs.readFile(pathname, function(err, data){
      if(err){
        res.statusCode = 500;
        res.end(`Error getting the file: ${err}.`);
      } else {
        // if the file is found, set Content-type and send data
        res.setHeader('Content-type', map[ext] || 'text/plain' );
        res.end(data);
      }
    });
  });


}).listen(parseInt(port));

console.log(`Server listening on port ${port}`);

2
แน่นอนresponse.writeHead(200ควรresponse.writeHead(404;)
โทมัสฮันเตอร์ II

14
รหัสนั้นจะไม่อนุญาตให้ขึ้นโครงสร้างไฟล์โดยทำบางอย่างเช่น127.0.0.1/../../../etc/passwdหรือไม่ ฉันไม่เห็นว่ามีการตรวจสอบ
Rolf

3
หากใครสนใจรุ่น ES6 + ฉันสร้างเซิร์ฟเวอร์ไฟล์คงที่ที่จัดการประเภท MIME: gist.github.com/amejiarosario/53afae82e18db30dadc9bc39035778e5
Adrian

1
@ เอเดรียรหัสนี้ยอดเยี่ยมมาก แต่ฉันได้พบวิธีการเข้าถึงรูทด้วยมัน วิธีแก้ไขคือ จำกัด จำนวนระยะเวลานำในชื่อไฟล์ให้เป็นหนึ่งเพื่อให้คุณไม่สามารถทำ../../etc/passwordอะไรได้ gist.github.com/amejiarosario/53afae82e18db30dadc9bc39035778e5
Reed

1
pathname = pathname.replace(/^(\.)+/, '.');
Seph Reed

79

สำหรับผู้ที่ต้องการเซิร์ฟเวอร์ที่รันได้จากภายในสคริปต์ NodeJS:

คุณสามารถใช้expressjs / บริการคงที่ซึ่งแทนที่connect.static(ซึ่งไม่สามารถใช้ได้ในขณะที่เชื่อมต่อ 3):

myapp.js:

var http = require('http');

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

var serve = serveStatic("./");

var server = http.createServer(function(req, res) {
  var done = finalhandler(req, res);
  serve(req, res, done);
});

server.listen(8000);

จากนั้นจากบรรทัดคำสั่ง:

  • $ npm install finalhandler serve-static
  • $ node myapp.js

1
FYI สิ่งนี้ไม่ได้ผลสำหรับฉัน ฉันติดตั้ง filehandler โดยใช้npm install filehandlerและแพ็คเกจแสดงอยู่ในnode_modulesไดเรกทอรี แต่เมื่อผมทำงานโหนดโยนข้อผิดพลาดบอกว่าmyapp.js Error: cannot find module filehandlerหากฉันใส่ความคิดเห็นว่า ststment จำเป็นต้องโหลด filehandler แอปโหลดบริการคงที่ดีดังนั้นดูเหมือนว่ามีบางอย่างผิดปกติกับแพคเกจตัวจัดการไฟล์ วันนี้คือวันที่ 12 ธันวาคม 2014 ดังนั้นแพคเกจอาจมีการเปลี่ยนแปลงตั้งแต่คำตอบนี้ถูกโพสต์?
Lee Jenkins

7
มันเป็นfinalตัวจัดการไม่ได้file
jakub.g

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

59

ฉันรู้ว่ามันไม่ใช่โหนด แต่ฉันใช้ SimpleHTTPServer ของ Python:

python -m SimpleHTTPServer [port]

มันทำงานได้ดีและมาพร้อมกับ Python


16
Python3 ที่เทียบเท่า: python -m http.server [port](อันที่กล่าวถึงนี้สำหรับ Python2)
jakub.g

หลามล้มเหลวสำหรับฉันเมื่อมันเกี่ยวกับการให้บริการไฟล์ขนาดใหญ่เช่นภาพ OS Fedora 23
Zimy

9
และใน PHP:php -S localhost:8000
dennis

ฉันใช้สิ่งนี้เพื่อแสดงเนื้อหาจากโฟลเดอร์อย่างรวดเร็วตลอดเวลา
Adrian Lynch

33

การเชื่อมต่ออาจเป็นสิ่งที่คุณกำลังมองหา

ติดตั้งง่ายด้วย:

npm install connect

จากนั้นเซิร์ฟเวอร์ไฟล์พื้นฐานแบบสแตติกส่วนใหญ่สามารถเขียนเป็น:

var connect = require('connect'),
    directory = '/path/to/Folder';

connect()
    .use(connect.static(directory))
    .listen(80);

console.log('Listening on port 80.');

4
นี้ไม่ได้ทำงานอีกต่อไปขณะที่การเชื่อมต่อ 3 ในขณะที่มันไม่เปิดเผยconnect.static; ดูคำตอบของฉันด้านล่างเพื่อทดแทน
jakub.g

4
ฉันเชื่อว่ามันยังคงรวมอยู่กับexpressโดยค่าเริ่มต้น แต่ตอนนี้มีอยู่ในrequireโมดูลที่แยกต่างหากสามารถ "บริการคงที่"
Oleg

18

ติดตั้งด่วนโดยใช้ npm: https://expressjs.com/en/starter/installing.html

สร้างไฟล์ชื่อ server.js ที่ระดับเดียวกันกับ index.html ของคุณด้วยเนื้อหานี้:

var express = require('express');
var server = express();
server.use('/', express.static(__dirname + '/'));
server.listen(8080);

หากคุณต้องการวางไว้ในตำแหน่งอื่นให้ตั้งค่าพา ธ บนบรรทัดที่สาม:

server.use('/', express.static(__dirname + '/public'));

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

node server.js

เรียกดู localhost: 8080


1
สวัสดีครับผมสามารถเรียกใช้มันอย่างถูกต้อง Cannot GET /แต่มันแสดงให้เห็น ฉันใช้ AWS EC2 เพื่อเรียกใช้เซิร์ฟเวอร์
Wei Xia

1
@ เหอสวัสดีตอบช้า จากสิ่งที่ฉันเห็นจากการค้นหาของ Google อย่างรวดเร็วดูเหมือนว่าโครงสร้างไดเรกทอรีของคุณอาจผิด จะต้องมีไฟล์ index.html ในตำแหน่งที่คุณกำหนดเป้าหมาย การตั้งค่าตัวอย่างข้างต้นเพื่อให้ทำงานควรใช้เวลา 5 นาทีและฉันตรวจสอบซ้ำสองครั้งว่าทำงานตามที่เป็นอยู่ จากตรงนั้นคุณสามารถปรับแต่งพา ธ เพื่อให้เหมาะกับโครงสร้างไดเรกทอรีของคุณและตรวจสอบว่าเซิร์ฟเวอร์ยังคงค้นหาไฟล์ที่ต้องการไปยังเซิร์ฟเวอร์
pasx

path.join(__dirname, 'public')ข้ามแพลตฟอร์มมากขึ้น
sdgfsdh

17

One-line ™ Proofs แทนที่จะเป็นสัญญา

ป้อนคำอธิบายรูปภาพที่นี่

แรกคือhttp-server, hs- การเชื่อมโยง

npm i -g http-server   // install
hs C:\repos            // run with one line?? FTW!!

ประการที่สองคือserveโดย ZEIT.co - ลิงก์

npm i -g serve         // install
serve C:\repos         // run with one line?? FTW!!

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

C: \ Users \ Qwerty> http-server - ช่วย
การใช้งาน: http-server [path] [options]

ตัวเลือก:
  พอร์ตที่จะใช้ [8080]
  - ที่อยู่ที่จะใช้ [0.0.0.0]
  -d แสดงรายการไดเรกทอรี [จริง]
  -i แสดง autoIndex [จริง]
  -g --gzip ให้บริการไฟล์ gzip เมื่อเป็นไปได้ [false]
  -e - นามสกุลไฟล์เริ่มต้นหากไม่มีการระบุ [none]
  -s - เงียบระงับข้อความบันทึกจากการส่งออก
  --cors [= ส่วนหัว] เปิดใช้งาน CORS ผ่านส่วนหัว "Access-Control-Allow-Origin"
                     เป็นทางเลือกให้รายการส่วนหัว CORS คั่นด้วยเครื่องหมายจุลภาค
  -o [เส้นทาง] เปิดหน้าต่างเบราว์เซอร์หลังจากเริ่มต้นเซิร์ฟเวอร์
  -c Cache time (max-age) เป็นวินาที [3600] เช่น -c10 เป็นเวลา 10 วินาที
               หากต้องการปิดใช้งานการแคชให้ใช้ -c-1
  -U --utc ใช้รูปแบบเวลา UTC ในข้อความบันทึก

  -P --proxy Fallback proxy หากการร้องขอไม่สามารถแก้ไขได้ เช่น: http://someurl.com

  -S --ssl เปิดใช้งาน https
  -C - ใบรับรองเส้นทางไปยังไฟล์ใบรับรอง SSL (ค่าเริ่มต้น: cert.pem)
  -K - ปุ่มพา ธ ไปยังไฟล์คีย์ ssl (ค่าเริ่มต้น: key.pem)

  -r --robots ตอบสนองต่อ /robots.txt [User-agent: * \ nDallow: /]
  -h - ช่วยพิมพ์รายการนี้และออก
C: \ Users \ Qwerty> ให้บริการ - ช่วย

  การใช้งาน: เสิร์ฟ. [ตัวเลือก] [คำสั่ง]

  คำสั่ง:

    ช่วยแสดงความช่วยเหลือ

  ตัวเลือก:

    -a, - อัตโนมัติให้บริการหลังรับรองความถูกต้องขั้นพื้นฐาน
    -c, --cache Time เป็นมิลลิวินาทีสำหรับการแคชไฟล์ในเบราว์เซอร์
    -n, --clipless อย่าคัดลอกที่อยู่ไปยังคลิปบอร์ด (ปิดใช้งานโดยค่าเริ่มต้น)
    -C, - การติดตั้งคอร์เนอร์ * ส่วนหัว CORS เพื่ออนุญาตการร้องขอจากแหล่งกำเนิดใด ๆ (ปิดใช้งานโดยค่าเริ่มต้น)
    -h, - ช่วยให้ข้อมูลการใช้งานการส่งออก
    -i, - มอบหมายไฟล์และไดเรกทอรีที่จะไม่สนใจ
    -o, - เปิดเปิดที่อยู่ในท้องถิ่นในเบราว์เซอร์ (ปิดใช้งานโดยค่าเริ่มต้น)
    -p, - พอร์ตพอร์ตที่จะฟัง (ค่าเริ่มต้นถึง 5,000)
    -S, --silent อย่าบันทึกสิ่งใด ๆ ไปยังคอนโซล
    -s, --single เสิร์ฟแอปพลิเคชันหน้าเดียว (ตั้งค่า `-c` ถึง 1 วัน)
    -t, - ไร้ค่าไม่ต้องแสดงแผนภูมิสถิต (ปิดใช้งานโดยค่าเริ่มต้น)
    -u, - unzipped ปิดใช้งานการบีบอัด GZIP
    -v, - รุ่นที่ส่งออกหมายเลขรุ่น

หากคุณต้องการดูการเปลี่ยนแปลงโปรดดูhostrเครดิตของคำตอบของ Henry Tseng


14

DEMO / PROTO SERVER เท่านั้น

หากนั่นคือทั้งหมดที่คุณต้องการลองสิ่งนี้:

const http = require('http');
const fs = require('fs');
const port = 3000;
const app = http.createServer((req,res) => {
    res.writeHead(200);
    if (req.url === '/') req.url = '/index.html'; // courtesy of @JosephCho
    res.end(fs.readFileSync(__dirname + req.url));
});

app.listen(port);

หมายเหตุ: คุณต้องใช้ "/index.html" เป็นส่วนหนึ่งของที่อยู่ของคุณเช่น " http: // localhost: 3000 / index.html "


2
อย่าใช้เวอร์ชันการซิงค์ Instread สร้าง pipe ไปที่ res จาก readStream
Eduard Bondarenko

1
คำตอบที่ดีที่สุดถ้าคุณต้องการม้าที่รวดเร็วและสกปรกเพียงครั้งเดียว
collapsar

1
หากคุณต้องการที่จะหลีกเลี่ยงการใช้index.htmlเป็นส่วนหนึ่งของที่อยู่ของคุณเพียงแค่เพิ่มทันทีหลังจากif (req.url === '/') req.url = '/index.html'; res.writeHead(200);
โจเซฟโช

3
@EduardBondarenko ถูกต้อง const stream = fs.createReadStream(...); stream.pipe(res);เป็นสิ่งที่คุณต้องการ
Justin Meiners

8

มีเว็บเซิร์ฟเวอร์แบบคงที่อีกหนึ่งที่ค่อนข้างดี: เบราว์เซอร์ซิงค์

สามารถดาวน์โหลดได้โดยใช้ node package manager:

npm install -g browser-sync

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

browser-sync start --server --port 3001 --files="./*"

มันจะเริ่มจัดเลี้ยงไฟล์ทั้งหมดในโฟลเดอร์ปัจจุบันในเบราว์เซอร์

สามารถพบเพิ่มเติมได้จากBrowserSync

ขอบคุณ


2
ข้อดีของการใช้ Browsersync แทนที่จะเป็นเซิร์ฟเวอร์แบบคงที่อื่นคือการอัพเดตหน้าสดทุกครั้งที่ไฟล์ที่ระบุโดยการ--filesเปลี่ยนสถานะ (nb. คุณไม่จำเป็นต้องระบุ./*- เฉพาะสิ่งที่คุณต้องการให้ Browsersync คอยดูการอัพเดทเช่น) . css/*.css)
นิค F

7

ฉันไม่ได้โชคดีมากกับคำตอบใด ๆ ในหน้านี้อย่างไรก็ตามด้านล่างดูเหมือนจะทำเคล็ดลับ

เพิ่มserver.jsไฟล์ที่มีเนื้อหาต่อไปนี้:

const express = require('express')
const path = require('path')
const port = process.env.PORT || 3000
const app = express()

// serve static assets normally
app.use(express.static(__dirname + '/dist'))

// handle every other route with index.html, which will contain
// a script tag to your application's JavaScript file(s).
app.get('*', function (request, response){
  response.sendFile(path.resolve(__dirname, 'dist', 'index.html'))
})

app.listen(port)
console.log("server started on port " + port)

expressยังให้แน่ใจว่าคุณต้องการ เรียกใช้yarn add express --saveหรือnpm install express --saveขึ้นอยู่กับการตั้งค่าของคุณ (ฉันสามารถแนะนำให้yarnมันค่อนข้างเร็ว)

คุณสามารถเปลี่ยนdistเป็นโฟลเดอร์ใดก็ได้ที่คุณให้บริการเนื้อหาของคุณ สำหรับโครงการที่เรียบง่ายของฉันฉันไม่ได้ให้บริการจากโฟลเดอร์ใด ๆ ดังนั้นฉันก็ลบdistชื่อไฟล์

node server.jsจากนั้นคุณอาจทำงาน เมื่อฉันต้องอัปโหลดโครงการไปยังเซิร์ฟเวอร์ Heroku ฉันต้องเพิ่มสิ่งต่อไปนี้ในpackage.jsonไฟล์ของฉัน:

  "scripts": {
    "start": "node server.js"
  }

6

หากคุณใช้กรอบการทำงานด่วนฟังก์ชั่นนี้จะพร้อมใช้งาน

หากต้องการตั้งค่าแอปให้บริการไฟล์อย่างง่ายเพียงทำสิ่งนี้:

mkdir yourapp
cd yourapp
npm install express
node_modules/express/bin/express

ฉัน $ npm ติดตั้ง -g express; พวกเขา $ ด่วน?
พอลเวสต์

ฉันทำตามขั้นตอนของคุณแล้ว แต่ Express ของฉันไม่มีโฟลเดอร์bin
Qwerty

6

นี่คือไฟล์ pet-server / server node.js แบบสแตติกของฉันที่ไม่มีการพึ่งพาซึ่งฉันเชื่อว่าเป็นเครื่องมือที่รวดเร็วและสมบูรณ์ซึ่งการใช้งานนั้นง่ายเหมือนการออกคำสั่งนี้บนเทอร์มินัล Linux / Unix / macOS ของคุณ ( หรือtermuxบน Android) เมื่อnodejs-legacyติดตั้งnode.js (หรือบน Debian / Ubuntu):

curl pad.js.org | node 

(มีคำสั่งต่าง ๆ สำหรับผู้ใช้ Windows ในเอกสาร)

มันสนับสนุนสิ่งต่าง ๆ ที่ฉันเชื่อว่ามีประโยชน์

  • การสร้าง / การจัดทำดัชนีไดเรกทอรีลำดับชั้น
    • ด้วยความสามารถในการจัดเรียงตามเกณฑ์ที่ต่าง
    • อัปโหลดจากเบราว์เซอร์โดย [หลายไฟล์] ลากและวางและคัดลอก / วางไฟล์ / ข้อความเท่านั้นและวางคลิปบอร์ดระบบบน Chrome, Firefox และเบราว์เซอร์อื่น ๆ อาจมีข้อ จำกัด บางอย่าง (ซึ่งสามารถปิดได้โดยบรรทัดคำสั่ง ตัวเลือกที่มีให้)
    • ปุ่ม Folder / note-creation / upload
  • การให้บริการ MIME ที่ถูกต้องสำหรับไฟล์ประเภทที่รู้จักกันดี (มีความเป็นไปได้สำหรับการปิดใช้งาน)
  • ความเป็นไปได้ของการติดตั้งเป็นแพ็กเกจ npm และเครื่องมือโลคัลหรือการติดตั้งแบบเชิงเส้นเดียวเป็นบริการถาวรพร้อม Docker
  • การให้บริการไฟล์ HTTP 206 (การถ่ายโอนไฟล์แบบหลายส่วน) เพื่อการถ่ายโอนที่รวดเร็วยิ่งขึ้น
  • อัปโหลดจากเทอร์มินัลและคอนโซลของเบราว์เซอร์ (ที่จริงแล้วเดิมตั้งใจจะเป็นพร็อกซีระบบไฟล์สำหรับคอนโซล JS ของเบราว์เซอร์ในหน้า / โดเมนอื่น ๆ )
  • การดาวน์โหลด / อัพโหลด CORS (ซึ่งสามารถปิดได้ด้วย)
  • การรวม HTTPS อย่างง่ายดาย
  • ตัวเลือกบรรทัดคำสั่งที่มีน้ำหนักเบาเพื่อให้ได้รับบริการที่ปลอดภัยยิ่งขึ้นด้วย:
    • ด้วยโปรแกรมปรับปรุงของฉันในnode.js 8คุณสามารถเข้าถึงตัวเลือกโดยไม่ต้องติดตั้งครั้งแรก:curl pad.js.org | node - -h
    • หรือก่อนติดตั้งเป็นแพคเกจ npm ระบบทั่วโลกโดย[sudo] npm install -g pad.jsใช้รุ่นที่ติดตั้งเพื่อเข้าถึงตัวเลือก:pad -h
    • หรือใช้อิมเมจ Docker ที่ให้มาซึ่งใช้ตัวเลือกที่ค่อนข้างปลอดภัยตามค่าเริ่มต้น [sudo] docker run --restart=always -v /files:/files --name pad.js -d -p 9090:9090 quay.io/ebraminio/pad.js

สกรีนช็อตของดัชนีโฟลเดอร์โดยใช้เครื่องมือ

คุณสมบัติที่อธิบายไว้ข้างต้นส่วนใหญ่จะมีการบันทึกไว้ในหน้าหลักของเครื่องมือhttp://pad.js.orgซึ่งมีเคล็ดลับดีๆที่ฉันใช้เป็นสถานที่ที่แหล่งเครื่องมือเองก็มีให้บริการเช่นกัน!

แหล่งเครื่องมืออยู่บนGitHubซึ่งยินดีรับฟังความคิดเห็นคำขอคุณสมบัติและ !s ของคุณ!


5

จาก npm@5.2.0, npmเริ่มต้นการติดตั้งไบนารีใหม่ข้าง NPM npxปกติที่เรียกว่า ดังนั้นตอนนี้หนึ่ง liners เพื่อสร้างเซิร์ฟเวอร์ HTTP คงที่จากไดเรกทอรีปัจจุบัน:

npx serve

หรือ

npx http-server

4

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

บุฟเฟ่ต์ใช้วิธีการบัฟเฟอร์เต็ม - ไฟล์ทั้งหมดจะถูกโหลดลงในหน่วยความจำอย่างเต็มที่เมื่อบู๊ตแอปของคุณดังนั้นคุณจะไม่รู้สึกถึงการเผาไหม้ของระบบไฟล์ ในทางปฏิบัติสิ่งนี้มีประสิทธิภาพอย่างมาก มากเสียจนการวางวานิชไว้ด้านหน้าแอพของคุณอาจทำให้ช้าลง! 

เราใช้มันในเว็บไซต์ codePile และพบว่าเพิ่มขึ้น ~ 700requests / วินาทีเป็น> 4k ร้องขอ / วินาทีบนหน้าเว็บที่ดาวน์โหลด 25 ทรัพยากรภายใต้ภาระการเชื่อมต่อผู้ใช้พร้อมกัน 1k

ตัวอย่าง:

var server = require('http').createServer();

var buffet = require('buffet')(root: './file'); 

 

server.on('request', function (req, res) {

  buffet(req, res, function () {

    buffet.notFound(req, res);

  });

});

 

server.listen(3000, function () {

  console.log('test server running on port 3000');

});


4

ทำงานด้านล่างสำหรับฉัน:

สร้างไฟล์ที่app.jsมีเนื้อหาด้านล่าง:

// app.js

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

http.createServer(function (req, res) {
  fs.readFile(__dirname + req.url, function (err,data) {
    if (err) {
      res.writeHead(404);
      res.end(JSON.stringify(err));
      return;
    }
    res.writeHead(200);
    res.end(data);
  });
}).listen(8080);

สร้างไฟล์ที่index.htmlมีเนื้อหาด้านล่าง:

Hi

เริ่มบรรทัดคำสั่ง:

cmd

ทำงานด้านล่างในcmd:

node app.js

ไปที่ URL ด้านล่างในโครเมี่ยม:

http://localhost:8080/index.html

นั่นคือทั้งหมดที่ หวังว่าจะช่วย

ที่มา: https://nodejs.org/en/knowledge/HTTP/servers/how-to-serve-static-files/


3

คุณสามารถลองให้บริการฉัน

การใช้มันง่ายมาก:

ServeMe = require('serve-me')();
ServeMe.start(3000);

นั่นคือทั้งหมด

PD: โฟลเดอร์ที่ให้บริการโดยค่าเริ่มต้นคือ "สาธารณะ"


3

นี่คืออีกเว็บเซิร์ฟเวอร์ที่เรียบง่าย

https://www.npmjs.com/package/hostr

ติดตั้ง

npm install -g hostr

เปลี่ยนผู้อำนวยการทำงาน

cd myprojectfolder/

และเริ่มต้น

hostr

สิ่งนี้จะคอยเฝ้าดูการเปลี่ยนแปลงและให้การรีโหลดสด
Qwerty

3

ในโหนด node.js ธรรมดา:

const http = require('http')
const fs = require('fs')
const path = require('path')

process.on('uncaughtException', err => console.error('uncaughtException', err))
process.on('unhandledRejection', err => console.error('unhandledRejection', err))

const publicFolder = process.argv.length > 2 ? process.argv[2] : '.'
const port = process.argv.length > 3 ? process.argv[3] : 8080

const mediaTypes = {
  zip: 'application/zip',
  jpg: 'image/jpeg',
  html: 'text/html',
  /* add more media types */
}

const server = http.createServer(function(request, response) {
  console.log(request.method + ' ' + request.url)

  const filepath = path.join(publicFolder, request.url)
  fs.readFile(filepath, function(err, data) {
    if (err) {
      response.statusCode = 404
      return response.end('File not found or you made an invalid request.')
    }

    let mediaType = 'text/html'
    const ext = path.extname(filepath)
    if (ext.length > 0 && mediaTypes.hasOwnProperty(ext.slice(1))) {
      mediaType = mediaTypes[ext.slice(1)]
    }

    response.setHeader('Content-Type', mediaType)
    response.end(data)
  })
})

server.on('clientError', function onClientError(err, socket) {
  console.log('clientError', err)
  socket.end('HTTP/1.1 400 Bad Request\r\n\r\n')
})

server.listen(port, '127.0.0.1', function() {
  console.log('👨‍🔧 Development server is online.')
})

นี่เป็นเซิร์ฟเวอร์ node.js แบบง่ายที่ให้บริการเฉพาะไฟล์ที่ร้องขอในไดเร็กทอรีที่แน่นอน

การใช้งาน:

node server.js folder port

folderอาจเป็นแบบสัมบูรณ์หรือแบบสัมพัทธ์ทั้งนี้ขึ้นอยู่กับserver.jsตำแหน่งที่ตั้ง ค่าดีฟอลต์คือ.ไดเร็กทอรีที่คุณเรียกใช้งานnode server.jsคำสั่ง

port 8080 เป็นค่าเริ่มต้น แต่คุณสามารถระบุพอร์ตใด ๆ ที่มีอยู่ในระบบปฏิบัติการของคุณ

ในกรณีของคุณฉันจะทำ:

cd D:\Folder
node server.js

คุณสามารถเรียกดูไฟล์ภายใต้D:\Folderจากเบราว์เซอร์โดยพิมพ์http://127.0.0.1:8080/somefolder/somefile.html


2

มันไม่ได้อยู่ใน NPM แต่ฉันสร้างเซิร์ฟเวอร์แบบคงที่แบบง่ายบน Express ซึ่งอนุญาตให้คุณยอมรับการส่งแบบฟอร์มและส่งอีเมลผ่านบริการอีเมลธุรกรรม (Sendgrid ในตอนนี้ Mandrill จะมา)

https://github.com/jdr0dn3y/nodejs-StatServe


2

เพื่อประโยชน์ของผู้ค้นหาฉันชอบคำตอบของ Jakub g แต่ต้องการการจัดการข้อผิดพลาดเล็กน้อย เห็นได้ชัดว่าดีที่สุดในการจัดการข้อผิดพลาดอย่างถูกต้องแต่สิ่งนี้จะช่วยป้องกันไม่ให้ไซต์หยุดทำงานหากเกิดข้อผิดพลาด รหัสด้านล่าง:

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

process.on('uncaughtException', function(err) {
  console.log(err);
});

var server = express();

server.use(express.static(__dirname));

var port = 10001;
server.listen(port, function() { 
    console.log('listening on port ' + port);     
    //var err = new Error('This error won't break the application...')
    //throw err
});

อัปเดต - คำตอบของฉันใช้ได้ แต่ตอนนี้ฉันใช้คำตอบของ @Matt Self ในการใช้ http-server ดูเหมือนว่าจะทำงานได้ดี
HockeyJ

2

ขั้นแรกติดตั้งเซิร์ฟเวอร์โหนดแบบคงที่ผ่านทางnpm install node-static -g -g คือการติดตั้งทั่วโลกในระบบของคุณจากนั้นนำทางไปยังไดเรกทอรีที่ไฟล์ของคุณตั้งอยู่เริ่มเซิร์ฟเวอร์ด้วยstatic มันฟังพอร์ต 8080 นำทางไปยังเบราว์เซอร์และพิมพ์ localhost: 8080 / yourhtmlfilename .


2

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

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

npm install -g serve

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

d:> serve d:\StaticSite

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

http://localhost:3000

คุณทราบว่าnpmเป็นตัวจัดการแพ็กเกจโหนดดังนั้นจริงๆแล้วคุณใช้ NodeJS stuff
14152

ฉันทำในสิ่งที่ฉันหมายถึง "สิ่งที่เป็น NodeJS" กำลังใช้ NodeJS และแสดงเพื่อให้บริการไฟล์ตามคำตอบที่แนะนำมากที่สุด ให้บริการเป็นปฏิบัติการที่เป็นอิสระ NPM ใช้เพื่อติดตั้งคุณสามารถดาวน์โหลดได้โดยตรง
Diego Mendes

1

กำลังค้นหาในรีจิสทรี NPM https://npmjs.org/search?q=serverฉันพบเซิร์ฟเวอร์คงที่https://github.com/maelstrom/static-server

จำเป็นต้องส่งไฟล์เพื่อนร่วมงาน แต่ไม่สามารถรบกวนสัตว์ร้ายขนาด 100MB ได้หรือไม่ ต้องการเรียกใช้แอปพลิเคชัน JavaScript ตัวอย่างง่ายๆ แต่มีปัญหาในการรันผ่านไฟล์: /// โปรโตคอลหรือไม่ ต้องการแบ่งปันไดเรกทอรีสื่อของคุณที่ LAN โดยไม่ต้องตั้งค่า Samba หรือ FTP หรืออะไรก็ตามที่คุณต้องการแก้ไขไฟล์กำหนดค่า จากนั้นไฟล์เซิร์ฟเวอร์นี้จะทำให้ชีวิตของคุณง่ายขึ้นเล็กน้อย

หากต้องการติดตั้งเซิร์ฟเวอร์สแตติกแบบง่ายให้ใช้ npm:

npm install -g static-server

จากนั้นเพื่อให้บริการไฟล์หรือไดเรกทอรีเพียงแค่เรียกใช้

$ serve path/to/stuff
Serving path/to/stuff on port 8001

แม้กระทั่งอาจแสดงรายการเนื้อหาของโฟลเดอร์

น่าเสียดายที่มันไม่สามารถให้บริการไฟล์ได้ :)


5
ฉันสร้างเซิร์ฟเวอร์นั้น ไฟล์เซิร์ฟเวอร์นั้นสร้างขึ้นจาก Node เวอร์ชันเก่ามากดังนั้นทำไมมันจึงไม่ทำงานอีกต่อไป ฉันไม่มีเวลาที่จะแก้ไข ฉันขอแนะนำให้ใช้คำตอบโดย @Oleg ด้านบน มันสามารถรวมเข้ากับโหนดขนาดเล็กได้อย่างง่ายดายและเป็นสิ่งที่ฉันทำอยู่แล้ว
ทิมฮี

ขอบคุณทิมการตอบสนองอย่างมืออาชีพมาก ฉันจะไม่ลบรหัส แต่อัปเดต readme
พอล Verest



1

const http = require('http');
const fs = require('fs');
const url = require('url');
const path = require('path');


let mimeTypes = {
  '.html': 'text/html',
  '.css': 'text/css',
  '.js': 'text/javascript',
  '.jpg': 'image/jpeg',
  '.png': 'image/png',
  '.ico': 'image/x-icon',
  '.svg': 'image/svg+xml',
  '.eot': 'appliaction/vnd.ms-fontobject',
  '.ttf': 'aplication/font-sfnt'
};



http.createServer(function (request, response) {
  let pathName = url.parse(request.url).path;
  if(pathName === '/'){
    pathName = '/index.html';
  }
  pathName = pathName.substring(1, pathName.length);
  let extName = path.extName(pathName);
  let staticFiles = `${__dirname}/template/${pathName}`;

      if(extName =='.jpg' || extName == '.png' || extName == '.ico' || extName == '.eot' || extName == '.ttf' || extName == '.svg')
      {
          let file = fr.readFileSync(staticFiles);
          res.writeHead(200, {'Content-Type': mimeTypes[extname]});
          res.write(file, 'binary');
          res.end();
      }else {
        fs.readFile(staticFiles, 'utf8', function (err, data) {
          if(!err){
            res.writeHead(200, {'Content-Type': mimeTypes[extname]});
            res.end(data);
          }else {
            res.writeHead(404, {'Content-Type': 'text/html;charset=utf8'});
            res.write(`<strong>${staticFiles}</strong>File is not found.`);
          }
          res.end();
        });
      }
}).listen(8081);


คุณควรเพิ่มคำอธิบายให้ด้วยรหัสนี้
Abhinav Gauniyal

1

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



0

คุณถามว่าทำไมคำขอลดลง - ไม่แน่ใจว่าอะไรคือเหตุผลเฉพาะในกรณีของคุณ แต่โดยรวมแล้วคุณควรปรับปรุงเนื้อหาเซิร์ฟเวอร์แบบคงที่โดยใช้มิดเดิลแวร์เฉพาะงาน (nginx, S3, CDN) เพราะโหนดไม่ได้ปรับให้เหมาะสมสำหรับรูปแบบเครือข่ายนี้ ดูคำอธิบายเพิ่มเติมได้ที่นี่ (bullet 13): http://goldbergyoni.com/checklist-best-practice-of-node-js-in-production/

โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.