Pertanyaan Menggunakan node.js sebagai web server sederhana


Saya ingin menjalankan server HTTP yang sangat sederhana. Setiap permintaan GET example.com harus mendapatkan index.html menayangkannya tetapi sebagai laman HTML biasa (yaitu pengalaman yang sama seperti ketika Anda membaca laman web normal).

Dengan menggunakan kode di bawah ini, saya dapat membaca konten index.html. Bagaimana saya melayani index.html sebagai halaman web biasa?

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

Satu saran di bawah ini rumit dan mengharuskan saya menulis a get baris untuk setiap file sumber daya (CSS, JavaScript, gambar) yang ingin saya gunakan.

Bagaimana saya bisa melayani satu halaman HTML dengan beberapa gambar, CSS dan JavaScript?


935
2018-05-21 20:44


asal


Jawaban:


Kamu dapat memakai Menghubungkan dan ServeStatic dengan Node.js untuk ini:

  1. Pasang koneksi dan melayani-statis dengan NPM

    $ npm install connect serve-static
    
  2. Buat file server.js dengan konten ini:

    var connect = require('connect');
    var serveStatic = require('serve-static');
    connect().use(serveStatic(__dirname)).listen(8080, function(){
        console.log('Server running on 8080...');
    });
    
  3. Jalankan dengan Node.js

    $ node server.js
    

Anda sekarang bisa pergi ke http://localhost:8080/yourfile.html


859
2017-12-08 08:09



Server Node.js paling sederhana adalah:

$ npm install http-server -g

Sekarang Anda dapat menjalankan server melalui perintah berikut:

$ cd MyApp

$ http-server

Jika Anda menggunakan NPM 5.2.0 atau yang lebih baru, Anda dapat menggunakannya http-server tanpa menginstalnya npx. Ini tidak disarankan untuk digunakan dalam produksi, tetapi merupakan cara yang bagus untuk mendapatkan server yang berjalan dengan cepat di localhost.

$ npx http-server

Atau, Anda dapat mencoba ini, yang membuka browser web Anda dan memungkinkan permintaan CORS:

$ http-server -o --cors

Untuk opsi lainnya, periksa dokumentasi untuk http-server di GitHub, atau jalankan:

$ http-server --help

Banyak fitur bagus lainnya dan penyebaran yang mati-otak-sederhana ke NodeJitsu.

Garpu Fitur

Tentu saja Anda dapat dengan mudah mengisi ulang fitur dengan garpu Anda sendiri. Anda mungkin menemukan itu sudah dilakukan di salah satu dari 800+ garpu yang ada di proyek ini:

Server Cahaya: Sebuah Alternatif Penyegaran Otomatis

Alternatif yang bagus untuk http-server aku s light-server. Ini mendukung penyimpanan file dan penyegaran otomatis dan banyak fitur lainnya.

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

Tambahkan ke menu konteks direktori Anda di Windows Explorer

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

Server JSON REST sederhana

Jika Anda perlu membuat server REST sederhana untuk proyek prototipe kemudian json-server mungkin apa yang Anda cari.

Editor Refreshing Otomatis

Sebagian besar editor halaman web dan alat IDE kini menyertakan server web yang akan mengawasi file sumber Anda dan menyegarkan halaman web Anda secara otomatis saat mereka berubah.

Itu sumber terbuka editor teks Tanda kurung juga termasuk server web statis NodeJS. Buka saja file HTML di dalam Brackets, tekan "Pratinjau Langsung"Dan ini memulai server statis dan membuka browser Anda di halaman. Browser akan ** otomatis menyegarkan setiap kali Anda mengedit dan menyimpan file HTML. Ini sangat berguna ketika menguji situs web adaptif. Buka halaman HTML Anda di beberapa browser / ukuran jendela / devices. Simpan halaman HTML Anda dan langsung lihat apakah benda-benda adaptif Anda berfungsi sebagaimana adanya semua penyegaran otomatis.

Pengembang PhoneGap

Jika Anda mengkode a aplikasi seluler hibrida, Anda mungkin tertarik untuk mengetahui bahwa PhoneGaptim mengambil konsep penyegaran otomatis ini dengan yang baru Aplikasi PhoneGap. Ini adalah aplikasi seluler umum yang dapat memuat file HTML5 dari server selama pengembangan. Ini adalah trik yang sangat licin karena sekarang Anda dapat melewati langkah-langkah kompilasi / penerapan lambat dalam siklus pengembangan Anda untuk aplikasi seluler hibrida jika Anda mengubah file JS / CSS / HTML - yang paling sering Anda lakukan. Mereka juga menyediakan server web NodeJS statis (jalankan phonegap serve) yang mendeteksi perubahan file.

PhoneGap + Sencha Touch Developers

