MEAN Stack Front to Back

Presentation on theme: "MEAN Stack Front to Back"— Presentation transcript:

1 MEAN Stack Front to Back
(MEANAuthApp) 1. 환경 구축 2. Express Setup & Routes

2 참고 Traversy Media 유투브에서 Traversy Media 검색 MEAN Stack Front To Back 동영상
유투브에서 Traversy Media 검색 MEAN Stack Front To Back 동영상 RfqbZMNtaOXJQiDebNXjVapWPZ Github 소스코드

3 목차 1. 환경 구축 2. Express Setup & Routes 3. User Model and Register
4. API authentication and Token 5. Angular 4 Components & Routes 6. Register Component, Validation & Flash messages 7. Auth Service & User Registration 8. Login & Logout 9. Protected Requests & Auth Guard 10. App Deployment to Heroku

4 1. 환경 구축

5 사용할 기술들 Node.js & NPM Express framework MongoDB database
Mongoose ORM (object relational mapper)

6 실습 환경 구축 설치할 것들 Node.js MongoDB Atom (웹에디터) Git (git-bash 이용)

7 Node.js 설치 설치 사이트 https://nodejs.org/ 최신 버전으로 설치
기본 설치 위치: C:\Program Files\nodejs 안정화 버전 최신 버전

8 Node.js 설치 설치 확인 C:\Users\bclee>node -v v8.2.1
C:\Users\bclee>npm -v 5.3.0 Node: Node.js 실행 명령어 Npm: 노드 패키지 관리자(node package manager)

9 MongoDB 설치 설치 사이트 MongoDB 설치 MongoDB 실행 https://www.mongodb.com/
기본 설치 위치 C:\Program Files\MongoDB\Server\3.4\bin DB 데이터 저장용 폴더 생성 - F:\node\data 폴더 MongoDB 실행 mongodb 데몬 실행: > mongod --dbpath f:\node\data dbpath 지정 필요 mongodb 연결 (별도의 명령창에서 실행) > mongo

10 웹에디터 atom 설치 설치 사이트 현재 폴더에서 atom 열기 > atom .

11 Git 설치 설치 사이트 Git bash 명령창 이용 Github 사이트에서 소스 복사해오기
Git is a free and open source distributed version control system  Git bash 명령창 이용 Github 사이트에서 소스 복사해오기 > git clone 주소

12 2. Express Setup & Routes

13 프로젝트 초기화 프로젝트 폴더 생성 프로젝트 폴더로 이동 Atom 프로그램 열기 F:\node\meanauthapp
Cd F:\node\meanauthapp 여기서 명령창 열기 (shift+오른쪽버튼) Atom 프로그램 열기 > atom . (현재 폴더를 프로젝트 폴더로 atom 에디터 열기) 현재 폴더에 아무 내용 없음

14 프로젝트 초기화 프로젝트 초기설정 > npm init 몇가지 질의에 응답 OK 하면 package.json 파일이 생성됨
Entry point를 app.js로 변경

15 프로젝트 초기화 Package.json 파일에 start script 추가 서버 실행명령 > Node app.js 또는
> Npm start

16 필요한 패키지 설치 설치할 패키지 Express (웹 프레임워크) Mongoose (mongodb 연계 패키지)
Bcryptjs (패스워드 암호화) Cors (cross-origin resource sharing) Jsonwebtoken (Json Web Token) Body-parser (POST 등으로 메시지 전달) Passport (패스포트, 인증 프레임워크) Passport-jwt (패스포트와 JWT의 연계)

17 필요한 패키지 설치 패키지 설치 > npm install --save express mongoose bcryptjs cors jsonwebtoken body-parser passport passport-jwt 설치과정 설명 설치 후 node_modules 폴더가 새로 만들어지고 이곳에 관련 패 키지들이 설치된 것을 확인 --save 옵션은 설치된 패키지 내역을 package.json 파일의 dependencies에 등록하도록 하는 옵션 향후 다른 폴더/컴퓨터에 설치하는 경우 node_modules 폴더는 옮길 필요가 없으며 package.json 파일만 그대로 복사되어 있다 면 npm install 명령을 실행하면 똑같은 패키지들이 설치됨

18 필요한 패키지 설치 node_modules 폴더가 새로 생성됨 Dependencies에 설치된 패키지들이 등록됨
최신 버전들이 설치됨

19 app.js 파일 생성 app.js 서버 실행 > node app.js > npm start
const express = require('express'); const path = require('path'); const bodyparser = require('body-parser'); const cors = require('cors'); const passport = require('passport'); const mongoose = require('mongoose'); const app = express(); // port number const port = 3000; // Start server app.listen(port, function(){ console.log("server started on port "+port); }); app.js 서버 실행 > node app.js > npm start 프로젝트의 메인 실행 파일

