expressで簡易Webサイトを作ってみる

はじめに

こんにちは、野村です。

前回は、Node.jsで簡単なWebアプリを作ってHerokuにアップしてみました。

expressでHelloWorldを作ってHerokuに公開
Node.jsのWebアプリ構築フレームワーク「express」で最低限のアプリを作って、それをHerokuにアップしてみます。Herokuは初めてなのですが、なんとかなりました。

今回は、もうちょっとだけWebサイトっぽいものを作ってみます。

各バージョン

・node v8.6.0
・npm 5.5.1
・express 4.16.1
・ejs 2.5.7

セットアップ

適当なディレクトリを作って、その中で作業します。

$ npm init
$ npm install express --save
$ npm install ejs --save
$ mkdir views txt
$ touch index.js views/index.ejs home.html txt/01 txt/02

・「npm init」の対話型設定項目は、すべてEnterキーで次に進める。
・txtデレクトリ内のファイルの名前は、そのままURLに組み込まれます。なので無難な文字列で命名してください。

各ファイルの内容

index.js

"use strict";

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

app.set('port', (process.env.PORT || 5000));
app.set('views', __dirname + '/views');
app.set('view engine', 'ejs');

fs.readdir('./txt/', (err, files)=>{
  let idx = '<a href="/">home</a>';

  files.forEach( (v,i,a)=>{
    if (v.match(/^(?!\.).+$/i)) {
      idx += ' | <a href="/'+v+'">'+v+'</a>';
    }
  });

  app.get('/', (req, res)=>{
    fs.readFile('./home.html', 'utf8', (err,text)=>{
      res.render('index', {tit : 'home', con : text, lst : idx});
    });
  });

  app.get('/:id', (req, res)=>{
    const ttl = req.params.id;
    fs.readFile('./txt/'+ttl, 'utf8', (err,text)=>{
      res.render('index', {tit : ttl, con : text, lst : idx});
    });
  });
});

app.listen(app.get('port'), ()=>{
  console.log("running at localhost:" + app.get('port'))
});

views/index.ejs

全ページのテンプレートになります。

<html lang="ja">
<head>
<meta charaset="utf-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1"/>
<title><%= tit %> - サイト名</title>
</head>
<body>
<h1><%= tit %> - サイト名</h1>
<%- lst %>
<hr/>
<%- con %>
<hr/>
<center><small>著作権表記</small></center>
</body>
</html>

home.html

トップページの内容をhtmlで記述

txt/01

1ページ目の内容をhtmlで記述

txt/02

2ページ目の内容をhtmlで記述

起動

起動のコマンドは以下の通り。
停止するときは「Ctrl+c」でOK。

$ node index.js

ブラウザで「http://localhost:5000」にアクセスすれば閲覧できます。

サイト作成例

終わりに

以上、expressを使って簡単なWebサイトを作ってみました。

それでは、今回はこれにて。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

野村 野村のプロフィール
メインPCはWindows10のVirtualBox上のFreeBSD。Linux/Unixの小ネタを求めて日々右往左往してたりする。