Progateを使ってWeb製作をし始めてから2週間。ある程度知識が集まってきたので、ほぼ同じでもいいから自分で何か作ってみようと始めた矢先...。

エクスプローラに置いている静的HTMLファイルを、Node.jsを使って立ち上げたサーバーで表示したい。サーバーを立ち上げるコードなどは知っていたが、Progateと同じコードでやってもできない。

結局解決したが、気を付けなければいけないことがあったので、自分の勉強の証として残しておきます。

結論：パスが違った

ファイルの階層はこんな感じ

MyIntroduction
├── public
│   ├── img
│   │   └──background.png
│   └── css
│       └──stylesheet.css
├── view
│   └── index.html
├── app.js
└── package.json

下記のapp.jsはExpressを使ってルーティングをするためのファイルで、改善前です。

app.js

const express=require('express');
const app=express();

//pubilcフォルダ内のファイルも読み込めるようにする。
app.use(express.static('public'));

app.get('/',(req,res)=>{
    res.render('index.html');
});

app.listen(3000);

トップページでindex.htmlファイルを表示したかったができず...

解決方法

app.jsにパスに関するコードを追加した。

app.js

const express=require('express');
const app=express();

//パスの設定
const path=require('path');
app.use(express.static(path.join(__dirname,'view')));

//pubilcフォルダ内のファイルも読み込めるようにする。
app.use(express.static('public'));

app.get('/',(req,res)=>{
    res.render('index.html');
});

app.listen(3000);

useメソッドで静的なHTMLファイルを格納しているディレクトリViewを設定できる。

これによって製作したHTMLが表示されました！！
しかしこれだけではHTMLしか適応されておらず、さらにCSSを適用するには、コードにあった

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

でpublicフォルダも指定してあげれば、stylesheet.cssにもアクセスできるようになる。
ただし、自分のファイル階層ではstylesheet.cssは、publicディレクトリの中のCSSディレクトリの中にあったので

index.html

<link rel="stylesheet" href="/css/stylesheet.css">

のように、stylesheet.css ではなく現在の位置を起点にリンク先ページの場所を指定することに注意。

こんな簡単なことで悩み、結構調べ、考えてた自分はまだまだ勉強不足と実感できる1日でした笑...