Node.js + Express + Bootstrap 으로 간단한 웹사이트 만들기

- 2월 21, 2018

이용할 프레임워크 및 라이브러리

패키지 관리
- npm
- Bower
서버 사이드
- Node.js
- Express
- EJS
클라이언트 사이드

jQuery
Bootstrap

만들게 될 페이지는 bootstrap 페이지에 사진을 넣은 간단한 형태임.

폴더 구조는 다음과 같다.

전제조건

다음의 애플리케이션이 설치된 Windows 환경이 전제입니다.

Node.js / npm
Bower
Git

환경구성

개발에 필요한 환경을 구성함. 패키지의 의존성 관리에 주의할 것!!

프로젝트 디렉토리(폴더) 작성

이 예제에서는「sample」을 루트로 하는 프로젝트 폴더를 작성했음。

이미지나 자바스크립트, 스타일시트 등을 저장할 public 폴더와 라우팅 파일을 저장할 routes, EJS 템플릿 엔진의 뷰 파일을 저장할 views 폴더 등을 만든다.

폴더 구성

sample

  │

  ├─public

  │  ├─images

  │  ├─javascripts

  │  ├─stylesheets

  │  └─third_party

  │

  ├─routes

  │

  └─views

npm init 로 package.json 를 작성함.

프로젝트 폴더 D:\Work\sample 에서 cmd 를 실행 후、 npm init 을 실행시킨다.

질문이 나올 때 적당히 Enter 를 치면 자동으로 다음과 같은 파일이 만들어진다.

package.json

{

  "name": "sample",

  "version": "1.0.0",

  "description": "",

  "main": "app.js",

  "scripts": {

    "test": "echo \"Error: no test specified\" && exit 1"

  },

  "author": "",

  "license": "MIT"

}

다음의 패키지를 npm 로 인스톨.
- express
- ejs
구체적인 인스톨 방법은 다음과 같다.
1. express のインストール
  
  1
  
  npm install express --save
2. ejs のインストール
  
  1
  
  npm install ejs --save

bower init 로bower.json 을 작성함.

package.json 의 작성과 동일하게 질문에 Enter 를 열심히 쳐서 완성을 시키면 다음과 같은 파일이 생성된다.

bower.json

{

  "name": "sample",

  "description": "",

  "main": "app.js",

  "authors": [

    ""

  ],

  "license": "MIT",

  "homepage": "",

  "ignore": [

    "**/.*",

    "node_modules",

    "bower_components",

    "test",

    "tests"

  ]

}

.bowerrc 를 작성

자동으로 생성되지 않으므로 에디터를 사용해서 아래 내용을 입력해서 파일을 만든다. 파일을 UTF-8 로 만드는 것이 안전하다.

.bowerrc

1

2

3

{

"directory": "public/third_party"

}
다음 패키지를 bower 로 인스톨
- jQuery
- Bootstrap
구체적인 인스톨 방법은 다음과 같다.
1. jQuery 인스톨
  
  jQuery 은 Bootstrap 과 의존성 문제가 있으므로 버전 2.x.x 으로 인스톨 할 것을 권장함.
  
  1
  
  bower install jquery#2 --save
2. Bootstrap 도 다음 명령어로 인스톨 함.
  
  1
  
  bower install bootstrap --save

구현

다음 리스트에 있는 파일을 각 폴더 안에 만들어서 저장한다.

이미지 파일은 다음 폴더에 저장한다.

./public/images/neko.jpg

./app.js

var express = require('express');

// express 를 실행해서 Application 을 생성

var app = express();

// 템플릿 엔진 EJS 설정

app.set('views', './views');

app.set('view engine', 'ejs');

// 정적 파일을 제공할 폴더를 지정

app.use('/public', express.static('public'));

// 라우팅 설정

app.use('/', require('./routes/index.js'));

// 서버 포트 설정

app.listen(3000);

// 애플리케이션 실행 로그

console.log('Server running at http://localhost:3000');

./routes/index.js

var express = require('express');

var router = express.Router();

// 디폴트 라우팅, 뒤에 나오는 파라메터 title, message 는 EJS 엔진으로 넘어감.

router.get('/', function (request, response) {

    response.render('index', { title: 'Sample Node.js', message: 'Hello there!' });

});

module.exports = router;

./views/index.ejs

<!DOCTYPE html>

<html lang="ja">

  <head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title><%= title %></title>

    <link rel="stylesheet" href="/public/third_party/bootstrap/dist/css/bootstrap.css" />

    <link rel="stylesheet" href="/public/stylesheets/index.css" />

  </head>

  <body>

    <nav class="navbar navbar-inverse navbar-fixed-top">

      <div class="container">

        <div class="navbar-header">

          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">

            <span class="sr-only">Toggle navigation</span>

            <span class="icon-bar"></span>

            <span class="icon-bar"></span>

            <span class="icon-bar"></span>

          </button>

          <a class="navbar-brand" href="#">Project name</a>

        </div>

        <div id="navbar" class="collapse navbar-collapse">

          <ul class="nav navbar-nav">

            <li class="active"><a href="#">Home</a></li>

            <li><a href="#about">About</a></li>

            <li><a href="#contact">Contact</a></li>

          </ul>

        </div>

      </div>

    </nav>

    <div class="container">

      <div class="starter-template">

        <h1>Bootstrap starter template</h1>

        <p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>

        <p><img id="img" src="/public/images/neko.jpg" class="img-thumbnail"></p>

        <p><%= message %></p>

      </div>

    </div>

    <script type="text/javascript" src="/public/third_party/jquery/dist/jquery.js"></script>

    <script type="text/javascript" src="/public/third_party/bootstrap/dist/js/bootstrap.js"></script>

 <script type="text/javascript" src="/public/javascripts/index.js"></script>

  </body>

</html>

넘어온 개체 및 변수는 <%= 프로퍼티 명 %> 으로 사용할 수 있음.

./public/javascripts/index.js

var image_onclick = function (event) {

    window.alert('Hello World !');

};

var document_onready = function (event) {

    $('#img').on('click', image_onclick);

};

$(document).ready(document_onready);

./public/stylesheets/index.css

body {

  padding-top: 50px;

}

.starter-template {

  padding: 40px 15px;

  text-align: center;

}

테스트

실행하기 위해서는 다음과 같이 진행함.

cmd 로 커멘드라인 혹은 콘솔 실행
프로젝트 폴더로 이동

1

cd /d "D:\Work\sample"
다음 명령어를 실행해서 서비스를 제공개시

1

node app.js
브라우저에서 확인

웹 브라우저에서 http://localhost:3000/ 에 접속하면 다음과 같은 화면이 나올 것이며 그러면 성공!

[참조]

https://garafu.blogspot.jp/2016/07/nodejs-express-webapp-tutorial.html

이 블로그 검색

Woosokism BLOG

2021년 목표설정