저번에 보도된 거예요. 계속!

↓의 보도가 계속되다.
Node.js를 사용하여 웹 응용 프로그램을 만드는 절차 - 사전 지식 & 베타로 쓴 편 -
지난번에 나는 http 모듈을 읽고 베타로 서버를 시작하는 방법을 총결하였다.
이번엔 노드야.저는 js의 유명한 웹 프레임워크, Express로 웹 사이트를 구축하고 싶습니다.
node.js를 설치하지 않은 사람은 미리 설치하세요!확인 방법에 관해서는 지난번 보도 참조~~

고속 설치

그러면 먼저 Express를 설치하십시오.
우선, --version 옵션이 express를 설치했는지 확인하십시오.

$ express --version
4.16.0

버전이 나타나지 않으면 Express를 설치하십시오.
자주 사용하려면 -g 옵션(전역 설치)을 추가하십시오.-g 옵션으로 설치했습니다.

$ npm install -g express

그리고 공식적으로 준비한 express-generator도 설치한다.
https://expressjs.com/ja/starter/generator.html

$ npm install -g　express-generator

이렇게 준비하면 완성된다.

사전 설정 작성

그렇다면 express 실제 응용 프로그램을 만들어 보세요.
임의의 디렉터리에서 다음 명령을 실행합니다.

$ express [任意のアプリ名]

이번에는 first_app 라는 이름으로 제작되었다.

$ express first_app

  warning: the default view engine will not be jade in future releases
  warning: use `--view=jade' or `--help' for additional options


   create : first_app/
   create : first_app/public/
   create : first_app/public/javascripts/
   create : first_app/public/images/
   create : first_app/public/stylesheets/
   create : first_app/public/stylesheets/style.css
   create : first_app/routes/
   create : first_app/routes/index.js
   create : first_app/routes/users.js
   create : first_app/views/
   create : first_app/views/error.jade
   create : first_app/views/index.jade
   create : first_app/views/layout.jade
   create : first_app/app.js
   create : first_app/package.json
   create : first_app/bin/
   create : first_app/bin/www

   change directory:
     $ cd first_app

   install dependencies:
     $ npm install

   run the app:
     $ DEBUG=first-app:* npm start

그리고 first_app라는 디렉터리가 형성되었기 때문에 지시에 따라 다음 명령을 실행합니다.

$ cd first_app
$ npm install

설치는 여기서 끝냅니다.
현재, 우리는express를 실제로 실행합시다.실행DEBUG=first-app:* npm start.
반드시 first_app 의 디렉터리에서 실행하십시오!

$ DEBUG=first-app:* npm start

> [email protected] start /hoge/first_app
> node ./bin/www

  first-app:server Listening on port 3000 +0ms

이런 화면이 되면 성공이다.
그럼 이렇게 방문http://localhost:3000하세요.
이런 화면이 나오면 성공!간단하네!

터미널에서도 확인200이 반환됩니다.

참고로 방문http://localhost:3000/users하면 이런 화면일 거예요.이것은 나중에 쓸 것이니 기억하세요.

지난번 고생이 뭐야.../routes/index.js/의 내용을 고쳐 써 보세요.
/routes/index.js

var express = require('express');
var router = express.Router();

/* GET home page. */
router.get('/', function(req, res, next) {
-  res.render('index', { title: 'express' });
+  res.render('index', { title: 'どんぶラッコ' });
});

module.exports = router;

저장한 후 서버 재부팅을 중지하고 액세스를 시도합니다http://localhost:3000.
터미널에서 ctrl + c 키를 누르면 서버를 정지할 수 있습니다.

바뀌었네!

파일 구성

파일 설정을 확인해 보겠습니다.node_modules 이외의 형식tree 명령.

$ tree -I 'node_modules'
.
├── app.js
├── bin
│   └── www
├── package-lock.json
├── package.json
├── public
│   ├── images
│   ├── javascripts
│   └── stylesheets
│       └── style.css
├── routes
│   ├── index.js
│   └── users.js
└── views
    ├── error.jade
    ├── index.jade
    └── layout.jade

매우 간단한 구성.

app.js

http 접근 시 처리 부분

/routes

라우팅 처리가 기록되어 있음

/public

이미지 또는 CSS와 같은 정적 파일 배치 장소

/views

에는 드로잉을 위한 .jade 파일이 배치됩니다.API 서버 node로만 사용합니다.js를 안 썼으면 안 해봤을 텐데.

JADE를 사용하지 않는 사람이라면 기본적으로 위 3개를 회전시키면 됩니다.

라우팅 처리

이번이 마지막http://localhost:3000/rakko입니다. 끝내고 싶습니다./routes 목차를 보십시오.index.js과users.js가 있을 것이다.
방금 http://localhost:3000/users 방문했는데 내용이 떴죠?
네, 그건 /routes 이미 준비가 되었기 때문입니다users.js!
즉, 제작rakko.js하면 라우팅 처리가 가능하겠죠!?
빨리 /routes/rakko.js 이 서류를 작성하세요.코드에 관해서는 표절users.js하자.
/routes/rakko.js

var express = require('express');
var router = express.Router();

/* GET ラッコ listing. */
router.get('/', function(req, res, next) {
  res.send('ラッコだよ！');
});

module.exports = router;

하지만 이것만으로 Not Found가 됩니다.

앱 때문에js에서rakko.js 있어요!전달이 안 돼서요.
따라서 app.js 에서 추가로 처리하자.
8행 부근에서 추가 기록var rakkoRouter = require('./routes/rakko');

var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');
var rakkoRouter = require('./routes/rakko');

제24행 부근에서 보충 기록app.use('/rakko', rakkoRouter);하세요.

app.use('/', indexRouter);
app.use('/users', usersRouter);
app.use('/rakko', rakkoRouter);

서버를 다시 시작하십시오.
그리고

제대로 표시됐어!

$ DEBUG=first-app:* npm start

> [email protected] start /hoge/first_app
> node ./bin/www

  first-app:server Listening on port 3000 +0ms
GET /rakko 200 6.781 ms - 18

통신도 잘 되고요.

보충:

그나저나 이 루트에 관해서는 이런 작법도 일할 수 있다.routes/index.js에 다음 내용을 추가해 주십시오.
routes/index.js

var express = require('express');
var router = express.Router();

/* GET home page. */
router.get('/', function(req, res, next) {
  res.render('index', { title: 'どんぶラッコ' });
});

+ router.get('/rakko2', function(req, res, next) {
+   res.send('ラッコ2だよ！');
+ });

module.exports = router;

이를 바탕으로 방문http://localhost:3000/rakko2하면 잘 나타난다는 것을 알 수 있다.나 안 움직여!이런 분들은 서버가 다시 시작되었는지 확인하세요.

app.js에 추가 처리를 하지 않아도 동작합니다!
"그럼 이렇게 하자!"이 가능하다, ~할 수 있다,...
확실히 이렇게 가장 작은 응용 프로그램이라면 이 대응도 문제없지만, 페이지 수가 끊임없이 증가할 때 index.js가 너무 길어져서 처리가 이해가 안 돼요.
예를 들어 서점에 갈 때는'만화각','상무서각','참고서각'처럼 종류가 많이 나뉘어 있기 때문에 자신이 원하는 책의 장소를 파악할 수 있다.만약 이것이 어떤 종류로 분류되지 않고 무질서하게 배열되어 있다면 자신이 원하는 책의 위치를 알 수는 없겠죠?
지금부터 정리와 정돈의 수법을 익히면 앞으로의 자신에게 도움이 된다!이 단계부터 익숙해지자!!