node.js、EXpressで構築したWEBページ上にCSSを読み込ませることができない

前提・実現したいこと

node.js、EXpressで構築したWEBページ上にCSSを読み込ませること

Web開発者ツールで、以下のエラーメッセージが発生しています。

発生している問題・エラーメッセージ


GET 
http://127.0.0.1:3000/ [HTTP/1.1 200 OK 1ms]
HTML ドキュメントの文字エンコーディングが宣言されていません。ドキュメントに US ASCII 外の文字が含まれている場合、ブラウザーの設定によっては文字化けすることがあります。ページの文字エンコーディングはドキュメント中または転送プロトコルで宣言されなければなりません。  127.0.0.1:3000
GET 
http://127.0.0.1:3000/main.css [HTTP/1.1 200 OK 1ms]
MIME タイプが “text/css” ではなく “text/html” となっているため、スタイルシート http://127.0.0.1:3000/main.css は読み込まれていません。  127.0.0.1:3000

該当のソースコード

index.js
1
2var http = require('http');
3var express = require('express');
4var fs = require('fs');
5var url = require('url');
6var path =require('path');
7var css = require('css');
8var app = express();
9
10var mime = require('mime');
11mime.getExtension('text/html; charset=utf8');
12mime.getExtension('text/css; charset=utf8');
13
14var cache = {};
15
16app.use(express.static(__dirname+'public'));
17
18var server = http.createServer();
19
20server.on('request',(function(req,res){
21
22fs.readFile(__dirname + '/index.html', 'utf-8', function (err, data) {
23 if (err) {
24            res.writeHead(404, {'Content-Type' : 'text/plain'});
25            res.write('page not found');
26            return res.end();
27        }
28res.writeHead(200, {'Content-Type' : 'text/html'});
29        res.write(data);
30        res.end();
31    });
32})
33
34).listen(3000)
35

index.html
1<!DOCTYPE html>
2<html>
3<head>
4	<title>Page Title</title>
5	<link rel="stylesheet" type="text/css" href="main.css"/>
6</head>
7
8<body>
9<div class="header">
10  <h2>Blog Name</h2>
11</div>
12
13<div class="row">
14  <div class="leftcolumn">
15    <div class="card">
16      <h2>TITLE HEADING</h2>
17      <h5>Title description, Dec 7, 2017</h5>
18      <div class="fakeimg" style="height:200px;">Image</div>
19      <p>Some text..</p>
20    </div>
21    <div class="card">
22      <h2>TITLE HEADING</h2>
23      <h5>Title description, Sep 2, 2017</h5>
24      <div class="fakeimg" style="height:200px;">Image</div>
25      <p>Some text..</p>
26    </div>
27  </div>
28  <div class="rightcolumn">
29    <div class="card">
30      <h2>About Me</h2>
31      <div class="fakeimg" style="height:100px;">Image</div>
32      <p>Some text about me in culpa qui officia deserunt mollit anim..</p>
33    </div>
34    <div class="card">
35      <h3>Popular Post</h3>
36      <div class="fakeimg">Image</div><br>
37      <div class="fakeimg">Image</div><br>
38      <div class="fakeimg">Image</div>
39    </div>
40    <div class="card">
41      <h3>Follow Me</h3>
42      <p>Some text..</p>
43    </div>
44  </div>
45</div>
46
47<div class="footer">
48  <h2>Footer</h2>
49</div>
50</body>
51</html>
52

main.css
1body {
2  font-family: Arial;
3  padding: 20px;
4  background: #f1f1f1;
5}
6
7/* Header/Blog Title */
8.header {
9  padding: 30px;
10  font-size: 40px;
11  text-align: center;
12  background: white;
13}
14
15/* Create two unequal columns that floats next to each other */
16/* Left column */
17.leftcolumn {
18  float: left;
19  width: 75%;
20}
21
22/* Right column */
23.rightcolumn {
24  float: left;
25  width: 25%;
26  padding-left: 20px;
27}
28
29/* Fake image */
30.fakeimg {
31  background-color: #aaa;
32  width: 100%;
33  padding: 20px;
34}
35
36/* Add a card effect for articles */
37.card {
38  background-color: white;
39  padding: 20px;
40  margin-top: 20px;
41}
42
43/* Clear floats after the columns */
44.row:after {
45  content: "";
46  display: table;
47  clear: both;
48}
49
50/* Footer */
51.footer {
52  padding: 20px;
53  text-align: center;
54  background: #ddd;
55  margin-top: 20px;
56}
57
58/* Responsive layout - when the screen is less than 800px wide, make the two columns stack on top of each other instead of next to each other */
59@media screen and (max-width: 800px) {
60  .leftcolumn, .rightcolumn {
61    width: 100%;
62    padding: 0;
63  }
64}

