MEAN Stack Front to Back

Slides:



Advertisements
Similar presentations
Mobile App 구축사례 2012 년 3 월 21 일 발표자 위성식 팀장 - 목 차 – Ⅰ. 회 사 소 개 Ⅱ. 구 축 사 례 Ⅲ. 향 후 과 제.
Advertisements

For Android 이재원.  페이스북 SDK 설치  2 가지 예제 & 소스  API 사용 예제 프로젝트 만들기  Graph API  참고사항 & 사이트.
개인의견 차가있을수있음 훈훈한남자 배우 TOP 5. 5 위는 박보검 웃을때보이는 치명적인 미소 꺄 ~~~ 5위5위.
Cloud Computing Green IT. 목차 클라우드 컴퓨팅 개념 - 클라우드 컴퓨팅 등장 - 클라우드 컴퓨팅의 정의 - 클라우드 컴퓨팅 요소 컴퓨팅 종류 - 클라우드 컴퓨팅의 진화 - 그리드 컴퓨팅 - 유틸리티 컴퓨팅 - 클라우드 컴퓨팅 특징 - 문제점 IT.
의료자원 규제현황과 개선방향 자원평가실. 의료자원 관리 개요 규제개혁 토론과제.
Page 1 Android Programming November 04 / 2009 S/W Junhyuk Jang.
윈포스 설치 매뉴얼 포스소프트 전화 : 053) 팩스 : 053)
성결 어린이 영등포교회 유년부 정답은 뒷면에 제 11-31호 2011월 8월 14일 어디로 가세요?
강의 기법과 상황대처 경기도 마약퇴치운동본부 김이항 약사 10.
연 합 남 전 도 회 월 례 회 1부 예배- 찬 송 장 다같이 2011년 1월 2일 1부 예배- 찬 송 장 다같이 기 도
TOURISM & BUSINESS INFORMATION SYSTEM. TOURISM & BUSINESS INFORMATION SYSTEM.
Ⅵ. 빛(단원학습목표).
사 업 계 획 2011년 제1호 - 2월 1일 2011 주 안에서 소통하며 화합하고 참여하며 헌신하는 남신도회
MEAN Stack Front to Back (MEANAuthApp)
통로이미지㈜ 마케팅실 신입/경력 모집 ◎ 모집부분 및 자격요건 ◎ 채용인원 ◎ 전형절차 ◎ 제출서류 ◎ 연봉 ◎ 사전인터뷰
IoT(사물인터넷) 보안 2016년 2학기 3. 라즈베리파이와 node.js.
Python Bottle Web Framework
Software development #5: Version Control System
GitHub와 Visual Studio를 이용한 프로젝트 관리
3장. 라우터와 스위치의 기본설정 2012년 2학기 중부대학교 정보보호학과 이병천 교수.
Hello World Bot Framework
1 최초 한번만 실행 Git 초기화 git init git config user.name “StudentNum”
9. Deploying mean applications
Git 사용법 GitHub 가입 GitHub 새 저장소 만들기 Git 설치, 설정.
MEAN Stack Front to Back
Trac By insung.
영덕풍력발전단지 준공 기념식 행사(안) 경영기획실.
독도 바로알기 2. 사료와 지도로 보는 독도.
remote add origin <GitHub url>
<원광만세력> APP 사용설명서
ASP.NET Mobile Controls
웹 어플리케이션 보안 2016년 2학기 8. MEAN APP – USER CRM.
MEAN Stack Front to Back (MEANAuthApp)
Git 사용법 GitHub 가입 GitHub 새 저장소 만들기 Git 설치 로컬 저장소 만들기 로컬 저장소와 원격 저장소 연결
Bot Framework Hello World Bot과 Telegram에서 대화 하기
웹 어플리케이션 보안 2016년 2학기 3. Mongo db.
이종효 이슬기 강민수 송강산 이해인 은혁진.
DataBase 연결 및 사용방법
7장: 빛의 간섭과 회절 빛의 간섭 단일슬릿과 회절 회절격자 – 더 선명해진 간섭무늬.
스타트업을 위한 손쉬운 챗봇 개발 및 서비스하기
제10,11,12장 파일시스템 디스크 스케줄링.
수동 설치시는 설치 방법 1. 두번에 설치 CD 속에 fscommand 폴더 밑에 Osstem 이라는 폴더를
귀사의 App에 가장 쉽고 빠르게 채팅기능을 추가하세요!
3장. 라우터와 스위치의 기본설정 2012년 2학기 중부대학교 정보보호학과 이병천 교수.
GIT 설정 및 사용 방법 (윈도우 기반).
MEAN Stack Front to Back (MEANAuthApp)
SQL Server Reporting Services 구성과 배포, 그리고 사용
MS Excel 활용 2009년 2학기 컴퓨터의 개념 및 실습 서울대학교 통계학과
MEAN Stack Front to Back (MEANAuthApp)
IoT(사물인터넷) 보안 2016년 2학기 3. 라즈베리파이와 node.js.
Git 사용하기 Git 소개 Git 사용 환경 GitHub 가입 및 원격 저장소 만들기 Git 설치 Git 최초 설정
노드로 만들 수 있는 대표적인 서버와 용도 준비마당 Do it! Node.js 프로그래밍 이지스퍼블리싱 제공 강의 교안
제안 목적 고객성향 분석으로 매출 증대 유사업체 분석으로 신상품 홍보 원가요소 분석 및 피드백으로 원가율 관리
“서울시랑 즐거웁게, 시민이랑 어울리게, 모바일로 만나는 스마트한 서울라이프”
청각기관의 구조와 기능2 옥정달.
기술가정 2학년 1학기 2.재료의 이용>1) 목재,플라스틱,금속재료의 특성>11/15제품의 구상
웹어플리케이션보안 난수화 토큰인증 중부대학교 정보보호학과 이병천 교수.
홈페이지 제안서
10장. 컴퓨터 구조에 대한 세 번째 이야기 작성자: 윤성우.
SQL Server Reporting Services Feature
Git을 이용한 버전 관리 - Branch 실습
비축사업 전자계약시스템 도입 용역 사용자매뉴얼(업체담당자용) Version 1.0.
붙임#1 V4308(다산네트웍스) 개량개선 내역(1.09) 네트워크기술지원본부 유선액세스망기술지원담당 1.
K PaaS-TA 앱 개발.
수동 설치시는 설치 방법 1. 두번에 설치 CD 속에 fscommand 폴더 밑에 Osstem 이라는 폴더를
우리의 일상이 된 사물인터넷 정보영재 학급 김서현, 이서연 지도 교사: 이유라 지도 교수: 김태영
MEAN Stack Front to Back (MEANAuthApp)
엑셀 Add-In 응용프로그램 개발 소개
MEAN Stack Front to Back (MEANAuthApp)
11월 고등부 공과설교 업드림? 업드림! 갈라디아서 6:9-10.
Presentation transcript:

