LoginSignup
16
18

More than 5 years have passed since last update.

@loremipsumjp

Node.js で小規模なアプリケーションを開発する方法 その2

Last updated at Posted at 2015-10-15

2日目も無事にやる気が維持して続きました、ストックしてもらえると嬉しいですね。皆さんに役立ててもらえるような記事を書けるように頑張ります。

現在のappディレクトリの構成

現在のappディレクトリの構成は下記のようになっているかと思います。

app
├ bin
│ └ www
├ routes
│ └ pages.js
├ views
│ └ pages
│   └ anonymous-home.jade
├ index.js
└ package.json

前回は、とにかく最小限のファイルで動作確認出来るようにと色々とはしょってしまったので、いくつかファイルを加えていこうと思います。

設定ファイルを格納するconfigディレクトリ

データベースの設定やCookie/Sessionの設定を格納するためのディレクトリを作成します。

cd app
mkdir config

config ディレクトリ内にWebサイトの設定を格納するための設定ファイルを site.json という名称で作成します。

touch config/site.json

site.json の内容は下記の通りです。

site.json
{
  "development": {
    "baseUrl": ""
  },
  "test": {
    "baseUrl": ""
  },
  "production": {
    "baseUrl": ""
  }
}

app/index.js を編集して baseUrl を設定ファイルから読み込むようにします。

app/index.js(変更前)
'use strict';

var env = process.env.NODE_ENV || 'development'

var url = require('url')
var path = require('path')
var morgan = require('morgan')
var express = require('express')
var serveStatic = require('serve-static')
var proxyMiddleware = require('proxy-middleware')
var pages = require('./routes/pages')

module.exports = factory

function factory(options) {
  options = options || {}

  var staticPath = options.staticPath
  var app = express()

  app.set('strict routing', true)
  app.set('views', path.join(__dirname, 'views'))
  app.set('view engine', 'jade')

  app.locals.baseUrl = ''

  app.use(morgan('dev'))
  app.get('/', pages.anonymous.home())

  if (env === 'development') {
    app.use('/static', proxyMiddleware(url.parse('http://127.0.0.1:8080')))
  } else {
    app.use('/static', serveStatic(staticPath))
  }

  return app
}
app/index.js(変更後)
'use strict';

var env = process.env.NODE_ENV || 'development'

var url = require('url')
var path = require('path')
var morgan = require('morgan')
var express = require('express')
var serveStatic = require('serve-static')
var proxyMiddleware = require('proxy-middleware')
var pages = require('./routes/pages')

var siteConfig = require('./config/site')[env]

module.exports = factory

function factory(options) {
  options = options || {}

  var staticPath = options.staticPath
  var app = express()

  app.set('strict routing', true)
  app.set('views', path.join(__dirname, 'views'))
  app.set('view engine', 'jade')

  app.locals.baseUrl = siteConfig.baseUrl

  app.use(morgan('dev'))
  app.get('/', pages.anonymous.home())

  if (env === 'development') {
    app.use('/static', proxyMiddleware(url.parse('http://127.0.0.1:8080')))
  } else {
    app.use('/static', serveStatic(staticPath))
  }

  return app
}

変更点は下記の通りです。

var siteConfig = require('./config/site')[env]

app.locals.baseUrl = siteConfig.baseUrl

bin/wwwをもう少しマシにする

staticPath を設定してなかった bin/www を編集します。

#!/usr/bin/env node

'use strict';

var port = Number.parseInt(process.env.PORT || '3000', 10)

var http = require('http')
var factory = require('../index')

var app = factory()
var server = http.createServer(app)

server.listen(port, function () {
  console.log('Listening on ' + port)
})


#!/usr/bin/env node

'use strict';

var port = Number.parseInt(process.env.PORT || '3000', 10)

var http = require('http')
var path = require('path')
var factory = require('../index')

var app = factory({
  staticPath: path.join(__dirname, '../../static/dist'),
})
var server = http.createServer(app)

server.listen(port, function () {
  console.log('Listening on ' + port)
})

変更点は下記の通りです。

var path = require('path')

var app = factory({
  staticPath: path.join(__dirname, '../../static/dist'),
})

Jade のレイアウト機能を使う