20 Callback 함수 이용 방식 아래의 두가지 사용 방식은 동일 app.listen(port, ()=>{
console.log("Server started on port "+port); }); app.listen(port, function() { console.log("Server started on port "+port); }); 익명함수 (anonymous function) 이곳에서만 사용할 것이므로 이름을 붙이거나 할 필요가 없음 실행시(runtime)에 동적으로 선언됨

21 웹브라우저 출력 서버 재시작 > npm start 브라우저로 열기 localhost:3000
const express = require('express'); const path = require('path'); const bodyParser = require('body-parser'); const cors = require('cors'); const passport = require('passport'); const mongoose = require('mongoose'); const app = express(); const port = 3000; app.get('/', (req, res)=>{ res.send('<h1>서비스 준비중...</h1>'); }); app.listen(port, ()=>{ console.log("Server started on port "+port); 서버 재시작 > npm start 브라우저로 열기 localhost:3000

22 Nodemon을 이용한 서버 자동 재실행 Nodemon 설치 nodemon 실행
> npm install –g nodemon Nodemon은 소스 변경시 서버를 자동 재실행하는 기능을 가짐 -g 옵션은 글로벌 설치를 의미하며 컴퓨터 내의 어떤 위치에서도 실행 가능하게 설치 일반적으로 –g 옵션 없이 설치하면 현재 폴더의 node_modules 폴더 내에 설치하게 되므로 현재 프로젝트에서만 실행 가능함 nodemon 실행 현재 폴더의 package.json 파일을 참조하여 node app.js를 실행 폴더 내의 파일이 변경되면 서버를 자동 재실행함. 개발의 편의 성 향상 > nodemon > node app.js > nodemon app.js

23 Nodemon을 이용한 서버 자동 재실행 app.get('/', (req,res)=>{
res.send('<h1>서비스 준비중입니다...</h1><p> Hello world </p>'); }); app.listen(port, function() { console.log("Server started on port "+port); 소스를 수정하고 저장하면 서버가 자동 재실행되어 반영됨

24 Express API

25 CORS Middleware CORS (Cross-origin Resource Sharing)
Ajax에는 Same Origin Policy라는 원칙이 있음. 현재 브라우저에 보여지고 있는 HTML을 내려준 웹서버(Origin)에게만 Ajax 요청 을 보낼 수 있다는 원칙 CSRF(Cross-Site Request Forgery) 크로스 사이트 요청 변조 공격 이런 공격을 방지하기 위해 Same Origin Policy가 중요함

26 CORS Middleware CORS OpenAPI를 통한 매시업(Mashup)이 활성화되고 있는데 여러 개 의 도메인을 사용해야 하는 대규모 사이트를 개발할 때 CORS가 필요함 W3C가 크로스도메인간에도 Ajax요청을 주고 받을 수 있는 방법 을 표준화 한 것이 CORS임 “요청을 받은 웹서버가 허락하면 크로스도메인이라도 Ajax로 통 신할 수 있다” 웹서버가 헤더에 Access-Control-Allow-*류의 헤더를 보내면 크 로스도메인 Ajax를 허용함 

27 CORS Middleware Express에서 CORS를 허용하려면 다음과 같은 미들웨어 를 사용해야 함

28 CORS Middleware Npm cors 모듈을 이용하여 간편하게 선언하기
참조 > npm install cors (cors 모듈 설치) var express = require('express'); var cors = require('cors'); var app = express(); app.use(cors()); app.get('/products/:id', function (req, res, next) {   res.json({msg: 'This is CORS-enabled for all origins!'}) }) app.listen(80, function () {   console.log('CORS-enabled web server listening on port 80') App.js에 app.use(cors()); 추가 App.use() 함수는 미들웨어를 선언하는 함수

29 Body-Parser Middleware
사용자 입력값을 전달하기 위해 POST 방식의 웹페이지 요청을 처리하기 위한 미들웨어 (로그인시 username/password는 POST 방식으로 전달) const app = express(); // Port number const port = 3000; // CORS Middleware app.use(cors()); // Body Parser Middleware app.use(bodyParser.json()); // Index Route app.get('/', (req,res)=>{ res.send('<h1>서비스 준비중입니다...</h1><p> Hello world </p>'); }); // Start Server app.listen(port, function() { console.log("Server started on port "+port);

30 새로운 루트 추가하기 메인 루트 새로운 users 루트 App.js에 users 루트 등록
새로운 users 루트 별도의 폴더 routes를 만들고 이곳에 users.js 파일을 생성 예정 App.js에 users 루트 등록 const app = express(); const users = require('./routes/users'); // Port number const port = 3000; // CORS Middleware app.use(cors()); // Body Parser Middleware app.use(bodyParser.json()); app.use('/users', users); routes/users.js 파일을 읽어와서 users라는 변수에 할당 users 객체를 /users 루트에 등록

31 새로운 루트 추가하기 routes 폴더 만들기 이곳에 users.js 파일 생성하기 브라우저로 확인

32 여러 개의 루트 추가 routes/users.js const express = require('express');
const router = express.Router(); // Register router.get('/register', (req, res, next) => { res.send('등록하기'); }); // Authenticate router.get('/authenticate', (req, res, next) => { res.send('인증'); // Profile router.get('/profile', (req, res, next) => { res.send('프로필'); // Validate router.get('/validate', (req, res, next) => { res.send('검증'); module.exports = router; routes/users.js

33 Static Folder 등록하기 Public 폴더를 만들고 이곳에 static 파일을 저장할 예정
App.js에 static folder 지정 // CORS Middleware app.use(cors()); // Set Static Folder app.use(express.static(path.join(__dirname, 'public'))); // Body Parser Middleware app.use(bodyParser.json());

34 Static 파일 작성 Public 폴더 생성 Public/index.html Public/hello.html

35 MongoDB 연결하기 MongoDB의 데이터를 저장할 폴더 선정 MongoDB 서버 실행
F:\node\data 폴더에 저장할 예정 F:\node\data 폴더 생성 MongoDB 서버 실행 > mongod --dbpath f:\node\data

36 MongoDB 연결하기 DB 연결정보 저장을 위한 config 파일 작성
config 폴더 생성 (별도의 config 폴더에 작성하여 관리) database.js 파일에 세부 내용 작성 (config 상세 내용) localhost: db가 동작하는 서버의 호스트이름. 동일한 서버에서 db가 동작되는 경우 27017: mongoDB의 기본 운영 포트번호 meanauth: DB이름 지정 secret: 토큰인증에 사용할 서버의 비밀번호 (외부에 공개되지 않고 서버 내에서만 사용됨)

37 MongoDB 연결하기 App.js 파일에서 DB연결 설정 const express = require('express');
const path = require('path'); const bodyParser = require('body-parser'); const cors = require('cors'); const passport = require('passport'); const mongoose = require('mongoose'); const config = require('./config/database'); mongoose.connect(config.database, {useMongoClient: true}); mongoose.connection.on('connected', ()=>{ console.log('Connected to Database '+config.database); });

38 MongoDB 연결하기 에러 발생시 처리 추가 const config = require('./config/database');
// Connect to Database mongoose.connect(config.database, {useMongoClient: true}); // on Connection mongoose.connection.on('connected', ()=>{ console.log('Connected to Database '+config.database); }); // on Error mongoose.connection.on('error', (err)=>{ console.log('Database error: '+err);

39 서버에 업로드 및 실행 포트번호 사용 요령 서버에 업로드 및 실행 포트번호는 자신에게 할당된 번호 중에서 순서대로 사용할 것.
남이 사용하는 포트번호와 충돌되지 않도록 주의. 여러 개의 서버를 동시에 실행하는 경우 포트번호가 달라야 함 서버에 업로드 및 실행 계정 루트에 node 폴더 생성. 이곳에 하부 폴더로 업로드 Entry 파일 이름 변경 (추후 실행할 다른 프로세스와 구별 필요) $ mv app.js -> app_id_1.js 서버실행 $ node app_id_1.js & & 기호는 백그라운드 실행을 의미. 서버는 터미널을 끄더라도 계속 실행되어야.

40 서버에 업로드 및 실행 서비스 확인 서비스 검색 및 중지 브라우저에서 접속하고 확인 현재 실행중인 프로세스 검색 프로세스 중지
자신의 계정 홈페이지(아파치 서비스)와는 별도로 실행됨 서비스 검색 및 중지 현재 실행중인 프로세스 검색 $ ps -ef | grep node 프로세스 중지 $ kill -9 프로세스번호

41 과제물 2 자신의 계정 홈페이지에 링크 게시 공용 서버에서의 리소스 사용 규칙(예절)
자신의 아파치 홈페이지 과제물 페이지에 링크 게시 교내에서만 접속 가능 학교의 방화벽에서 포트번호를 차단하고 있어서 외부에서는 접 속 불가 공용 서버에서의 리소스 사용 규칙(예절) 포트번호는 공용자원으로서 자신에게 할당된 번호를 사용할 것 MongoDB는 공용서비스로서 DB명을 중복되지 않게 사용할 것 자신이 실행하는 서버의 파일이름을 구별 가능하게 설정할 것