ここでは、単純なNode.jsのnoob質問です。 response.write('...<p>blahblahblah</p>...');
のようなコードを書く必要がないように、基本的なHTMLファイルをロードして「表示」する方法を見つけようとしています。
fsライブラリ を使って1つの方法を見つけたところです。それがもっともきれいかどうかはわかりません。
var http = require('http'),
fs = require('fs');
fs.readFile('./index.html', function (err, html) {
if (err) {
throw err;
}
http.createServer(function(request, response) {
response.writeHeader(200, {"Content-Type": "text/html"});
response.write(html);
response.end();
}).listen(8000);
});
基本的な概念は、生のファイルを読み込んで内容をダンプすることだけです。それでも、もっときれいなオプションを選択してください。
Fsオブジェクトを使用して手動でファイルをエコーすることができますが、作業を楽にするために ExpressJS フレームワークを使用することをお勧めします。
...しかし、あなたがそれを難しいやり方でやると主張するなら:
var http = require('http');
var fs = require('fs');
http.createServer(function(req, res){
fs.readFile('test.html',function (err, data){
res.writeHead(200, {'Content-Type': 'text/html','Content-Length':data.length});
res.write(data);
res.end();
});
}).listen(8000);
hTMLファイルを取得するにはapp.getを使用します。それは簡単です!!
const express = require('express');
const app = new express();
app.get('/', function(request, response){
response.sendfile('yourhtmlpagename.html');
});
それはそれと同じくらい簡単です。これにはexpressモジュールを使用してください。 expressをインストールします。npm install express -g
私はこれが古い質問であることを知っています、しかし誰もそれを述べなかったように私はそれが追加する価値があると思いました:
もしあなたが文字通り静的コンテンツ(例えば、 'about'ページ、画像、CSSなど)を提供したいのなら、静的コンテンツ提供モジュールの1つ、例えばnode-staticを使うことができます。 (他にももっと良い/悪いことがあります - search.npmjs.orgを試してみてください。)少し前処理することで、動的ページを静的からフィルタリングして正しいリクエストハンドラに送ることができます。
Fs.readFileのようにすべてをファイルにロードするのではなく、ファイルをストリーミングするので、これはおそらくいくらか優れているでしょう。
var http = require('http');
var fs = require('fs');
var path = require('path');
var ext = /[\w\d_-]+\.[\w\d]+$/;
http.createServer(function(req, res){
if (req.url === '/') {
res.writeHead(200, {'Content-Type': 'text/html'});
fs.createReadStream('index.html').pipe(res);
} else if (ext.test(req.url)) {
fs.exists(path.join(__dirname, req.url), function (exists) {
if (exists) {
res.writeHead(200, {'Content-Type': 'text/html'});
fs.createReadStream('index.html').pipe(res);
} else {
res.writeHead(404, {'Content-Type': 'text/html'});
fs.createReadStream('404.html').pipe(res);
});
} else {
// add a RESTful service
}
}).listen(8000);
これは Muhammed Neswine's answer に対する更新です
Express 4.xでは、sendfileは廃止予定であり、sendFile関数を使用する必要があります。違いは、sendfileが相対パスを使用し、sendFileが絶対パスを使用することです。そのため、パスのハードコーディングを避けるために__dirnameが使用されます。
var express = require('express');
var app = express();
var path = require("path");
app.get('/', function (req, res) {
res.sendFile(path.join(__dirname + '/folder_name/filename.html'));
});
pipe
メソッドを使うより柔軟で簡単な方法です。
var fs = require('fs');
var http = require('http');
http.createServer(function(request, response) {
response.writeHead(200, {'Content-Type': 'text/html'});
var file = fs.createReadStream('index.html');
file.pipe(response);
}).listen(8080);
console.log('listening on port 8080...');
ExpressがHTMLファイルでexpressを使用するのが最も良い方法は、expressには多くの利点があるからです。また、必要に応じてHerokuプラットフォームに拡張することもできます。
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(3000);
console.log("Running at Port 3000");
清潔で最高。
簡単な方法は、index.htmlを含むすべてのファイル、またはCSS、JSなどのすべてのリソースを含む何かをパブリックフォルダーに配置するか、必要な名前を付けてExpress jsを使用してappに伝えることです_dirnameを次のように使用します。
あなたのserver.jsにexpressを使ってこれらを追加してください。
var express = require('express');
var app = express();
app.use(express.static(__dirname + '/public'));
また、別のディレクトリに公開ディレクトリの下に新しいディレクトリを追加し、そのパスを「/ public/YourDirName」にしたい場合
だからここで私たちはまさにここで何をしているのですか?我々はappという名前の明示的なインスタンスを作成していて、パブリックディレクトリがすべてのリソースにアクセスする場合はアドレスを与えています。お役に立てれば !
Expressモジュールはどうですか?
var app = require('express')();
app.get('/',function(request,response){
response.sendFile(__dirname+'/XXX.html');
});
app.listen('8000');
その後、ブラウザを使って/ localhost:8000を取得します。
サーバーを実行しているURLが表示されるので、これはより良い選択肢になると思います。
var http = require('http'),
fs = require('fs');
const hostname = '<your_machine_IP>';
const port = 3000;
const html=fs.readFile('./index.html', function (err, html) {
if (err) {
throw err;
}
http.createServer(function(request, response) {
response.writeHeader(200, {"Content-Type": "text/html"});
response.write(html);
response.end();
}).listen(port, hostname, () => {
console.log(`Server running at http://${hostname}:${port}/`);
})
});
var http = require('http');
var fs = require('fs');
http.createServer(function(request, response) {
response.writeHeader(200, {"Content-Type": "text/html"});
var readSream = fs.createReadStream('index.html','utf8')
readSream.pipe(response);
}).listen(3000);
console.log("server is running on port number ");
jadeの代わりにejsを使う
npm install ejs
app.js
app.engine('html', require('ejs').renderFile);
app.set('view engine', 'html');
./ routes/index.js
exports.index = function(req, res){
res.render('index', { title: 'ejs' });};
このスニペットを使うこともできます:
var app = require("express");
app.get('/', function(req,res){
res.sendFile(__dirname+'./dir/yourfile.html')
});
app.listen(3000);
私はこれが古い質問であることを知っています - もしconnectやexpressを使わないのであれば、これは簡単なファイルサーバーユーティリティです。むしろhttpモジュールです。
var fileServer = require('./fileServer');
var http = require('http');
http.createServer(function(req, res) {
var file = __dirname + req.url;
if(req.url === '/') {
// serve index.html on root
file = __dirname + 'index.html'
}
// serve all other files echoed by index.html e.g. style.css
// callback is optional
fileServer(file, req, res, callback);
})
module.exports = function(file, req, res, callback) {
var fs = require('fs')
, ext = require('path').extname(file)
, type = ''
, fileExtensions = {
'html':'text/html',
'css':'text/css',
'js':'text/javascript',
'json':'application/json',
'png':'image/png',
'jpg':'image/jpg',
'wav':'audio/wav'
}
console.log('req '+req.url)
for(var i in fileExtensions) {
if(ext === i) {
type = fileExtensions[i]
break
}
}
fs.exists(file, function(exists) {
if(exists) {
res.writeHead(200, { 'Content-Type': type })
fs.createReadStream(file).pipe(res)
console.log('served '+req.url)
if(callback !== undefined) callback()
} else {
console.log(file,'file dne')
}
})
}
これはかなり古い質問です...しかし、ここでのあなたのユースケースが単にアドホックベースでブラウザに特定のHTMLページを送ることであるならば、私はこのような単純なものを使うでしょう:
var http = require('http')
, fs = require('fs');
var server = http.createServer(function(req, res){
var stream = fs.createReadStream('test.html');
stream.pipe(res);
});
server.listen(7000);
https://Gist.github.com/xgqfrms-GitHub/7697d5975bdffe8d474ac19ef906e906
これが、Expressサーバーを使用したホストの静的HTMLファイルの簡単なデモコードです。
あなたに役立つことを願っています!
// simple express server for HTML pages!
// ES6 style
const express = require('express');
const fs = require('fs');
const hostname = '127.0.0.1';
const port = 3000;
const app = express();
let cache = [];// Array is OK!
cache[0] = fs.readFileSync( __dirname + '/index.html');
cache[1] = fs.readFileSync( __dirname + '/views/testview.html');
app.get('/', (req, res) => {
res.setHeader('Content-Type', 'text/html');
res.send( cache[0] );
});
app.get('/test', (req, res) => {
res.setHeader('Content-Type', 'text/html');
res.send( cache[1] );
});
app.listen(port, () => {
console.log(`
Server is running at http://${hostname}:${port}/
Server hostname ${hostname} is listening on port ${port}!
`);
});
コネクトフレームワークでHTMLドキュメントを読み込むことができます。以下のコードとノードモジュールが存在する私のプロジェクトのパブリックフォルダに私のhtml文書と関連画像を置きました。
//server.js
var http=require('http');
var connect=require('connect');
var app = connect()
.use(connect.logger('dev'))
.use(connect.static('public'))
.use(function(req, res){
res.end('hello world\n');
})
http.createServer(app).listen(3000);
私はfsのreadFile()メソッドを試してみましたが、それはイメージをロードすることができません、それで私は接続フレームワークを使いました。