MEAN Stack Front to Back (MEANAuthApp) 클라우드 서비스 Heroku에 포팅하기

클라우드 컴퓨팅

클라우드 컴퓨팅 8 Top Node.js Hosting Services Amazon Web Services Heroku AppFog Microsoft Azure RedHat OpenShift EngineYard Xervo (Formerly Modulus) Joyent https://www.netguru.co/blog/nodejs-hosting-services

사용할 클라우드 서비스 Node.js Platform-as-a-service MongoDB Database-as-a-Service

Heroku https://www.heroku.com/ 무료 클라우드 서비스 제공. 회원가입 필요

준비 app.js 에서 포트번호 설정 수정 // Port Number const port = process.env.PORT || 3000; 클라우드 서버에서 할당하는 환경변수 PORT를 포트번호로 사용 process.env 는 node.js에서 사용하는 사용자 환경 객체

준비 auth.service.ts 에서 호스트 주소를 상대주소로 수정

서비스 빌드 수정된 내용으로 서비스 다시 빌드 > cd angular-src > ng build

Heroku 접속 Heroku 접속, 서비스 가입, 로그인 Dashboard 에서 새로운 app 생성 https://www.heroku.com/ Dashboard 에서 새로운 app 생성

Heroku CLI 설치 https://devcenter.heroku.com/ 접속 Node.js 선택 Get started with node.js Heroku Command Line Interface (CLI) 설치 (windows 버전) I have installed the Heroku CLI 버튼 클릭

Git 설치 Git이란? Git 설치 souce 관리를 위한 분산 버전 관리 시스템 최초로 리눅스 토발즈가 리눅스 커널 개발에 이용하려고 개발 Git 설치 https://git-scm.com/

Google에서 ‘git 명령어’ 검색

Git 저장소 초기화 CMD에서 프로젝트 폴더로 이동 Git 버전 확인 Git 저장소 초기화 > cd meanauthapp Git 버전 확인 > git --version Git 저장소 초기화 > git init

새로운 app 생성 프로젝트 폴더에서 > heroku create (heroku 서버에 새로운 app 생성) 이메일, 암호 입력 생성된 App 주소 확인

새로운 app 생성 브라우저로 접속 확인 Heroku 대쉬보드에서 추가된 app 확인. 설정 가능

코드 이전, 빌드, 실행 프로젝트 폴더에서 Git 환경설정 Git commit Git push > git add . Git 환경설정 >git config --global user.email "sultan@joongbu.ac.kr" >git config --global user.name "Byoungcheon Lee“ Git commit >git commit -m ‘first’ 구별할 수 있는 메시지 추가 Git push > git push heroku master 실제 코드 이전, 빌드, 실행

서버 접속 확인 완성 https://ancient-sierra-86257.herokuapp.com/ MongoDB 설정 안해서 실제 DB 연결 동작은 안됨

mlab (클라우드 MongoDB 서비스) https://mlab.com/ MongoDB 기반 클라우드 DB 서비스 (DB-as-a-service) 회원 가입 필요

mlab mlab.com에 로그인, DB 생성 Create new  sandbox (free)  region  database name  submit order (meanauthapp)

mlab mongodb://<dbuser>:<dbpassword>@ds223763.mlab.com:23763/meanauthapp DB User 생성 복사

mlab add  commit  push config/database.js 수정 Git mlab의 DB 주소로 수정 생성한 user/password 정보 입력 Git > git add . > git commit -m ‘Dblink’ > git push heroku master module.exports = { // database: 'mongodb://localhost:27017/meanauth', //dev // database: 'mongodb://<dbuser>:<dbpassword>@ds223763.mlab.com:23763/meanauthapp', database: 'mongodb://bclee:bclee1234@ds223763.mlab.com:23763/meanauthapp', secret: 'yoursecret' } add  commit  push

최종 완성 서버 재접속 https://ancient-sierra-86257.herokuapp.com/ 사용자 등록, 로그인 기능 확인

과제 클라우드에 포팅한 자신의 서비스를 자신의 홈페이지에 링크하기 클라우드에 포팅한 자신의 서비스를 자신의 홈페이지에 링크하기 Heroku 이외에 다른 클라우드 서비스를 사용해도 상관 없음