上記3つのファイルはすべて同じディレクトリにあります。

試したこと

MIMEアドオンをインストールし、text/cssを指定してはいますが
res.writeHead(200, {'Content-Type' : 'text/html'});の部分しか読まないためか効果がありません…

補足情報（FW/ツールのバージョンなど）

node v0.10.48
npm v1.3.6
express v4.17.1

行動規範の内容に同意します

回答1件

node.js、EXpressで構築した

express を活用できていません（構築例は後述します）。

まずは２点を回答。

console.log(__dirname + 'public') を試してください。

存在しないディレクトリを公開用のホームディレクトリに指定しています。
2. express は http モジュールを呼び、HTTP/1.1 を標準で listen できます。

構築例:スタティックサーバーのみ

修学時（http で試用時）は、以下のコードでスタティックなサーバーが実現できます。

+ home .... linux 系ホームディレクトリの例
  +- ex
     |  index.js ... express
     +- public
          index.html
          style.css

上記環境の場合だと node ex で実行できるはずです。（追記）

express で書くスタティックなHTTPサーバー

javascript
1var express = require('express');
2var app = express();
3console.log( __dirname+'public' ); // '/expublic' になる
4app.use(express.static(__dirname+'/public'));
5app.listen(3000); // 2.

/public ディレクトリに置く、公開用ファイル群

html
1<!DOCTYPE html>
2
3<meta charset="utf-8">
4<title>Hello! NodeJS-Express</title>
5<link rel="stylesheet" href="style.css">
6
7<h1>Hello! NodeJS-Express</h1>

css
1h1 { background:green; color:white; }

投稿2020/03/06 03:58

編集2020/03/06 04:19

AkitoshiManabe

総合スコア5432

Myry

2020/03/06 07:37

回答くださりありがとうございます。ご案内にそってやってみました。 [root@localhost myapp]# node index.js module.js:340 throw err; ^ Error: Cannot find module 'expresss' at Function.Module._resolveFilename (module.js:338:15) at Function.Module._load (module.js:280:25) at Module.require (module.js:364:17) at require (module.js:380:17) at Object.<anonymous> (/root/Desktop/myapp/index.js:1:77) at Module._compile (module.js:456:26) at Object.Module._extensions..js (module.js:474:10) at Module.load (module.js:356:32) at Function.Module._load (module.js:312:12) at Function.Module.runMain (module.js:497:10) 上のような結果になっています。もうインストールしてあり、node_modukes/にもあるんですがなぜでしょうか。

AkitoshiManabe

2020/03/06 08:00

ご質問時の応答を得られた時のディレクトリに作業ディレクトリを戻し、稼働していたファイルをコメントアウトなどで対応してみてください。回答で例示した内容は環境が異なるはずですので、無理に合わせるとPATH検索の条件が狂うと思います

Myry

2020/03/09 07:21

ご返信遅くなりました。＞ディレクトリに作業ディレクトリを戻し、稼働していたファイルをコメントアウトなどで対応してみてください。この通り行いましたが結果は変わりませんでした・・・ほかに考えられる要因はありますでしょうか？

AkitoshiManabe

2020/03/09 12:00

お察しの通り、エラー自体は require("express") の時点でモジュールが見つからないものと思います。元の環境でも同じエラーだとすると、「npm ls express」で正しく導入できているか確認してみる。再度、「npm i express（必要に応じて -g -s などのオプションを付与）」を叩いてみるなど、モジュールの導入状況の再確認を行ってみてください。「npm un express」で一旦削除してからインストールし直すのが早いかもしれません。

行動規範の内容に同意します