Expressで静的ファイル(static)を利用する

2018年12月18日

画像やCSSなどの静的ファイルを利用するには、Expressにあらかじめ備わっているexpress.static関数を使います。

 

下記の関連ページで作成したプロジェクトに、スタイルシート(style.css)を適用してみます。

 

関連ページ

EJSテンプレートエンジンを利用する[Express]

 

 

まずpublicディレクトリを作成したら、その中にstyle.cssを作成します。

 

ファイル構造は下記のようになります。

 

app.jsに、上記で作成した「public」を設定したexpress.staticを適用させます。

 

スタイルシートのリンクを設定します。

 

以上でスタイルが変更されるのが確認できます。

 

実際にスタイルシートは下記アドレスで確認することができます。

http://localhost:3000/style.css

 

 

下記の「hello」のようにプレフィックスを設定することも可能です。

 

プレフィックスを設定したら、スタイルシートのリンクも変更しておきます。

 

実際にスタイルシートのアドレスが、hello以下になっていることを確認できます。

http://localhost:3000/hello/style.css

 

 

 

LINEで送る
Pocket

Copyright © 2019 思考の葉 All Rights Reserved.  プライバシーポリシー