まずはviewsのディレクトリ構造を変更します、下記は新しく作成されるファイルです、内容は現時点では空で良いです。

  • layouts/2-column/admin.jade
  • layouts/2-column/base.jade
  • layouts/2-column/members.jade
  • layouts/full-width/admin.jade
  • layouts/full-width/base.jade
  • layouts/full-width/members.jade
  • layouts/default.jade
views
├ layouts
│ ├ 2-column
│ │ ├ admin.jade
│ │ ├ base.jade
│ │ └ members.jade
│ ├ full-width
│ │ ├ admin.jade
│ │ ├ base.jade
│ │ └ members.jade
│ └ default.jade
└ pages
  └ anonymous-home.jade

default.jade の内容はほとんど anonymous-home.jade のコピーでOKです。

default.jade
doctype
html(lang='ja')
  head
    meta(charset='UTF-8')
    meta(http-equiv='X-UA-Compatible', content='IE=edge,chrome=1')
    title Nippo
    meta(name='description', content='')
    meta(name='viewport', content='width=device-width, initial-scale=1')
    link(rel='stylesheet', href='#{baseUrl}/static/css/bootstrap.min.css')
    link(rel='stylesheet', href='#{baseUrl}/static/css/bootstrap-theme.min.css')
    block style
    script(src='#{baseUrl}/static/js/vendor/modernizr-2.8.3.min.js')
  body
    block content
    script(src='#{baseUrl}/static/js/vendor/jquery-1.11.2.min.js')
    script(src='#{baseUrl}/static/js/vendor/bootstrap.min.js')
    script(src='#{baseUrl}/static/js/bundle.js')
    block script

ポイントは下記の3点です。

block style

block content

block script

簡単なfull-widthの方から終わらせていきたいと思います。layouts/full-width ディレクトリ内のファイルの内容を下記に記載します。

full-width/base.jade
extends ../default

block content
  block main
full-width/admin.jade
extends ./base
full-width/members.jade
extends ../base

次に2-columnの方を記載します、サブカラムの内容は適当です。

2-column/base.jade
extends ../default

block content
  .row
    .col-md-push-9.col-md-3
      block sub
    .col-md-pull-3.col-md-9
      block main
2-column/admin.jade
extends ./base

block sub
  ul.nav
    li
      a(href='#{baseUrl}/admin/lorem/') Lorem
    li
      a(href='#{baseUrl}/admin/ipsum/') Ipsum
    li
      a(href='#{baseUrl}/admin/dolor/') Dolor
    li
      a(href='#{baseUrl}/admin/sit/') Sit
    li
      a(href='#{baseUrl}/admin/amet/') Amet
2-column/members.jade
extends ./base

block sub
  ul.nav
    li
      a(href='#{baseUrl}/members/quick/') Quick
    li
      a(href='#{baseUrl}/members/brown/') Brown
    li
      a(href='#{baseUrl}/members/fox/') Fox

最後にpages/anonymous-home.jadeを編集します。

pages/anonymous-home.jade(変更前)
doctype
html(lang='ja')
  head
    meta(charset='UTF-8')
    meta(http-equiv='X-UA-Compatible', content='IE=edge,chrome=1')
    title Nippo
    meta(name='description', content='')
    meta(name='viewport', content='width=device-width, initial-scale=1')
    link(rel='stylesheet', href='#{baseUrl}/static/css/bootstrap.min.css')
    link(rel='stylesheet', href='#{baseUrl}/static/css/bootstrap-theme.min.css')
    script(src='#{baseUrl}/static/js/vendor/modernizr-2.8.3.min.js')
  body
    main Nippo
    script(src='#{baseUrl}/static/js/vendor/jquery-1.11.2.min.js')
    script(src='#{baseUrl}/static/js/vendor/bootstrap.min.js')
    script(src='#{baseUrl}/static/js/bundle.js')
pages/anonymous-home.jade(変更後)
extends ../layouts/default

block content
  main Nippo

.gitignoreを追加する

app と static のそれぞれのディレクトリ内に .gitignore を作成します。

app/.gitignore
/node_modules/
static/.gitignore
/dist/
/node_modules/

明日はstaticディレクトリへのGulpの導入やアプリケーションサーバのProductionモードでの動作について解説したいと思います。

16
18
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
16
18