Contents
はじめに
こんにちは、野村です。
前回は、Node.jsで簡単なWebアプリを作ってHerokuにアップしてみました。
Node.jsのWebアプリ構築フレームワーク「express」で最低限のアプリを作って、それをHerokuにアップしてみます。Herokuは初めてなのですが、なんとかなりました。
atomiyama.com
2017-10-07 17:37
今回は、もうちょっとだけ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
１ページ目の内容をhtmlで記述
txt/02
２ページ目の内容をhtmlで記述
起動
起動のコマンドは以下の通り。
停止するときは「Ctrl+c」でOK。
$ node index.js
ブラウザで「http://localhost:5000」にアクセスすれば閲覧できます。
サイト作成例
終わりに
以上、expressを使って簡単なWebサイトを作ってみました。
それでは、今回はこれにて。