Express를 이용하여 웹 개발(1)

날짜:

[Node.js]Express를 이용하여 웹 개발(1)

Express란?에서 express의 구조에 대해서 간단하게 알아보았는데 이번 포스팅에서는 node.js와 express의 설치에 대해 예제와 설명을 기재할 예정이다.
개요
  1. node.js설치와 express설치
  2. express로 프로젝트 생성
  3. 포트 변경 방법
  4. 접속 확인
  1. node.js설치
    repo추가
    $ sudo yum install epel-release
    node.js인스톨
    $ sudo yum install nodejs npm —enablerepo=epel
    npm 실행이 잘 되지 않을 경우 npm에서 사용 되는 gcc, gcc-c++을 추가해 준다.
    $ sudo yum install gcc gcc-c++
  2. express설치
    익스프레스 프로젝트를 생성할 디렉토리를 생성
    $ mkdir /srv
    $ cd /srv
    $ ls -al
    total 4
drwxr-xr-x  2 root root    6 Sep 23  2011 .
drwxr-xr-x 21 root root 4096 Mar  7 03:37 ..
    익스프레스 설치
    $ npm install -g express-generator
    express-generator@4.13.1 /usr/lib/node_modules/express-generator
tqq sorted-object@1.0.0
tqq mkdirp@0.5.1 (minimist@0.0.8)
mqq commander@2.7.1 (graceful-readlink@1.0.1)
    익스프레스 설치 확인
    $ express -V
    4.13.1
    익스프레스 도움말 보기
    $ express -h
    Usage: express [options] [dir]

Options:

 -h, --help          output usage information
 -V, --version       output the version number
 -e, --ejs           add ejs engine support (defaults to jade)
     --hbs           add handlebars engine support
 -H, --hogan         add hogan.js engine support
 -c, --css <engine>  add stylesheet <engine> support (less|stylus|compass|sass) (defaults to plain css)
     --git           add .gitignore
 -f, --force         force on non-empty directory
    이것으로 익스프레스의 설치가 완료 되었다.
    익스프레스로 프로젝트 생성
    $ express project01
    create : project01
create : project01/package.json
create : project01/app.js
create : project01/public
create : project01/public/javascripts
create : project01/public/images
create : project01/public/stylesheets
create : project01/public/stylesheets/style.css
create : project01/routes
create : project01/routes/index.js
create : project01/routes/users.js
create : project01/views
create : project01/views/index.jade
create : project01/views/layout.jade
create : project01/views/error.jade
create : project01/bin
create : project01/bin/www

install dependencies:
  $ cd project01 && npm install

run the app:
  $ DEBUG=project01:* npm start
    project01디렉토리가 생성되었고 하위에 express란?에서 설명하였던 디렉토리들이 생성된 것을 확인할 수 있다.
    우선, 이것으로 프로젝트는 생성되었다.
  3. 사용 포트 변경
    express에서 프로젝트를 생성하였을 때 기본적으로 3000번 포트를 사용하지만 여러개의 프로젝트를 생성하였을 경우 포트 충돌이 일어날 수 있으므로 변경을 할 필요가 있다.
    접속 포트 변경
    $ cd project01
    $ ls -al
    drwxr-xr-x 6 root root   86 Mar  7 03:57 .
drwxr-xr-x 3 root root   22 Mar  7 03:57 ..
-rw-r--r-- 1 root root 1442 Mar  7 03:57 app.js
drwxr-xr-x 2 root root   16 Mar  7 03:57 bin
-rw-r--r-- 1 root root  328 Mar  7 03:57 package.json
drwxr-xr-x 5 root root   55 Mar  7 03:57 public
drwxr-xr-x 2 root root   36 Mar  7 03:57 routes
drwxr-xr-x 2 root root   58 Mar  7 03:57 views
    $ cd bin
    $ ls -al
    total 4
drwxr-xr-x 2 root root   16 Mar  7 03:57 .
drwxr-xr-x 6 root root   86 Mar  7 03:57 ..
-rwxr-xr-x 1 root root 1595 Mar  7 03:57 www
    $ vi www
    #!/usr/bin/env node

/**
* Module dependencies.
*/

var app = require('../app');
var debug = require('debug')('project01:server');
var http = require('http');

/**
* Get port from environment and store in Express.
*/

var port = normalizePort(process.env.PORT || '3000');
app.set('port', port);

/**
* Create HTTP server.
*/

var server = http.createServer(app);

/**
* Listen on provided port, on all network interfaces.
*/

server.listen(port);
server.on('error', onError);
server.on('listening', onListening);

/**
* Normalize a port into a number, string, or false.
*/

function normalizePort(val) {
var port = parseInt(val, 10);

if (isNaN(port)) {
 // named pipe
 return val;
}

if (port >= 0) {
 // port number
 return port;
}

return false;
}

/**
* Event listener for HTTP server "error" event.
*/

function onError(error) {
if (error.syscall !== 'listen') {
 throw error;
}

var bind = typeof port === 'string'
 ? 'Pipe ' + port
 : 'Port ' + port;

// handle specific listen errors with friendly messages
switch (error.code) {
 case 'EACCES':
   console.error(bind + ' requires elevated privileges');
   process.exit(1);
   break;
 case 'EADDRINUSE':
   console.error(bind + ' is already in use');
   process.exit(1);
   break;
 default:
   throw error;
}
}

/**
* Event listener for HTTP server "listening" event.
*/

function onListening() {
var addr = server.address();
var bind = typeof addr === 'string'
 ? 'pipe ' + addr
 : 'port ' + addr.port;
debug('Listening on ' + bind);
}
    변경해야 할 부분
    15째 행의 ‘3000’번 포트를 사용하고 있는 것을 알 수 있다.
    var port = normalizePort(process.env.PORT || ‘3000’);
    이번 포스팅에서는 확인만 하고 넘어간다.
  4. 접속 확인
    프로젝트 루트 디렉토리로 이동
    $ cd ..
    익스프레스 실행을 위한 모듈을 설치
    $ npm install
    package.json파일에 express를 실행시키기 위해 필요한 모듈이 있어 npm install을 실행하게 되면 package.json파일을 읽어 모듈을 설치한다.
    $ cat package.json
    {
"name": "project01",
"version": "0.0.0",
"private": true,
"scripts": {
 "start": "node ./bin/www"
},
"dependencies": {
 "body-parser": "~1.13.2",
 "cookie-parser": "~1.3.5",
 "debug": "~2.2.0",
 "express": "~4.13.1",
 "jade": "~1.11.0",
 "morgan": "~1.6.1",
 "serve-favicon": "~2.3.0"
}
    익스프레스 실행(웹 서버 기동)
    $ node bin/www
    종료 방법 [Ctrl]+[C]
    [Ctrl]+[C]로 종료를 할 경우 웹 서버도 종료 되므로 실제 사용할 때에는 백그라운드로 실행을 시킬 필요가 있다.
    접속 확인
<그림1>
무사히 접속까지 확인을 하였다.
다음 포스팅에서는 router에서 view로 데이터를 넘겨주는 방법에 대해서 포스팅 할 예정이다.

댓글

댓글 쓰기