MEAN Stack Front to Back

Slides:



Advertisements
Similar presentations
ⓒ 2015 NHN Entertainment Corp. Django 로 만드는 초간단 블로그 시스템운영팀 김영태 개발환경 구축.
Advertisements

을지대학교 무선 네트워크 사용 방법 2010 년 06 월 01 일. 을지대학교 무선 네트워크 사용 방법 1. PC 무선랜 카드 활성화 및 체크 1 단계 : 시작 -> 설정 -> 네트워크 설정 2 단계 : 무선 네트워크 설정 선택 -> 마우스 버튼 오른쪽 클릭 -> 사용.
HTTPS Packet Capture Tutorial
2016 유성환 Hybrid MOBILE.

IoT(사물인터넷) 보안 2016년 2학기 4. 라즈베리파이 카메라.
MEAN Stack Front to Back (MEANAuthApp)
김태원 심재일 김상래 강신택. 김태원 심재일 김상래 강신택 인터넷 통신망의 정보를 제공하는 서비스 인터넷의 자원 및 정보는 NIC가 관리 IP주소 또는 도메인으로 정보 검색 이용자 및 통신망 관한 정보를 제공.
Image & Video processing
Database Laboratory, Hong Ik University
IoT(사물인터넷) 보안 2016년 2학기 3. 라즈베리파이와 node.js.
MYSQL 설치.
Sep Youn-Hee Han 웹서비스 컴퓨팅 수업을 위한 코딩 환경 준비 Sep Youn-Hee Han
PHP입문 Izayoi 김조흔.
Linux/UNIX Programming
Ch. 1 LINUX SYSTEM.
1 최초 한번만 실행 Git 초기화 git init git config user.name “StudentNum”
9. Deploying mean applications
MEAN Stack Front to Back (MEANAuthApp)
node.js, express, jade, mongodb를 이용한 웹 어플리케이션 개발
5장 Mysql 데이터베이스 한빛미디어(주).
4장. 웹로직 서버상에서의 JDBC와 JTA의 운용
4-1장. MySQL 제13장.
CHAPTER 02 OpenCV 개요 PART 01 영상 처리 개요 및 OpenCV 소개.
AP 모드 활용하기 WiFi 시리얼 보드 활용가이드 김영준 헬로앱스 (
1. C++ 시작하기.
컴퓨터정보공학부 서버 안내 [ IBM x3500 ] it.sangji.ac.kr ict.sangji.ac.kr 혹은
MEAN Stack Front to Back (MEANAuthApp)
소프트웨어 분석과 설계 Struts2 & JBOSS 설치하기
ASP.NET AJAX 비동기 게시판 작성 2007 컴퓨터공학실험( I )
웹 어플리케이션 보안 2016년 2학기 4. Restful node apI 만들기.
FTP 프로그램의 활용 FTP 프로그램의 용도 인터넷 공간에 홈페이지 파일을 업로드할 때 필요
5장 Mysql 데이터베이스 한빛미디어(주).
Git 사용법 GitHub 가입 GitHub 새 저장소 만들기 Git 설치 로컬 저장소 만들기 로컬 저장소와 원격 저장소 연결
웹 어플리케이션 보안 2016년 2학기 3. Mongo db.
Slice&link.
웹 어플리케이션 보안 2016년 2학기 10. Workflow tools.
웹 어플리케이션 보안 2016년 2학기 2. Node routing.
㈜시스원이 제공하는 시스템 관리 통합 솔루션 SysmanagerOne Agent설치 안내서
MEAN Stack Front to Back
이메일 자동 포워딩 방법 (Outlook/OWA)
IPython Notebook + Spark + TensorFlow on MacOS
영상처리 실습 인공지능연구실.
MEAN Stack Front to Back (MEANAuthApp)
툴 설치 가이드 Formality SynopsysMentor.
MEAN Stack Front to Back (MEANAuthApp)
Adobe 제품 다운로드 및 설치 방법 안내 Adobe Creative Cloud Adobe License 권한을 받으신 분
뇌를 자극하는 Windows Server 장. 원격 접속 서버.
Day-27(Tue_10.16) 파일 서비스 설정 AD 가 설치된 환경에서 DHCP 설치 할 경우 권한 자격을 주어야함.
IoT(사물인터넷) 보안 2016년 2학기 3. 라즈베리파이와 node.js.
ASP.NET AJAX / AJAX Control Toolkit 응용 2008 컴퓨터공학실험( I )
MEAN Stack Front to Back (MEANAuthApp)
Git 사용하기 Git 소개 Git 사용 환경 GitHub 가입 및 원격 저장소 만들기 Git 설치 Git 최초 설정
MEAN Stack Front to Back (MEANAuthApp)
Cold Spring Harbor Laboratory Press 저널 이용 매뉴얼
IP-255S 설치 교육자료 101/102에 대한 설명을 시작 하겠습니다.
STS 에서 웹 서버 설치 방법.
암호학 응용 Applied cryptography
웹 어플리케이션 보안 2016년 2학기 11. Enhancing Security.
수동 설치시는 설치 방법 1. 두번에 설치 CD 속에 fscommand 폴더 밑에 Osstem 이라는 폴더를
암호학 응용 Applied cryptography
KISTI Supercomputing Center 명훈주
01. 분산 파일 시스템의 개요 네트워크에 분산된 파일을 사용자가 쉽게 접근하고 관리할 수 있게 해준다.
슬라이드 쇼의 설정 슬라이드 쇼의 실행 파일과 폴더의 관리 글꼴을 포함해서 저장 웹 페이지로 게시 압축 파일
숙제 작성 및 제출 과정 김진하 2008/03/14.
Docker Study 6~7.
MEAN Stack Front to Back
MEAN Stack Front to Back (MEANAuthApp)
20 XMLHttpRequest.
MEAN Stack Front to Back (MEANAuthApp)
Presentation transcript:

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

참고 Traversy Media 유투브에서 Traversy Media 검색 MEAN Stack Front To Back 동영상 http://www.traversymedia.com/ 유투브에서 Traversy Media 검색 https://www.youtube.com/user/TechGuyWeb MEAN Stack Front To Back 동영상 https://www.youtube.com/watch?v=uONz0lEWft0 https://www.youtube.com/playlist?list=PLillGF- RfqbZMNtaOXJQiDebNXjVapWPZ Github 소스코드 https://github.com/bradtraversy/meanauthapp

목차 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

1. 환경 구축

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

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

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

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)

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

웹에디터 atom 설치 설치 사이트 https://atom.io/ 현재 폴더에서 atom 열기 > atom .

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

2. Express Setup & Routes

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

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

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

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

필요한 패키지 설치 패키지 설치 > 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 명령을 실행하면 똑같은 패키지들이 설치됨

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

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 프로젝트의 메인 실행 파일

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)에 동적으로 선언됨

웹브라우저 출력 서버 재시작 > 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

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

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

Express API http://expressjs.com/en/api.html

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

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

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

CORS Middleware Npm cors 모듈을 이용하여 간편하게 선언하기 https://www.npmjs.com/package/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() 함수는 미들웨어를 선언하는 함수

Body-Parser Middleware 사용자 입력값을 전달하기 위해 POST 방식의 웹페이지 요청을 처리하기 위한 미들웨어 (로그인시 username/password는 POST 방식으로 전달) https://www.npmjs.com/package/body-parser 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);

새로운 루트 추가하기 메인 루트 새로운 users 루트 App.js에 users 루트 등록 http://localhost:3000 새로운 users 루트 http://localhost:3000/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 루트에 등록

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

여러 개의 루트 추가 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

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());

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

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

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

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); });

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);

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

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

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