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日でした笑...