次はNode環境で、ウェブサイトを作っていこう
前回からの続き、expressをインストールし、サーバーも立ち上がったので、早速ウェブサイトを作っていくよ。
通常のサイト制作と大きく違っているのは、まず、ディレクトリの構造。 前回もやったけど、エンドポイントって考え方がメインになるので、旧来の絶対パスとか相対パスっていう考え方とはちがうなぁという感じ。
基本、静的データと動的データを分けて、expressに登録していくんじゃ。
あと、テンプレートエンジンと言われているプラグインをexpressに入れて、ページを作っていくよ。
何故そんなものを使うかと言うと、ただの静的なサイトをテキストエディタでもIDEでも使って作って登録した静的フォルダにいれれば、今までのような阿部 寛的なページは勿論作れるのじゃが、php的な作り方。つまり、ヘッダーとかフッタとかの使い回す部分を分けておいて、ページ読み込み時に合体させるみたいな事をするには、このテンプレートエンジンを使うのじゃ。
名前の通り、”テンプレート”を生成するエンジンじゃの。
色々種類はあるが、自分はhandlebarsが使いやすいので、これで解説するぞ。いいな！
handlebarsではなくて、それのexpress用エンジンhbsをインストール。
~/myProject/web-server$ npm i hbs
up to date, audited 89 packages in 2s
2 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
そして、expressにテンプレートエンジンとして登録。
app.set('view engine', 'hbs');
次に、publicディレクトリを制作。
ここに静的なファイルは保存していく。img,css,クライアント側jsなんかじゃな。あと、岩のようなhtmlページとか。
それが出来たら、publicディレクトリをexpressに登録。
その前に、pathモジュールをダンロードして、インストール。
npm i path
const path = require('path');
nodeのサイトは、app.jsが全ての起点になるのと、サーバーにデプロイする際に、ディレクトリの構造が従来のサイト構造と違っているので、app.jsファイルを基点にモジュールでパスをしっかりと確定しておかないとややこしい事になる。なので、モジュールで指定する。
const publicDir = path.join(__dirname, "../public")
app.use(express.static(publicDir));
何をやっているかと言うと、ルートフォルダからのpublicディレクトリへのパスをモジュールで割り出して、expressで静的ディレクトリとして登録している。静的なファイルは全部ここやでとexpressに伝えている。
そして、viewsディレクトリを作る。テンプレートエンジンで制作したページは、基本ここに保存していくのである。
静的ファイルはpublic、動的ファイルはviews、nodeのローレベルファイルはルート直下っていうイメージでディレクトリを整理していくと良いよ。多分！
で、その中にindex.hbsを作ろう。ここがランディングページになる。
hbsって言っても、普通のhtmlページ。
index.hbs
<!DOCTYPE html>
<html lang="en">
<head>
<title>Node de Site</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h1>Title here</h1>
</body>
</html>
で、前回やったルーティング。
このindex.hbsをルートページにする。sendでなくて、render。テンプレートをレンダリングする。
app.get('',(req, res)=>{
res.render('index')
})
で、一度サーバーを立ち上げて、ページを表示させてみよう。
~/myProject$ node src/app.js
server running on Port:3030
ブラウザで localhost:3030/ にアクセスすると、ページが表示されてるね。
次は、少し動的に、ページのタイトルとサイトの説明文を挿入してみよう。
{{}}で囲ったところに、変数を入れると、レンダリング時に表示される。
index.hbs
<!DOCTYPE html>
<html lang="en">
<head>
<title>Title here</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h1>{{title}}</h1>
<h3>{{description}}</h3>
</body>
</html>
app.js
app.get('/',(req, res)=>{
res.render('index', {
title: "Hishori Abe no site",
description: "Welcome to fastest site in japan"
})
})
で、ブラウザでローカルにアクセスし、表示するとこうなってるはず。
ここまでで、node環境にexpressをインストールし、handlebarsを使って、htmlページをサーバー上で表示することが出来たんじゃ。
app.jsファイルはこんな感じ。
const path = require('path');
const express = require('express');
const app = express();
const port = process.env.PORT || 3030;
app.set('view engine', 'hbs');
app.get('/',(req, res)=>{
res.render('index', {
title: "Hishori Abe no site",
description: "Welcome to fastest site in japan"
})
})
const publicDir = path.join(__dirname, "../public")
app.use(express.static(publicDir));
// routing
// / => root
app.get('/', (req, res)=>{
res.send('Hello Express!');
})
app.listen(port, ()=>{
console.log(`server running on Port:${port}`);
})
バイトの時間がきたんで、handlebarsを使ってページをテンプレート化していくのは次回じゃ！
じゃあの。
↧