Saya sekarang telah secara ekstensif mengadaptasi server statis PhoneGap & Aplikasi Pengembang PhoneGap untuk Sencha Touch & pengembang jQuery Mobile. Lihatlah Sencha Touch Live. Mendukung --qr QR Codes dan --localtunnel yang mem-proxy server statis Anda dari komputer desktop Anda ke URL di luar firewall Anda! Banyak penggunaan. Kecepatan besar untuk pengembang seluler hibrida.

Cordova + Pengembang Kerangka Ionic

Server lokal dan fitur penyegaran otomatis dipanggang ke dalam ionic alat. Lari saja ionic serve dari folder aplikasi Anda. Bahkan lebih baik ... ionic serve --lab untuk melihat tampilan sisi demi sisi otomatis dari iOS dan Android.


828
2018-04-17 01:21



Lihat ini inti. Saya mereproduksi di sini untuk referensi, tetapi intinya telah diperbarui secara berkala.

Node.JS server web file statis. Tempatkan di jalur Anda untuk menjalankan server di direktori mana pun, mengambil argumen port opsional.

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

Memperbarui

Inti tidak menangani file css dan js. Saya telah menggunakannya sendiri. Menggunakan read / write dalam mode "binary" tidak menjadi masalah. Itu hanya berarti bahwa file tersebut tidak ditafsirkan sebagai teks oleh pustaka file dan tidak terkait dengan tipe konten yang dikembalikan dalam respons.

Masalah dengan kode Anda adalah Anda selalu mengembalikan jenis konten "teks / polos". Kode di atas tidak mengembalikan tipe konten apa pun, tetapi jika Anda hanya menggunakannya untuk HTML, CSS, dan JS, browser dapat menyimpulkannya dengan baik. Tidak ada tipe konten yang lebih baik daripada yang salah.

Biasanya tipe konten adalah konfigurasi server web Anda. Jadi saya minta maaf jika ini tidak terpecahkan anda masalah, tetapi bekerja bagi saya sebagai server pengembangan sederhana dan berpikir mungkin membantu beberapa orang lain. Jika Anda benar-benar membutuhkan tipe konten dalam respons, Anda perlu secara eksplisit mendefinisikannya sebagai joeytwiddle atau menggunakan pustaka seperti Connect yang memiliki default yang masuk akal. Yang menyenangkan tentang ini adalah bahwa itu sederhana dan mandiri (tidak ada ketergantungan).

Tapi aku merasakan masalahmu. Jadi di sini adalah solusi gabungan.

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

147
2017-11-29 21:46



Anda tidak perlu mengungkapkannya. Anda tidak perlu terhubung. Node.js tidak http NATIVELY. Yang perlu Anda lakukan adalah mengembalikan file yang tergantung pada permintaan:

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)    

Contoh yang lebih lengkap yang memastikan permintaan tidak dapat mengakses file di bawah direktori-dasar, dan melakukan penanganan kesalahan yang tepat:

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)

75
2017-10-14 06:59



Saya pikir bagian yang Anda lewatkan saat ini adalah Anda mengirim:

Content-Type: text/plain

Jika Anda ingin browser web merender HTML, Anda harus mengubahnya menjadi:

Content-Type: text/html

64
2018-05-21 21:11



Step1 (di dalam command prompt [Saya harap Anda cd KE FOLDER ANDA]): npm install express

Langkah 2: Buat file 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);

Harap dicatat, Anda harus menambahkan WATCHFILE (atau menggunakan nodemon) juga. Kode di atas hanya untuk server koneksi sederhana.

LANGKAH 3: node server.js atau nodemon server.js

Sekarang ada metode yang lebih mudah jika Anda hanya ingin meng-host server HTTP sederhana. npm install -g http-server

dan buka direktori dan ketik kami http-server

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


43
2018-02-24 14:44



Cara cepat:

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

Jalanmu:

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

27
2018-02-07 08:28



Daripada berurusan dengan pernyataan switch, saya pikir lebih baik untuk mencari tipe konten dari kamus:

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

...

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

19
2017-11-24 21:08



Ini pada dasarnya adalah versi terbaru dari jawaban yang diterima untuk menghubungkan versi 3:

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

var app = connect();

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

Saya juga menambahkan opsi default sehingga index.html disajikan sebagai default.


14
2018-06-20 17:40



Anda tidak perlu menggunakan modul NPM untuk menjalankan server sederhana, ada perpustakaan yang sangat kecil yang disebut "NPM Free Server"untuk Node:

50 baris kode, output jika Anda meminta file atau folder dan memberinya warna merah atau hijau jika gagal untuk dikerjakan. Kurang dari 1KB dalam ukuran (diperkecil).


11
2017-11-09 16:10



Jika Anda memiliki node yang diinstal pada PC Anda mungkin Anda memiliki NPM, jika Anda tidak memerlukan hal-hal NodeJS, Anda dapat menggunakan melayani paket untuk ini:

1 - Instal paket di PC Anda:

npm install -g serve

2 - Melayani folder statis Anda:

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

Ini akan menunjukkan port mana folder statis Anda sedang dilayani, cukup navigasikan ke host seperti:

http://localhost:3000

9
2018-02-23 17:57