web-dev-qa-db-ja.com

html + cssを応答として送信する単純なnode.jsサーバー

応答としてhtmlファイルを送信する基本的なhttpサーバーを作成しました。ブラウザを使用しているクライアントがcssを使用してhtmlを表示できるように、cssファイルも送信するにはどうすればよいですか？

私が持っているコード：

var http = require('http');

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

fs.readFile('./AppClient.html', function(err, data) {
    if (err){
        throw err;
    }
    htmlFile = data;
});



var server = http.createServer(function (request, response) {
      response.writeHead(200, {"Content-Type": "text/html"});
      response.end(htmlFile);
    });

//Listen on port 8000, IP defaults to 127.0.0.1
server.listen(8000);


console.log("Server running at http://127.0.0.1:8000/");

私が試したこと（それはうまくいかないようです-ここではCSSファイルのコンテンツしか表示されません）：

var http = require('http');

var fs = require('fs');
var htmlFile;
var cssFile;

fs.readFile('./AppClient.html', function(err, data) {
    if (err){
        throw err;
    }
    htmlFile = data;
});

fs.readFile('./AppClientStyle.css', function(err, data) {
    if (err){
        throw err;
    }
    cssFile = data;
});

var server = http.createServer(function (request, response) {
      response.writeHead(200, {"Content-Type": "text/css"});
      response.write(cssFile);
      response.end();

      response.writeHead(200, {"Content-Type": "text/html"});
      response.write(htmlFile);
      response.end();
    });

//Listen on port 8000, IP defaults to 127.0.0.1
server.listen(8000);


console.log("Server running at http://127.0.0.1:8000/");

htmlファイル：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="AppClientStyle.css">
</head>
<body>


<div class=middleScreen>

<p id="p1">Random text</p>

</div>

</body>
</html>

cssファイル：

@CHARSET "UTF-8";

.middleScreen{
    text-align:center;
    margin-top:10%;
}

ここではエクスプレスを使いたくありません（学習目的のみ）

javascripthtmlcssnode.js
15
kiluk876

最初のスニペットで記述したのは、ブラウザーが要求するURIに関係なく、HTMLファイルの本文で応答するWebサーバーです。

それでいいのですが、2番目のスニペットでは、2番目のドキュメントを閉じた応答ハンドルに送信しようとしています。これが機能しない理由を理解するには、HTTPのしくみを理解する必要があります。 HTTPは（ほとんどの場合）要求->応答タイプのプロトコルです。つまり、ブラウザは何かを要求し、サーバーはそのこと、または何らかのエラーメッセージをブラウザに送り返します。 （サーバーがブラウザにコンテンツをプッシュできるようにするキープアライブとメソッドはスキップします。これらはすべて、ここで頭に浮かぶように思われる単純な学習目的をはるかに超えています。）に不適切であると言うだけで十分ですブラウザが要求していないときに、2番目の応答をブラウザに送信します。

では、ブラウザに2番目のドキュメントを要求させるにはどうすればよいでしょうか。まあ、それは十分簡単です... HTMLファイルにはおそらく<link rel="stylesheet" href="AppClientStyle.css"> 鬼ごっこ。これにより、ブラウザーはサーバーにAppClientStyle.cssを要求する要求を行います。これを処理するには、switchまたはifをcreateServerコードに追加して、ブラウザーが要求するURLに基​​づいて異なるアクションを実行します。

var server = http.createServer(function (request, response) {
    switch (request.url) {
        case "/AppClientStyle.css" :
            response.writeHead(200, {"Content-Type": "text/css"});
            response.write(cssFile);
            break;
        default :    
            response.writeHead(200, {"Content-Type": "text/html"});
            response.write(htmlFile);
    });
    response.end();
}

したがって、最初に http：// localhost：80 でサーバーにアクセスすると、htmlファイルが送信されます。次に、そのファイルの内容により、ブラウザが http：// localhost：8000/AppClientStyle.css を要求します。

プロジェクトディレクトリに存在するファイルを提供することで、サーバーをはるかに柔軟にすることができます。

var server = http.createServer(function (request, response) {
    fs.readFile('./' + request.url, function(err, data) {
        if (!err) {
            var dotoffset = request.url.lastIndexOf('.');
            var mimetype = dotoffset == -1
                            ? 'text/plain'
                            : {
                                '.html' : 'text/html',
                                '.ico' : 'image/x-icon',
                                '.jpg' : 'image/jpeg',
                                '.png' : 'image/png',
                                '.gif' : 'image/gif',
                                '.css' : 'text/css',
                                '.js' : 'text/javascript'
                                }[ request.url.substr(dotoffset) ];
            response.setHeader('Content-type' , mimetype);
            response.end(data);
            console.log( request.url, mimetype );
        } else {
            console.log ('file not found: ' + request.url);
            response.writeHead(404, "Not Found");
            response.end();
        }
    });
}

これをHTMLおよびCSSファイルと同じディレクトリで開始します。上記は単純でエラーが発生しやすく、安全ではありません。しかし、それはあなた自身の学習または地域開発の目的には十分であるべきです。

上記のすべてはExpressを使用するよりも簡潔ではないことに注意してください。実際、なぜExpressを使いたくないのかわからないので、試してみるように説得します。

$ npm install express
$ mkdir www
$ mv AppClientStyle.css www/
$ mv AppClient.html www/index.html

スクリプトは次のようになります：（ Express Hello World から借用）

var express = require('express')
var app = express()

app.use(express.static('www'));

var server = app.listen(8000, function () {

    var Host = server.address().address
    var port = server.address().port

    console.log('Express app listening at http://%s:%s', Host, port)

})

次に、スクリプトを実行し、ブラウザで http：// localhost：80 を指定します。それは本当に無痛です。

21
Andy Zarzycki