'ejs'에 해당되는 글 1건

  1. 2016.03.31 [Node.js] Node.js + Express + EJS + PM2 초간단 구성하기 on OSX

[Node.js] Node.js + Express + EJS + PM2 초간단 구성하기 on OSX

ITWeb/개발일반 2016. 3. 31. 11:23

imac osx에 node.js 를 이용한 웹서비스 구성 테스트 입니다.

기존에 잘 작성된 문서들이 많아서 그냥 참고해서 그대로 따라해 보았습니다.

다만, 구성 하면서 springmvc 와 비교를 해보면서 전통적인 웹 개발 방법보다 어떤 장점을 갖는지 이해하고자 하였습니다.


  • Node.js
  • Express
    • 설치 참고 사이트
    • global 로 설치 해야 하는 경우와 그렇지 않은 경우로 나눠서 설치 하며 기준을 명시 해 두어야 합니다.
    • 설치 (전역 모듈로 설치 합니다.)
      • $ npm install express
      • $ npm install -g express
    • path 설정

      #!/bin/bash
       
       
      if [ -f ~/.bashrc ]; then
        source ~/.bashrc
      fi
       
      JAVA_HOME=`/usr/libexec/java_home`
      MAVEN_HOME=/Users/jeonghoug/Dev/apps/maven
      MYSQL_HOME=/usr/local/mysql
      NODE_PATH=/usr/local/lib/node_modules
      PATH=$NODE_PATH:$NODE_PATH/npm/bin:$JAVA_HOME/bin:$MAVEN_HOME/bin:
      $MYSQL_HOME/bin:$PATH
       
      export PATH
      export NODE_PATH
      export JAVA_HOME
      export MAVEN_HOME
      export MYSQL_HOME
    • 설치된 경로

      # global 옵션을 주지 않고 설치하게 되면 아래와 같이 해당 계정 아래 생성 됩니다.
      $ pwd
      /Users/jeonghoug/node_modules/express
    • 로컬 설치된 express 삭제 하고 global 로 설치 합니다.

      $ npm uninstall express
      $ sudo npm install -g express
    • express 를 이용한 HelloWebServer 테스트
      • $ mkdir HelloWebServer; cd HelloWebServer; vi app.js
      • 참조 샘플 : http://pyrasis.com/nodejs/nodejs-HOWTO

        var express = require('express')
          , http = require('http')
          , app = express()
          , server = http.createServer(app);
         
        app.get('/', function (req, res) {
          res.send('Hello /');
        });
         
        app.get('/world.html', function (req, res) {
          res.send('Hello World');
        });
         
        server.listen(8000, function() {
          console.log('Express server listening on port '
             + server.address().port);
        });
      • global 옵션 설치 후 실행

        $ node app.js
        module.js:327
            throw err;
            ^
        Error: Cannot find module 'express'
            at Function.Module._resolveFilename (module.js:325:15)
            at Function.Module._load (module.js:276:25)
            at Module.require (module.js:353:17)
            at require (internal/module.js:12:17)
            at Object.<anonymous> (/Dev/workspace/HelloWebServer/app.js:1:77)
            at Module._compile (module.js:409:26)
            at Object.Module._extensions..js (module.js:416:10)
            at Module.load (module.js:343:32)
            at Function.Module._load (module.js:300:12)
            at Function.Module.runMain (module.js:441:10)

         

        • 위와 같이 에러가 발생 하며, 이유는 -g 옵션으로 설치된 경로는 /usr/local/lib/node_modules/express 로 설치가 되지만, 소스코드 상에 require('express') 에서는 상대 경로 찾기 때문에 모듈을 찾지 못하는 오류가 발생 합니다.
        • require('express') 를 require('/usr/local/lib/node_modules/express') 로 변경 후 실행 하면 정상 동작 합니다.
        • 또는 $ npm install express 로 local 설치 하고 실행 하면 정상 동작 합니다.
    • global 옵션으로 설치한 모듈에 대해서 'cannot find module' 에러 발생 시 해결 방법
      • 기본적으로 node 에서 사용하는 환경 변수 설정 중 path 설정이 안되어 있어 발생 하게 됩니다.

        #!/bin/bash
         
         
        if [ -f ~/.bashrc ]; then
          source ~/.bashrc
        fi
         
        JAVA_HOME=`/usr/libexec/java_home`
        MAVEN_HOME=/Users/jeonghoug/Dev/apps/maven
        MYSQL_HOME=/usr/local/mysql
        NODE_PATH=/usr/local/lib/node_modules
        PATH=$NODE_PATH:$NODE_PATH/npm/bin:$JAVA_HOME/bin:$MAVEN_HOME/bin:$MYSQL_HOME/bin:$PATH
         
         
        export PATH
        export NODE_PATH
        export JAVA_HOME
        export MAVEN_HOME
        export MYSQL_HOME
      • 위와 같이 NODE_PATH 환경 변수 설정을 해주게 되면 관련 에러가 발생 하지 않게 되며 global 모듈을 사용할 수 있게 됩니다.

      • 위와 같이 path 설정 후 발생하는 문제 점

        $ npm install
        module.js:327
            throw err;
            ^
        Error: Cannot find module '/usr/local/lib/node_modules/npm/bin/
        node_modules/npm/bin/npm-cli.js'
            at Function.Module._resolveFilename (module.js:325:15)
            at Function.Module._load (module.js:276:25)
            at Function.Module.runMain (module.js:441:10)
            at startup (node.js:139:18)
            at node.js:968:3

         

        • 위에서 보는 것과 같이 NODE_PATH 설정 후 npm install을 하게 되면 npm 의 기본 경로가 중복으로 설정되어 동작하는 문제가 있어 아래와 같이 수정 합니다.

          #!/bin/bash
           
           
          if [ -f ~/.bashrc ]; then
            source ~/.bashrc
          fi
           
          JAVA_HOME=`/usr/libexec/java_home`
          MAVEN_HOME=/Users/jeonghoug/Dev/apps/maven
          MYSQL_HOME=/usr/local/mysql
          NODE_PATH=/usr/local/lib/node_modules
          PATH=$JAVA_HOME/bin:$MAVEN_HOME/bin:$MYSQL_HOME/bin:$PATH
           
          export PATH
          export NODE_PATH
          export JAVA_HOME
          export MAVEN_HOME
          export MYSQL_HOME
  • Express Generator
    • EJS 템플릿
    • 설치하기
      • $ sudo npm install -g express-generator
    • 샘플코드 참고 사이트
    • ejs 템플릿 생성하기

      $ express --ejs
         create : .
         create : ./package.json
         create : ./app.js
         create : ./public
         create : ./public/images
         create : ./public/stylesheets
         create : ./public/stylesheets/style.css
         create : ./routes
         create : ./routes/index.js
         create : ./routes/users.js
         create : ./views
         create : ./views/index.ejs
         create : ./views/error.ejs
         create : ./bin
         create : ./bin/www
         install dependencies:
           $ cd . && npm install
         run the app:
           $ DEBUG=ExampleEJS:* npm start
         create : ./public/javascripts
    • package.json
      • 본 서비스에서 사용 또는 설치 되어야 할 모듈을 모두 정의해 둡니다.
        • maven 으로 비교 하면 dependency 기능과 비슷합니다.
      • 정의가 끝나면 $ npm install 을 통해 설치를 합니다.
    • app.js
      • 본 서비스 또는 어플리케이션에 대한 global 설정을 하게 됩니다.
      • 여기서 URI 등록 작업이 이루어 지며, SpringMVC 에서 @Controller 내 @RequestMapping 과 같은 기능을 처리 합니다.
      • routes 를 등록하여 사용이 가능 하며, routes/*.js 에서 MVC 구성을 하면 됩니다.
    • bin/www
      • http server를 생성 하며 설정 정보를 기록 합니다.
    • views/*.ejs
      • jsp 나 jstl 과 같은 역할을 하는 view 파일들이 위치 합니다.
      • 실시간 수정이 가능 합니다.
    • routes/*.js
      • spring mvc 에서 controller, bo, dao 와 같은 역할의 파일들이 위치 합니다.
      • 수정 내용 반영을 위해서는 재시작을 해야 합니다.
    • public/*
      • static file 들이 위치 합니다.
    • ExampleEJS

      // views/index.ejs
      <!DOCTYPE html>
      <html>
        <head>
          <title><%= title %></title>
          <link rel='stylesheet' href='/stylesheets/style.css' />
        </head>
        <body>
          <h1><%= title %></h1>
          <% for (var i = 0; i < 5; i++) { %>
          <p>Welcome to <%= title %></p>
          <% } %>
        </body>
      </html>
       
      // routes/index.js
      var express = require('express');
      var router = express.Router();
       
      /* GET home page. */
      router.get('/', function(req, res) {
        res.render('index', { title: 'Express' });
      });
       
      module.exports = router;
  • PM2
    • 참조사이트
    • 설치
      • $ sudo npm install -g pm2
    • 실행
      • 기존에 $ node app.js 로 실행을 했다면, $ pm2 start app.js 로 실행이 가능 합니다.


: